SVG Фильтры и пиксели холста - PullRequest
Новая
       27

SVG Фильтры и пиксели холста

0 голосов
/ 25 марта 2020

Я пытаюсь получить пиксели холста, к которым были применены фильтры.

В этом примере ниже я применяю фильтр к 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.

...