Холст "испорченный" после рисунка SVG

Question

Подобные вопросы были заданы, и ПРИЧИНА для проблемы хорошо понятна, я спрашиваю об альтернативах или обходных путях:

То, что я хотел бы сделать, это получить URL-адрес данных из холста, на котором нарисован документ SVG. Я перепробовал разные вещи, но IE9 и Chrome просто не позволят мне получить этот URL, как только SVG приблизится к этому холсту.

Я пробовал:

• Canvg (не поддерживает все, что мне нужно)
• Рисование файла SVG непосредственно на холст (content.drawImage(svg, 0 0))
• Создайте строку base64 всего документа SVG, сделав ее источником, а затем нарисовав это изображение на холсте.
• Сохраняя svg в файл, установите атрибут src так, чтобы он указывал на файл (в том же домене), затем перетяните его на холст

У меня заканчиваются идеи.

Могу ли я попробовать похожие библиотеки, которые растеризуют SVG? Может ли быть что-то еще, что я могу преобразовать в SVG перед рисованием, чтобы холст никогда не знал, что SVG был вовлечен? Есть ли действительно простой способ сделать преобразование на стороне сервера с помощью PHP или что-то подобное?

Answer 1

Сделать три вещи,

1. получить SVG и разобрать его с помощью XMLSerializer
2. изменить высоту и ширину холста перед рисованием SVG
3. используйте библиотеку "canvg" для анализа SVG вместо использования canvas в браузере с собственными методами canvas.

//Get SVG element and then serialize it to convert to a stream of String
var svg = document.querySelectorAll('svg');
var base64 = [];
for(i=0; i < svg.length; i++){
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg[i]);
var canvas = document.querySelectorAll('canvas');
var render_width = 1000;
var render_height = 600;

//CHange/Set Canvas width/height attributes to reset origin-clean flag
canvas[i].height = render_height;
canvas[i].width = render_width;

//Use canvg library to parse SVG and draw the image on given canvas
canvg(canvas[i], svgString, {
useCORS: true,
scaleWidth: render_width,
scaleHeight: render_height,
ignoreDimensions: true,
log: true
});

//Convert canvas to png formated dataURL and save the body of it
var rawImage = canvas[i].toDataURL("image/png");

//Array containing all the images in the form of base64 data URLs.
base64ImageArray.push(rawImage);
}

Надеюсь это поможет.

Answer 2

Если вы хотите растеризовать SVG, вот несколько проектов:

• SVG BTOA Сериализатор
• Растеризация на стороне сервера из сериализованного SVG

Вот таблица совместимости браузера:

• От SVG до холста и обратно