Я пытаюсь преобразовать большой SVG (его URL-адрес данных около 750000 - 1000000 символов) в PNG, передав его URL-адрес через изображение и на холст, но изображение загружает только 1/4 из SVG.
Создание через:
var svg_xml = (new XMLSerializer()).serializeToString(svg),
url = 'data:image/svg+xml;base64,' + btoa(svg_xml);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.create('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
}
img.src = url
Edit
Я пробовал реализовать canvg для рисования SVG, но DataURL дал результаты в виде чистого изображения:
var svg_xml = (new XMLSerializer()).serializeToString(svg);
var canvas = document.createElement('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawSvg(svg_xml, 0, 0, 730, 300);
callbackFn(canvas.toDataURL('image/png');
Есть ли что-то неправильное в методе, который я использовал?
Дальнейшее редактирование
Теперь я уверен, что это холст не смог нарисовать весь образ, поскольку я попытался реализовать решение Blob с тем же эффектом:
var svg_xml = (new XMLSerializer()).serializeToString(svg),
blob = new Blob([svg_xml], {type:'image/svg+xml;charset=utf-8'}),
url = window.URL.createObjectURL(blob);
var img = new Image();
img.width = 730;
img.height = 300;
img.onload = function(){
var canvas = document.create('canvas');
canvas.width = 730;
canvas.height = 300;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, 730, 300);
window.URL.revokeObjectURL(url);
callbackFn(canvas.toDataURL('image/png');
}
img.src = url
Изображение снова загружается нормально и переходит к URL-адресу (до его отмены) также отображает изображение.
Длина холста dataURL не является последовательной, поэтому я не думаю, что maxing out, есть ли способ определить размер холста? Приложение поддерживается только для Chrome и FireFox.