html - SVG 过滤器和画布像素
问题描述
我正在尝试检索已应用过滤器的画布的像素。
在下面的示例中,我在 上应用过滤器mycanvas1
,在其上绘制图像,然后在另一个画布上绘制该画布mycanvas2
:
async function loadImageFromBase64(base64) {
return new Promise(resolve => {
const image = new Image();
image.onload = () => resolve(image);
image.src = base64;
});
}
async function main() {
const image = await(loadImageFromBase64(imageBase64));
const mycanvas1 = document.getElementById('mycanvas1');
const myctx1 = mycanvas1.getContext('2d');
const mycanvas2 = document.getElementById('mycanvas2');
const myctx2 = mycanvas2.getContext('2d');
myctx1.drawImage(image, 0, 0);
myctx2.drawImage(mycanvas1, 0, 0);
}
window.onload = main;
const imageBase64 = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHdpZHRoPSIxMjhweCIgaGVpZ2h0PSIxMjhweCIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyOCAxMjg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxjaXJjbGUgc3R5bGU9ImZpbGw6Izg4QzVDQzsiIGN4PSI2NCIgY3k9IjY0IiByPSI2NCIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiM4MEI5QkY7IiBkPSJNMTEwLjcyMywxMDcuNzE2Yy0wLjAyOS0wLjIxMy0wLjA5LTAuNDE2LTAuMTg1LTAuNjAyYzAuMDAyLTAuMDM5LDAuMDEzLTAuMDc1LDAuMDEzLTAuMTE0DQoJCWMwLTAuNDY2LTAuMTY4LTAuODkxLTAuNDM4LTEuMjNjLTAuMDQ1LTAuMzc1LTAuMTktMC43MTgtMC40MTQtMWMtMC4wNDUtMC4zNzUtMC4xOS0wLjcxOC0wLjQxNC0xDQoJCWMtMC4wNDQtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMWMtMC4wNDQtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMWMtMC4wNDQtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMQ0KCQljLTAuMDQ0LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTFjLTAuMDQ0LTAuMzc1LTAuMTg4LTAuNzE3LTAuNDEzLTFjLTAuMDQ0LTAuMzc1LTAuMTg4LTAuNzE4LTAuNDE0LTENCgkJYy0wLjA0My0wLjM3NS0wLjE4OC0wLjcxOC0wLjQxMy0xYy0wLjA0My0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xYy0wLjA0My0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xDQoJCWMtMC4wNDMtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMWMtMC4wNDMtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMWMtMC4wNDMtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMQ0KCQljLTAuMDQzLTAuMzc1LTAuMTg4LTAuNzE3LTAuNDEyLTFjLTAuMDQ1LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTFjLTAuMDI3LTAuMjM0LTAuMDk0LTAuNDU1LTAuMTk1LTAuNjU4DQoJCWMwLjAwNC0wLjAzNywwLjAxMi0wLjA3MywwLjAxMi0wLjExMWMwLTAuNDY2LTAuMTY4LTAuODkxLTAuNDM4LTEuMjNjLTAuMDQ0LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTENCgkJYy0wLjA0NC0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xYy0wLjA0NC0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xYy0wLjA0NC0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xDQoJCWMtMC4wNDQtMC4zNzUtMC4xODktMC43MTctMC40MTItMWMtMC4wNDUtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMWMtMC4wNDUtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMQ0KCQljLTAuMDQ1LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTFjLTAuMDQ1LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTFjLTAuMDQ1LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTENCgkJYy0wLjA0NS0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xYy0wLjA0NS0wLjM3NS0wLjE4OC0wLjcxNy0wLjQxMi0xYy0wLjA0NS0wLjM3NS0wLjE5LTAuNzE4LTAuNDE0LTENCgkJYy0wLjA0NS0wLjM3NS0wLjE5LTAuNzE4LTAuNDE0LTFjLTAuMDQ0LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTFjLTAuMDQ0LTAuMzc1LTAuMTg5LTAuNzE4LTAuNDE0LTENCgkJYy0wLjA0NC0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xYy0wLjAyNS0wLjIzNC0wLjA5My0wLjQ1NS0wLjE5My0wLjY1OGMwLjAwMi0wLjAzNywwLjAxMi0wLjA3MywwLjAxMi0wLjExMQ0KCQljMC0wLjQ2Ni0wLjE2OC0wLjg5MS0wLjQzOC0xLjIzYy0wLjA0NC0wLjM3NS0wLjE4OC0wLjcxNy0wLjQxMy0xYy0wLjA0NC0wLjM3NS0wLjE4OS0wLjcxOC0wLjQxNC0xDQoJCWMtMC4wNDMtMC4zNzUtMC4xODktMC43MTgtMC40MTQtMWMtMC4wNDMtMC4zNzUtMC4xODgtMC43MTgtMC40MTQtMWMtMC4wNDMtMC4zNzUtMC4xODgtMC43MTgtMC40MTQtMQ0KCQljLTAuMDQzLTAuMzc1LTAuMTg4LTAuNzE3LTAuNDE0LTFjLTAuMDQzLTAuMzc1LTAuMTg4LTAuNzE3LTAuNDE0LTFjLTAuMDQzLTAuMzc1LTAuMTg4LTAuNzE3LTAuNDEyLTENCgkJYy0wLjA0NS0wLjM3NS0wLjE4OS0wLjcxNi0wLjQxMy0wLjk5OWMtMC4wNDQtMC4zNzYtMC4xODktMC43MTgtMC40MTQtMS4wMDFjLTAuMDQ0LTAuMzc1LTAuMTg4LTAuNzE3LTAuNDE0LTENCgkJYy0wLjA0NC0wLjM3NS0wLjE4OC0wLjcxNy0wLjQxNC0xYy0wLjA0NC0wLjM3NS0wLjE4OC0wLjcxNy0wLjQxNC0xYy0wLjA0NC0wLjM3NS0wLjE4OC0wLjcxNy0wLjQxNC0xDQoJCWMtMC4wNDQtMC4zNzUtMC4xODgtMC43MTctMC40MTQtMWMtMC4wNDQtMC4zNzUtMC4xODgtMC43MTctMC40MTQtMWMtMC4wMjYtMC4yMzMtMC4wOTMtMC40NTMtMC4xOTItMC42NTUNCgkJYzAuMDAyLTAuMDM5LDAuMDEyLTAuMDc1LDAuMDEyLTAuMTE0YzAtMC40NjYtMC4xNjgtMC44OS0wLjQzOC0xLjIzMWMtMC4wNDUtMC4zNzUtMC4xOS0wLjcxNy0wLjQxNC0xDQoJCWMtMC4wNDUtMC4zNzUtMC4xOS0wLjcxNy0wLjQxNC0xYy0wLjA0NS0wLjM3NS0wLjE5LTAuNzE3LTAuNDE0LTFjLTAuMDQ1LTAuMzc1LTAuMTktMC43MTctMC40MTQtMQ0KCQljLTAuMDQ1LTAuMzc1LTAuMTktMC43MTctMC40MTQtMWMtMC4wNDUtMC4zNzUtMC4xOS0wLjcxNy0wLjQxNC0xYy0wLjA0NS0wLjM3NS0wLjE4OS0wLjcxNi0wLjQxMy0wLjk5OQ0KCQljLTAuMDQ0LTAuMzc2LTAuMTktMC43MTgtMC40MTQtMS4wMDFjLTAuMDQ0LTAuMzc1LTAuMTktMC43MTctMC40MTQtMWMtMC4wNDQtMC4zNzUtMC4xOS0wLjcxNy0wLjQxNC0xDQoJCWMtMC4wNDQtMC4zNzUtMC4xOS0wLjcxNy0wLjQxNC0xYy0wLjA0NC0wLjM3NS0wLjE5LTAuNzE3LTAuNDE0LTFjLTAuMDQ0LTAuMzc1LTAuMTktMC43MTctMC40MTQtMQ0KCQljLTAuMDQ0LTAuMzc1LTAuMTg4LTAuNzE2LTAuNDEzLTAuOTk5Yy0wLjA0My0wLjM3Ni0wLjE4OS0wLjcxOC0wLjQxNC0xLjAwMWMtMC4wNDMtMC4zNzUtMC4xODgtMC43MTctMC40MTQtMQ0KCQljLTAuMDQzLTAuMzc1LTAuMTg4LTAuNzE3LTAuNDE0LTFDODAuODE4LDMyLjc3OCw3OS45OCwzMiw3OC45NiwzMmgtMzBjLTEuMSwwLTIsMC45LTIsMmMwLDAuMzIsMC4wODMsMC42MTksMC4yMTksMC44ODgNCgkJYy0wLjAwMiwwLjAzOC0wLjAxMiwwLjA3NC0wLjAxMiwwLjExMmMwLDAuNDY2LDAuMTY4LDAuODksMC40MzgsMS4yMzFjMC4wNDUsMC4zNzUsMC4xOSwwLjcxNywwLjQxNCwxDQoJCWMwLjA0NSwwLjM3NSwwLjE4OSwwLjcxNiwwLjQxNCwwLjk5OWMwLjA0MywwLjM3NiwwLjE4OSwwLjcxOCwwLjQxMywxLjAwMWMwLjA0NCwwLjM3NSwwLjE5LDAuNzE3LDAuNDE0LDENCgkJYzAuMDQ0LDAuMzc1LDAuMTksMC43MTcsMC40MTQsMWMwLjA0NCwwLjM3NSwwLjE5LDAuNzE3LDAuNDE0LDFjMC4wNDQsMC4zNzUsMC4xOSwwLjcxNywwLjQxNCwxYzAuMDQ0LDAuMzc1LDAuMTksMC43MTcsMC40MTQsMQ0KCQljMC4wMTEsMC4wODcsMC4wMjIsMC4xNzIsMC4wNDQsMC4yNTZWMTA3djAuNTEydjAuNTEyYzAsMi4xNjgsMC41MzcsNC4yMDUsMS40NzUsNi4wMDJjMC4yNDYsMC44OTYsMC41OCwxLjc1MiwxLDIuNTYxDQoJCWMwLjI0NiwwLjg5NiwwLjU4LDEuNzU0LDEsMi41NjNjMC4yNDYsMC44OTYsMC41OCwxLjc1MiwxLDIuNTYxYzAuMzE3LDEuMTU2LDAuNzg5LDIuMjQ1LDEuMzk0LDMuMjQ4DQoJCWMwLjE3MSwwLjQ2NywwLjM3MSwwLjkyMywwLjU5OSwxLjM2MWMwLjEzMSwwLjQ3NCwwLjI4NywwLjkzNSwwLjQ2NywxLjM4NGMyLjAxMSwwLjE5LDQuMDQ1LDAuMjk3LDYuMTA1LDAuMjk3DQoJCUM4Mi40MzgsMTI4LDk5LjA0MywxMjAuMTkxLDExMC43MjMsMTA3LjcxNnoiLz4NCgk8cGF0aCBzdHlsZT0iZmlsbDojRjVGNUY1OyIgZD0iTTUwLjk1MywzNnY3MWMwLDcuMTgsNS44MiwxMywxMywxM2M3LjE4LDAsMTMtNS44MiwxMy0xM1YzNkg1MC45NTN6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6Izk2RTY1MjsiIGQ9Ik03Mi45NTMsODd2MjBjMCw0Ljk2Mi00LjAzNyw5LTksOXMtOS00LjAzOC05LTlWODdINzIuOTUzeiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNjIuOTUzLDQ2aC03Yy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDdjMC41NTMsMCwxLDAuNDQ4LDEsMVM2My41MDYsNDYsNjIuOTUzLDQ2eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNTcuOTUzLDUwaC0yYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDJjMC41NTMsMCwxLDAuNDQ4LDEsMVM1OC41MDYsNTAsNTcuOTUzLDUweiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNjIuOTUzLDU0aC03Yy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDdjMC41NTMsMCwxLDAuNDQ4LDEsMVM2My41MDYsNTQsNjIuOTUzLDU0eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNTcuOTUzLDU4aC0yYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDJjMC41NTMsMCwxLDAuNDQ4LDEsMVM1OC41MDYsNTgsNTcuOTUzLDU4eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNjIuOTUzLDYyaC03Yy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDdjMC41NTMsMCwxLDAuNDQ4LDEsMVM2My41MDYsNjIsNjIuOTUzLDYyeiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNTcuOTUzLDY2aC0yYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDJjMC41NTMsMCwxLDAuNDQ4LDEsMVM1OC41MDYsNjYsNTcuOTUzLDY2eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNjIuOTUzLDcwaC03Yy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDdjMC41NTMsMCwxLDAuNDQ4LDEsMVM2My41MDYsNzAsNjIuOTUzLDcweiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNTcuOTUzLDc0aC0yYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDJjMC41NTMsMCwxLDAuNDQ4LDEsMVM1OC41MDYsNzQsNTcuOTUzLDc0eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNjIuOTUzLDc4aC03Yy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDdjMC41NTMsMCwxLDAuNDQ4LDEsMVM2My41MDYsNzgsNjIuOTUzLDc4eiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNCM0IzQjM7IiBkPSJNNTcuOTUzLDgyaC0yYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDJjMC41NTMsMCwxLDAuNDQ4LDEsMVM1OC41MDYsODIsNTcuOTUzLDgyeiIvPg0KCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0Y1RjVGNTsiIGN4PSI3MS45NTMiIGN5PSIyNyIgcj0iMiIvPg0KCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0Y1RjVGNTsiIGN4PSI4MS45NTMiIGN5PSIxMSIgcj0iMiIvPg0KCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0Y1RjVGNTsiIGN4PSI4MS45NTMiIGN5PSIyMyIgcj0iNCIvPg0KCTxjaXJjbGUgc3R5bGU9ImZpbGw6I0Y1RjVGNTsiIGN4PSI3Mi45NTMiIGN5PSIxNSIgcj0iMyIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGNUY1RjU7IiBkPSJNODAuOTUzLDM0YzAsMS4xLTAuOSwyLTIsMmgtMzBjLTEuMSwwLTItMC45LTItMmwwLDBjMC0xLjEsMC45LTIsMi0yaDMwDQoJCUM4MC4wNTMsMzIsODAuOTUzLDMyLjksODAuOTUzLDM0TDgwLjk1MywzNHoiLz4NCgk8cmVjdCB4PSI1MC45NTMiIHk9IjM2IiBzdHlsZT0iZmlsbDojQ0NDQ0NDOyIgd2lkdGg9IjI2IiBoZWlnaHQ9IjEiLz4NCjwvZz4NCjwvc3ZnPg0K';
<!DOCTYPE html>
<html>
<head>
<title>My Filter</title>
<meta charset="utf-8">
<style>
#mycanvas1 {
filter: url(#myfilter);
border: 3px solid blue;
}
#mycanvas2 {
border: 3px solid red;
}
</style>
</head>
<body>
<canvas id="mycanvas1"></canvas>
<canvas id="mycanvas2"></canvas>
<svg>
<filter id="myfilter" x="0" y="0" width="100%" height="100%">
<feColorMatrix type="luminanceToAlpha"/>
</filter>
</svg></body>
</html>
但是过滤器似乎并没有应用于画布像素。它们是后处理的,这就是为什么第二个画布包含没有过滤器的图像。有没有办法在应用了过滤器的情况下检索画布的像素?
我需要这个,因为我需要在 javascript 中执行一些过滤器的事后操作。
解决方案
推荐阅读
- python - PyQt5 中的 LineEdit 框
- python - 我怎样才能使程序循环直到满足条件?
- html - 为表达式内的 Ruby 字符串中的单词添加文本样式
- c# - 过滤时来自命令参数错误的 ID
- android - 有没有人能够在 WebView 中运行 HTTP?
- python - 根据第三个变量分配另一个变量的变量值
- java - Hackerrank 不接受有效的解决方案
- mysql - SQL:插入到 table_b 中,其中 table_a 没有相关行?
- node.js - 当我向套接字服务器发出一些值时没有任何反应
- python - 如何使用 for 循环按列将数据框拆分为组,仅按列而不是行拆分 df