Экспорт PNG из SVG на холсте

Question

Это своего рода сложный вопрос:

Моя цель - взять HTML и экспортировать его как PNG. Я читал, что лучший способ сделать это - обернуть HTML в элементе SVG и foreignObject и нарисовать его на холсте HTML5. Проблема в том, что когда я это делаю, я обнаружил невозможность экспорта из-за сообщения об ошибке tainted canvas cannot be exported. Вот мой код:

var data = "<svg width=200 height=200>" + 
      "<foreignObject width=100% height=100%>" + 
      document.getElementById("textbox").innerHTML + 
      "</foreignObject>" + 
      "</svg>"; 

var serialized = new XMLSerializer().serializeToString(data.toDOM()); 

var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 
var DOMURL = window.URL || window.webkitURL || window; 

var img = new Image(); 
var svg = new Blob([serialized], {type: 'image/svg+xml;charset=utf-8'}); 
var url = DOMURL.createObjectURL(svg); 

img.onload = function() { 
    ctx.drawImage(img, 0, 0); 
    DOMURL.revokeObjectURL(url); 
    window.open(canvas.toDataURL("image/png")); //this is the line with the error 
} 

img.src = url; 

Я проверил большинство это работает, за исключением того canvas.toDataURL() вызова. Я что-то упустил? Есть ли способ заставить это работать, я упускаю из виду? Спасибо ...

Answer 1

Да, SVG красит холст в современных браузерах.

Вы больше не можете использовать хакер foreignObject, чтобы очистить элемент html.

Современные браузеры подключили это отверстие для очень хороших соображений безопасности.

Нет альтернатив кросс-браузера - опять же для очень хороших соображений безопасности.

В Chrome есть плагин под названием ScreenShot, который позволяет вам очищать контент.