火狐: canvas.toDataURL中的image.onload但返回透明图像
我知道图像必须是完整的，它的加载在画布上使用toDataURL函数之前已经完成，将代码放在image.onload函数中可以确保这一点。
还在canvas.getContext中尝试了{canvas.getContext: true}。
这不适用于火狐，但适用于Chrome.
我的代码：
var imageWidth = imageHeight = 45;
var image = new Image();
console.log(image);
image.onload = (function (imageWidth, imageHeight) {
var canvas = document.createElement('canvas');
d3.select(canvas)
.attr('width', imageWidth + "px")
.attr('height', imageHeight + "px");
var context = canvas.getContext('2d', {preserveDrawingBuffer : true});
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var dataURL;
dataURL = canvas.toDataURL("image/png");
callback(dataURL);
}).bind(this, imageWidth, imageHeight);
image.onerror =
image.onabort = function () {
console.error("generateIcon : error on image");
}
image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function (match, p1) {
return String.fromCharCode('0x' + p1);
}));使用xmlSource = "<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54.4 54.4"><g><circle cx="27.2" cy="27.2" r="21.2" stroke-width="3" stroke="#606060" style="fill: rgb(189, 189, 189);"/><text dx="26" dy="34" text-anchor="middle" style="font-size:18px; fill: #000000; font-family: Arial, Verdana; font-weight: bold">90</text></g></svg>"
由此产生的dataURL是：
- Firefox：
数据:image/png；base64 64，iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAHElEQVRYhe3BgQAAAADDoPlTH+ECVQEAAAAAxwATRwABzzGAqwAAAABJRU5ErkJggg==
- 铬：
数据:image/png；base64 64，iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAD20lEQVRYR9VX3ytkURz/3BcS2c2LF+yiPChm1gMhBskLaUbiSXv3L9jdPIp2KXnCAx687JkkJVnlV36U8cAjRpESES8eaHfjRelun9O907hz57pjxma/pRlnzjn3cz/fz/dzvkfBKwrlFWHB/w1GVVU3gI8A+FljwWwAwB4AvxCCn47DMTOqqvLBPwC8N++emZmJq6srq4cSzFchBAE+GU+CUVX1LYCfBgupqanIz89HdnY2MjIyIh5wc3ODi4sLnJyc4O7uzvidYHxCiF92iGzB6CkhG26CcLlcEojTIKBgMGiAIkuf7FIXFYwOhG/0hmmoqalBUlKSUxyheff39wgEAkYaf5PhaIAsweip2aU+8vLyUFlZGTMI84KtrS2cnp5ymAzVWqUsGhgy4qEuyEiiYnV11WAoIISoNe8bAUavmg1qpKmp6VmpiQaeKVtYWDA0RHYeVZkVmDMA7yoqKmISq1P2KOrt7W2ZLiHEh/B1j8Doot0lKy0tLU73j3ne7Oyswc6HcDGbwQwD+FxcXCzL2ByapmFvbw9+vx/n5+fwer1oa2tDSkoKDg8PMT4+Lv2lubkZ7e3tSE9PtwTKct/f3+dv34UQ34xJZjBSuI2NjZaGRjPr6+uTAEpKSjA8PAy32y1FPjQ0hNLSUlRVVWFwcBBFRUVobW2FokTWCI1xcXGRGDaFEKEKMYPROKOjo8PyjTY2NjA5OYmenh7k5ORgZmYGBwcHUuj9/f0SaGFhISYmJmQZd3Z2Ii0tzXIvzmEIIUIY4gIzPz+PtbU1eDwerKysoLu7Wx4TxnhXVxdomFbhCAwXNzQ0WG5wdnaG3t5eqYfy8nKMjY1JBurr67G+vh4Cw+/T09Oh/602Mzzn2cxQwHRSIYTcPzc3F9fX11Iny8vLiWfGTjPmN2Q6dnZ2XkwzttV0eXkpq6aurg7V1dUYHR0FbaCsrAwDAwNyjH8jIyMoKCiIu5psfebh4QFLS0uYmpqSJLF0aQPJyck4Pj6WPnN0dJQwn2Eructy9Pl8MTur0wWOHJibqarKI971D86moBCCLx+KqKc22WEKntNQRWOIpzad9/b2llOePrV1dqSQ7TzHaUrC54X1M4+OAcuzyRjUOz0CcrHnZcrijbBOL6i3nhHNuW0PrGnapqIo6YnqgTVN+6MoiiemHjiMIQqMduuihugpsd4O2CroGiEj6rNuB6aUzVFDHCMoAsrKyop6b6I5sq/RQXDZJgBvXPemcJ3ovTFNMaLrsrlRko0vCbtRmoWrt6Ze/YYp2TIFWaD4517srh1vNTlZ/+Rd28kmiZrzqsD8BVO+9jOAAiWjAAAAAElFTkSuQmCC
知道吗？
谢谢，mpe
回答 1
Stack Overflow用户
发布于 2017-03-01 10:35:22
您需要将绝对width和height属性设置为根svg节点(例如，在px中)。
默认情况是100%，但是FF无法知道相对于什么(规范还没有说明)。Chrome是相对于只有他们知道的东西而言的。
因此，FF不会在画布上绘制svg图像，但也不会触发错误，因为图像已正确加载(在html文档中，它们可以知道相对于哪些维度)。
var xmlSource = '<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 54.4 54.4"><g><circle cx="27.2" cy="27.2" r="21.2" stroke-width="3" stroke="#606060" style="fill: rgb(189, 189, 189);"/><text dx="26" dy="34" text-anchor="middle" style="font-size:18px; fill: #000000; font-family: Arial, Verdana; font-weight: bold">90</text></g></svg>';
function callback(dataURI){
var img = new Image();
img.src = dataURI;
document.body.appendChild(img);
console.log(dataURI);
}
var imageWidth = imageHeight = 45;
var image = new Image();
image.onload = (function (imageWidth, imageHeight) {
var canvas = document.createElement('canvas');
canvas.width = imageWidth;
canvas.height = imageHeight;
var context = canvas.getContext('2d', {preserveDrawingBuffer : true});
context.drawImage(image, 0, 0, imageWidth, imageHeight);
var dataURL;
dataURL = canvas.toDataURL("image/png");
callback(dataURL);
}).bind(this, imageWidth, imageHeight);
image.onerror =
image.onabort = function () {
console.error("generateIcon : error on image");
}
image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function (match, p1) {
return String.fromCharCode('0x' + p1);
}));
https://stackoverflow.com/questions/42528266
复制相似问题
腾讯云开发者
