[英]SVG to PNG in javascript
I have a problem with converting svg to png(base64).我在将 svg 转换为 png(base64) 时遇到问题。 Svg to base64 works fine, because it displays just fine in the browser.
Svg 到 base64 工作正常,因为它在浏览器中显示得很好。 But when i try to load in the image, it won't load.
但是当我尝试加载图像时,它不会加载。 Anybody might have an idea why?
任何人都可能知道为什么?
var xml = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(xml);
var b64start = 'data:image/svg+xml;base64,';
var image64 = b64start + svg64;
console.log(image64);
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const dataBase64 = canvas.toDataURL('image/png');
console.log(dataBase64);
generatePowerpoint(response, dataBase64);
}
img.onerror = function() {
console.log(this.src);
}
img.src = image64;
It depends of the browser you are using.这取决于您使用的浏览器。 Using Firefox, the svg tag must have width and height attributes (unit not in %).
使用 Firefox,svg 标签必须具有宽度和高度属性(单位不是 %)。
It also depends of the content of the svg.它还取决于 svg 的内容。 If the svg contains non-latin characters, btoa may fail (even if it seems not to be the problem here since Svg to base64 works fine in your case).
如果 svg 包含非拉丁字符,btoa 可能会失败(即使这似乎不是问题,因为 Svg 到 base64 在您的情况下工作正常)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.