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);
  myctx2.drawImage(mycanvas1,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中执行过滤器的事后操作。

SVG滤镜和画布像素

zhaopingg 回答：SVG滤镜和画布像素

大家都在问