Question

我知道图像必须完整，在使用画布上的toDataURL函数之前完成加载，将代码放在image.onload函数中确保。

还在canvas.getContext中尝试了{preserveDrawingBuffer：true}。

这在Firefox中不起作用，但适用于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：

数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAHElEQVRYhe3BgQAAAADDoPlTH + ECVQEAAAAAxwATRwABzzGAqwAAAABJRU5ErkJggg ==

Chrome：

数据：图像/ PNG; BASE64，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 / 602Mzzn2cxQwHRSIYTcPzc3F9fX11Iny8vLiWfGTjPmN2Q6dnZ2XkwzttV 0eXkpq6aurg7V1dUYHR0FbaCsrAwDAwNyjH8jIyMoKCiIu5psfebh4QFLS0uYmpqSJLF0aQPJyck4Pj6WPnN0dJQwn2Eructy9Pl8MTur0wWOHJibqarKI971D86moBCCLx + KqKc22WEKntNQRWOIpzad9 / b2llOePrV1dqSQ7TzHaUrC54X1M4 + OAcuzyRjUOz0CcrHnZcrijbBOL6i3nhHNuW0PrGnapqIo6YnqgTVN + 6MoiiemHjiMIQqMduuihugpsd4O2CroGiEj6rNuB6aUzVFDHCMoAsrKyop6b6I5sq / RQXDZJgBvXPemcJ3ovTFNMaLrsrlRko0vCbtRmoWrt6Ze / YYp2TIFWaD4517srh1vNTlZ / + + Rd28kmiZrzqsD8BVO 9jOAAiWjAAAAAElFTkSuQmCC

有什么想法吗？

谢谢， MPE

Answer 1

您需要将绝对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);
        }));

Firefox：image.onload中的canvas.toDataURL但返回透明图像

1 个答案: