如何將多個 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.