Canvas.toBlob() 给出空白 blob 对象的 url？答案

【问题标题】：Canvas.toBlob() gives url of a blank blob object?Canvas.toBlob() 给出空白 blob 对象的 url？
【发布时间】：2017-11-16 17:31:15
【问题描述】：

我正在使用此代码创建带有 blob url 的 img 标签：

blob = canvas.toBlob(function (blob) {
    var newImg = window.parent.document.createElement('img'),
        url = window.URL.createObjectURL(blob);

    newImg.onload = function () {
        // no longer need to read the blob so it's revoked
        window.URL.revokeObjectURL(url);
    };

    newImg.src = url;
    console.log(url); // prints blob url of blank/white image
    window.parent.document.body.appendChild(newImg);
}, 'image/png', 1.0);

console.log(blob); // returns undefined

是的，我得到了 blob url，但是当我在 url 地址中打开 url 时，图像只显示空白/白色图像。

我做错了什么？

我什至尝试过使用 toDataURL()：

var canvasblobapp = (function (jq) {'use strict';
    return {
        pageReady: function () {
            var img = new Image(),
                canvas = document.getElementById('myCanvas'),
                ctx = canvas.getContext('2d'),
                blob = null,
                base64String = "",
                newImg = new Image(),
                imgTag = document.createElement("img");

            img.onload = function () {
                canvas.width = this.width;
                canvas.height = this.height;
                //ctx.drawImage(img, 0, 0);

                ctx.beginPath();
                ctx.moveTo(170, 80);
                ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
                ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
                ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
                ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
                ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
                ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
                ctx.closePath();
                ctx.lineWidth = 5;
                ctx.fillStyle = '#8ED6FF';
                ctx.fill();
                ctx.strokeStyle = '#0000ff';
                ctx.stroke();
            };

            img.src = 'img/jabolche.png';

            imgTag.src = canvas.toDataURL("image/png", 1.0);
            imgTag.id = "novaSlika";
            document.getElementById('result').appendChild(imgTag);
        }
    };
}($));

$(document).ready(canvasblobapp.pageReady);

然而，我得到空的图像与SCR填充有 “A” 字母： “数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAeAAAAIQCAYAAABZrr0RAAAD7klEQVR4nO3BMQEAAADCoPVPbQo / oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAlwF68QABHxjrnwAAAABJRU5ErkJggg ==” P>

好像“A”表示白色像素。不确定？

【问题讨论】：

你为什么使用window.URL而不是URL？在我看来像是浏览器的问题。
哦，我在 Chrome 中运行它，现在我看到错误：canvas.toBlob() 不是函数。 @KobyDouek

标签： javascript url html5-canvas png blob

【解决方案1】：

查看文档：

void canvas.toBlob(callback, mimeType, qualityArgument);

该函数不返回任何内容 (void)，因此 blob = canvas.toBlob(... 可能不是您想要的使用方式。

您是否尝试过改用canvas.toDataUrl()？

（在iframe 中是不允许的，这就是为什么在本示例中将其替换为返回值）：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

var newImg = document.createElement('img')

//Result from: canvas.toDataUrl('image/jpeg', 1.0);
newImg.src = "data:image/png;base64,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";

console.log(newImg.src);
document.getElementById('result').appendChild(newImg);

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<div id="result"></div>

【讨论】：

@ArgOn 好视图，但似乎 toDataUrl() 没有正确转换画布对象，我只得到空白图像。下面是我的数据的模样：“数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAAeAAAAIQCAYAAABZrr0RAAAD7klEQVR4nO3BMQEAAADCoPVPbQo / oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAlwF68QABHxjrnwAAAABJRU5ErkJggg ==”如同其填充是“A”，我想看起来白色像素 SPAN>？

【解决方案2】：

我发现了问题所在。一切都应该发生在 img.onload() 处理程序中：

var canvasblobapp = (function (win, jq) {'use strict';
    return {
        pageReady: function () {
            var img = new Image(),
                canvas = document.getElementById('image'),
                canvas1 = document.getElementById('illustration'),
                ctx = canvas.getContext('2d'),
                ctx1 = canvas1.getContext('2d'),
                blob = null,
                base64String = "",
                imgTag = document.createElement("img"),
                imgTag1 = document.createElement("img");

            // draw the image
            img.src = 'img/jabolche.png';

            img.onload = function () {

                canvas.width = this.width;
                canvas.height = this.height;

                ctx.drawImage(img, 0, 0);

                base64String = canvas.toDataURL("image/png", 0.92);
                imgTag.src = base64String;
                imgTag.id = "newImage";
                window.document.getElementById('result').appendChild(imgTag);

            };

            // draw the cloud illustration
            ctx1.beginPath();
            ctx1.moveTo(170, 80);
            ctx1.bezierCurveTo(130, 100, 130, 150, 230, 150);
            ctx1.bezierCurveTo(250, 180, 320, 180, 340, 150);
            ctx1.bezierCurveTo(420, 150, 420, 120, 390, 100);
            ctx1.bezierCurveTo(430, 40, 370, 30, 340, 50);
            ctx1.bezierCurveTo(320, 5, 250, 20, 250, 50);
            ctx1.bezierCurveTo(200, 5, 150, 20, 170, 80);
            ctx1.closePath();
            ctx1.lineWidth = 5;
            ctx1.fillStyle = '#8ED6FF';
            ctx1.fill();
            ctx1.strokeStyle = '#0000ff';
            ctx1.stroke();

            imgTag1.src = canvas1.toDataURL("image/png", 0.92);
            imgTag1.id = "newIllustration";
            document.getElementById('result').appendChild(imgTag1);
        }
    };
}(window, $));

$(document).ready(canvasblobapp.pageReady);

这是截图：

【讨论】：