如何将图像 blob 渲染到画布元素?
到目前为止,我有这两个(简化的)函数来捕获图像,将其转换为 blob 并最终 在此 codepen 中的画布上渲染 blob,它只返回默认的黑色图像。
var canvas = document.getElementById('canvas');
var input = document.getElementById('input');
var ctx = canvas.getContext('2d');
var photo;
function picToBlob() {
var file = input.files[0];
canvas.toBlob(function(blob) {
var newImg = document.createElement("img"),
url = URL.createObjectURL(blob);
newImg.onload = function() {
ctx.drawImage(this, 0, 0);
photo = blob;
URL.revokeObjectURL(url);
};
newImg.src = url;
}, file.type, 0.5);
canvas.renderImage(photo);
}
HTMLCanvasElement.prototype.renderImage = function(blob) {
var canvas = this;
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0)
}
img.src = URL.createObjectURL(blob);
}
input.addEventListener('change', picToBlob, false);
原文由 ohav ben yanai 发布,翻译遵循 CC BY-SA 4.0 许可协议
我认为您需要稍微整理一下代码。很难知道您要实现什么,因为有许多不必要的代码行。主要问题是
blob
在这里未定义因为
photo
永远不会在toBlob
函数中初始化…这对于你想要实现的目标来说是不必要的。这是您的代码片段的简化工作版本