Firefox：image.onload中的canvas.toDataURL，但返回透明图像 [英] Firefox : canvas.toDataURL in image.onload but returning transparent image

问题描述

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

也已经在canvas.getContext中尝试过{preserveDrawingBuffer：true}。

这在Firefox中不起作用，但在Chrome中起作用...

我的代码：

  var imageWidth = imageHeight = 45; 
 var image = new Image（）; 
 
 console.log（image）; 
 
 image.onload =（函数（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：图像错误）; 
} 
 
 image.src ='data：image / svg + xml; base64，'+ btoa（encodeURIComponent（xmlSource）.replace（/％（[0-9A-F] { 2}）/ g，函数（match，p1）{
 return String.fromCharCode（'0x'+ p1）; 
}））； 
  

使用xmlSource = < svg xmlns = http：// www .w3.org / 2000 / svg viewBox = 0 0 54.4 54.4< g><圆圈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 ;填充：＃000000；字体家族：Arial，Verdana； font-weight：粗体> 90< / text>< / g>< / svg>

结果dataURL为：

• Firefox：

数据： image / png; base64，iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAHElEQVRYhe3BgQAAAADDoPlTH + ECVQEAAAAAxwATRwABzzGAqwAAAABJRU5ErkJggg ==

$ b $ li 'p>数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAD20lEQVRYR9VX3ytkURz / 3BcS2c2LF + yiPChm1gMhBskLaUbiSXv3L9jdPIp2KXnCAx687JkkJVnlV36U8cAjRpESES8eaHfjRelun9O907hz57pjxma / pRlnzjn3cz / FZ / dzvkfBKwrlFWHB / w1GVVU3gI8A + FljwWwAwB4AvxCCn47DMTOqqvLBPwC8N ++ emZmJq6srq4cSzFchBAE + GU + CUVX1LYCfBgupqanIz89HdnY2MjIyIh5wc3ODi4sLnJyc4O7uzvidYHxCiF92iGzB6CkhG26CcLlcEojTIKBgMGiAIkuf7FIXFYwOhG / 0hmmoqalBUlKSUxyheff39wgEAkYaf5PhaIAsweip2aU + 8vLyUFlZGTMI84KtrS2cnp5ymAzVWqUsGhgy4qEuyEiiYnV11WAoIISoNe8bAUavmg1qpKmp6VmpiQaeKVtYWDA0RHYeVZkVmDMA7yoqKmISq1P2KOrt7W2ZLiHEh / B1j8Doot0lKy0tLU73j3ne7Oyswc6HcDGbwQwD + FxcXCzL2Byap mFvbw9 + VX / N5 + fwer1oa2tDSkoKDg8PMT4 + Lv2lubkZ7e3tSE9PtwTKct / F3 + dv34UQ34xJZjBSuI2NjZaGRjPr6 + uTAEpKSjA8PAy32y1FPjQ0hNLSUlRVVWFwcBBFRUVobW2FokTWCI1xcXGRGDaFEKEKMYPROKOjo8PyjTY2NjA5OYmenh7k5ORgZmYGBwcHUuj9 / f0SaGFhISYmJmQZd3Z2Ii0tzXIvzmEIIUIY4gIzPz + PtbU1eDwerKysoLu7Wx4TxnhXVxdomFbhCAwXNzQ0WG5wdnaG3t5eqYfy8nKMjY1JBurr67G + vh4Cw + / T09Oh / 602Mzzn2cxQwHRSIYTcPzc3F9fX11Iny8vLiWfGTjPmN2Q6dnZ2XkwzttV0eXkpq6aurg7V1dUYHR0FbaCsrAwDAwNyjH8jIyMoKCiIu5psfebh4QFLS0uYmpqSJLF0aQPJyck4Pj6WPnN0dJQwn2Eructy9Pl8MTur0wWOHJibqarKI971D86moBCCLx + KqKc22WEKntNQRWOIpzad9 / b2llOePrV1dqSQ7TzHaUrC54X1M4 + OAcuzyRjUOz0CcrHnZcrijbBOL6i3nhHNuW0PrGnapqIo6YnqgTVN + 6MoiiemHjiMIQqMduuihugpsd4O2CroGiEj6rNuB6aUzVFDHCMoAsrKyop6b6I5sq / RQXDZJgBvXPemcJ3ovTFNMaLrsrlRko0vCbtRmoWrt6Ze / YYp2TIFWaD4517srh1vNTlZ / + Rd28kmiZrzqsD8BVO + 9jOAAiWjAAAAAElFTkSuQmCC




有什么想法吗？





谢谢，
mpe

解决方案

您需要为r设置绝对 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> <圆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;填充：＃000000; font-family：Arial，Verdana； font-weight：粗体> 90< ; / text>< / g< / svg>';;函数回调（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：image error）;} image.src ='data ：image / svg + xml; base64，'+ btoa（encodeURIComponent（xmlSource）.replace（/％（[0-9A-F] {2}）/ g，function（match，p1）{return String.fromCharCode（' 0x'+ p1）;}））;  




I know that the image must be complete, its loading finished before using the toDataURL function on the canvas, put the code in the image.onload function ensures that.

Also have tried {preserveDrawingBuffer : true} in canvas.getContext.

This is not working in Firefox but works in Chrome...

My code :

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);
        }));

Using 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>"

The resulting dataURL is:

• Firefox :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAHElEQVRYhe3BgQAAAADDoPlTH+ECVQEAAAAAxwATRwABzzGAqwAAAABJRU5ErkJggg==

• Chrome :

data:image/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/602Mzzn2cxQwHRSIYTcPzc3F9fX11Iny8vLiWfGTjPmN2Q6dnZ2XkwzttV0eXkpq6aurg7V1dUYHR0FbaCsrAwDAwNyjH8jIyMoKCiIu5psfebh4QFLS0uYmpqSJLF0aQPJyck4Pj6WPnN0dJQwn2Eructy9Pl8MTur0wWOHJibqarKI971D86moBCCLx+KqKc22WEKntNQRWOIpzad9/b2llOePrV1dqSQ7TzHaUrC54X1M4+OAcuzyRjUOz0CcrHnZcrijbBOL6i3nhHNuW0PrGnapqIo6YnqgTVN+6MoiiemHjiMIQqMduuihugpsd4O2CroGiEj6rNuB6aUzVFDHCMoAsrKyop6b6I5sq/RQXDZJgBvXPemcJ3ovTFNMaLrsrlRko0vCbtRmoWrt6Ze/YYp2TIFWaD4517srh1vNTlZ/+Rd28kmiZrzqsD8BVO+9jOAAiWjAAAAAElFTkSuQmCC

Any idea ?

Thanks, mpe

解决方案

You need to set absolute width and height attributes to your root svg node (e.g in px).
The default is 100% but FF has no way to know relative to what (specs don't say yet). ` Chrome makes it relative to something that only they know.

So FF won't draw your svg image, on the canvas, but won't fire an error either, since the image has loaded correctly (in an html document, they could know what the dimensions should be relative to).

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，但返回透明图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！