javascript 将SVG转换为PNG会导致空白图像[重复]

ycl3bljg 于 2023-05-16 发布在 Java

关注(0)|答案(1)|浏览(311)

此问题已在此处有答案：

Firefox error rendering an SVG image to HTML5 canvas with drawImage（3个答案）
2天前关闭。
截至2天前，社区正在审查是否重新讨论此问题。
我试图转换SVG到PNG图像使用画布作为“代理”。
SVG已成功转换为PNG，但此SVG为shell SVG。
以下是JSFiddle：https://jsfiddle.net/8mqtLw6p/

var img = new Image();
var svg = new Blob([svgString], {
  type: "image/svg+xml;charset=utf-8"
});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  var png = canvas.toDataURL("image/png");
  var mg = document.createElement("img");
  mg.setAttribute("src", png);
  document.body.appendChild(canvas);
  document.body.appendChild(mg);
  DOMURL.revokeObjectURL(png);
};
img.setAttribute("src", url);

我不知道为什么它不与这个特定的SVG工作。
你能告诉我为什么吗？

**编辑：**它可以在Chromium上工作，但不能在FireFox上工作。

JavaScript

来源：https://stackoverflow.com/questions/76232792/converting-svg-to-png-results-in-blank-image

1条答案

按热度按时间

lmyy7pcs1#

为了能够绘制位图图像，它需要大小（宽度和高度）。如果SVG没有指定大小，并且您希望在浏览器中呈现时复制它，则可以使用getBoundingClientRect()来获取宽度和高度。
现在，你的SVG是相当大的，我只是用一个圆圈取代了所有的路径，并修改了viewBox一点。

let svg01 = document.getElementById('Capa_1');
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let img01 = document.getElementById('img01');

let BCR = svg01.getBoundingClientRect();
svg01.setAttribute('width', BCR.width);
svg01.setAttribute('height',BCR.height);

var xmlSerializer = new XMLSerializer();
var svgString = xmlSerializer.serializeToString(svg01);

var svg = new Blob([svgString], {
  type: "image/svg+xml;charset=utf-8"
});
var url = URL.createObjectURL(svg);

let img = new Image();

img.addEventListener('load', e => {
  URL.revokeObjectURL(e.target.src);
  canvas.width = e.target.width;
  canvas.height = e.target.height;
  ctx.drawImage(e.target, 0, 0);
  img01.src = canvas.toDataURL('image/png');
});
img.src = url;

<h3>The SVG:</h3>
<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 60">
  <style type="text/css">.st0 { fill: rgb(222, 83, 81); }.st1 { fill: rgb(23, 89, 149); }.st2 { fill: none; stroke: rgb(222, 83, 81); stroke-width: 2; stroke-miterlimit: 10; }.st3 { fill: rgb(33, 37, 88); }.st4 { fill: rgb(177, 223, 239); }.st5 { fill: rgb(255, 255, 255); }</style>
  <circle class="st1" cx="40" cy="30" r="25" />
</svg>
<hr>
<canvas id="canvas"></canvas>
<div>
  <img id="img01" />
</div>

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 将SVG转换为PNG会导致空白图像[重复]

1条答案

相关问题

热门标签

最新问答