如何将多个 SVG 转换为一个 PNG 图像？
[英]How to convert multiple SVG's to one PNG image?
问题描述
我需要将 2 个单独的 SVG 转换为 1 个 PNG 图像。 我目前有将 1 个 SVG 转换为 PNG 的代码。 此代码如下所示，我将 SVG 转换为画布到 PNG。
SVG 位于同一页面上，我尝试使用数组遍历它们并同时获取它们。 我目前正在处理的代码也在下面，但不起作用。 关于如何将 SVG 转换为相同的 PNG 图像的任何建议？
谢谢一堆！
单个 SVG 到 PNG
// convert svg to png function svgToPng(){ var svg = document.querySelectorAll('svg')[0]; // clone svg nodes var copy = svg.cloneNode(true); // convert to xml format for storage/transportation var serializer = new XMLSerializer(); var data = serializer.serializeToString(copy); // create url var DOMURL = window.URL || window.webkitURL || window; // create image/blob var img = new Image(); var blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(blob); // create canvas var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // draw image on canvas img.onload = function(){ ctx.drawImage(img, 0, 0, $(svg0).width(), $(svg0).height()); DOMURL.revokeObjectURL(url, url1); var imgURI = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); } // send new image to window img.src = url; // return img.src; window.open().document.write('<img src="' + img.src + '" width="1600" height="800"/>'); };
多个 SVG 到 PNG
// convert multipl svgs to png function multSvgToPng(){ var array = []; var totalSvg = document.querySelectorAll('svg'); // NodeList(2) [svg, svg] // create array for(var i = 0; i < totalSvg.length; i++){ array = document.querySelectorAll('svg')[i]; } for(var j = 0; j < array.length; j++){ var svg = array[j]; var copy = svg.cloneNode(true); var serializer = new XMLSerializer(); var data = serializer.serializeToString(copy); var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var blob = new Blob([data], {type: "image/svg+xml;charset=utf-8"}); var url = DOMURL.createObjectURL(blob); var svgStr = serializer.serializeToString(copy); } var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); img.onload = function(){ ctx.drawImage(img, 0, 0, $(svg).width(), $(svg).height()); DOMURL.revokeObjectURL(url); var imgURI = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); } // send new image to window img.src = url; // return img.src; window.open().document.write('<img src="' + img.src + '" width="1600" height="800"/>'); }
示例 SVG 图像
<!DOCTYPE html> <html> <body> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>
<!DOCTYPE html> <html> <body> <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> Sorry, your browser does not support inline SVG. </svg> </body> </html>
1 个解决方案
解决方案1
1 2020-09-02 22:54:14
我已经使用了您的技术并制作了两个单独的功能。 第一个函数drawSVGToCanvas通过将其转换为 blob 并在图像加载drawSVGToCanvas其绘制到画布上，为单个 SVG 创建画布。 当画布元素被填满时，它会返回一个带有画布元素的承诺。
convertSVGsToSingleImage接受一个 SVG 元素列表，它将为其循环并为这些 SVG 元素中的每一个调用drawSVGToCanvas 。 它一直等到它们被渲染并继续在单个新画布上绘制返回的画布元素。 这就是合并发生的地方。
const preview = document.getElementById('preview'); const svgs = document.querySelectorAll('svg'); function drawSVGToCanvas(svg) { const { width, height } = svg.getBoundingClientRect(); const serializer = new XMLSerializer(); const copy = svg.cloneNode(true); const data = serializer.serializeToString(copy); const image = new Image(); const blob = new Blob([data], { type: 'image/svg+xml;charset=utf-8' }); const url = URL.createObjectURL(blob); return new Promise(resolve => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; image.addEventListener('load', () => { ctx.drawImage(image, 0, 0, width, height); URL.revokeObjectURL(url); resolve(canvas); }, { once: true }); image.src = url; }) } async function convertSVGsToSingleImage(svgs, format = 'image/png') { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const drawSVGs = Array.from(svgs).map(svg => drawSVGToCanvas(svg)) const renders = await Promise.all(drawSVGs); canvas.width = Math.max(...renders.map(render => render.width)); canvas.height = Math.max(...renders.map(render => render.height)); renders.forEach(render => ctx.drawImage(render, 0, 0, render.width, render.height)); const source = canvas.toDataURL(format).replace(format, 'image/octet-stream'); return source; } convertSVGsToSingleImage(svgs).then(source => { const image = new Image(); image.addEventListener('load', () => { preview.append(image); }) image.src = source; });
<svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> Sorry, your browser does not support inline SVG. </svg> <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Sorry, your browser does not support inline SVG. </svg> <div id="preview"></div>
当页面中有多个SVG时，如何将SVG转换为canvas到PNG
[英]How to convert SVG to canvas to PNG when there are multiple SVGs in a page
我如何将多个svg转换为png，因为它们在html上？
[英]How can I covert multiple svg's into a png as it is they are on html?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.