JavaScript canvas.toDataURL() 返回空白图像

Question

我有以下代码，可以将图像转换为黑白：

var canvas = document.createElement('canvas');
var imgObj="data:image/png;base64,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";
var canvasContext = canvas.getContext('2d');


var imgW = 300;

var imgH = 300;
canvas.width = imgW;
canvas.height = imgH;

//canvasContext.drawImage(imgObj, 0, 0);

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);


for(var y = 0; y < imgPixels.height; y++){
     for(var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

console.log(canvas.toDataURL());

输出：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAIq0lEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYy

当我打开结果时，我看到空白图像！

我怀疑这是因为我注释了这一行：

canvasContext.drawImage(imgObj, 0, 0);

但是当我取消注释这一行时，我会得到以下结果:

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

如何解决这个问题？

伪代码

输入：一个彩色图像的base64字符串 输出：一个黑白图像的base64字符串

- user4393156

---

https://dev59.com/sm855IYBdhLWcg3wVikt - Aameer

不清楚您是要获取有关drawImage调用（和错误）的帮助，还是您的迭代方法没有产生任何输出。您能否编辑您的问题，只询问您想使用的一种方法？ - RustyTheBoyRobot

Answer 1

就这样做：

var imgObj = new Image();
imgObj.src = "data:image/png;base64,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";

接下来，画出图像：

canvasContext.drawImage(imgObj, 0, 0);

最终你的代码会输出一张以Base64字符串格式表示的灰度图像。

drawImage函数需要一个图片对象作为第一个参数，但是你只提供了一个Base64字符串（虽然它也可以生成图像）。

- Leo