Javascript 如何从JS中的blobURL获取图像？

从文件（图像）输入将图像加载到画布时出现问题。fileInput对象是图像选择器。这是我网站上的所有一个block JS文件：

<script>
function picEditor() {
    var fileInput = document.createElement("input");
    fileInput.setAttribute("type", "file");
    fileInput.setAttribute("accept", "image/png");
    fileInput.setAttribute("id", "fluff");
    document.body.appendChild(fileInput);

第三部分，创建画布和渲染上下文

    var canvas = document.createElement("canvas");
    canvas.style.position = "absolute";
    canvas.style.left = "740px";
    canvas.style.top = "15px";
    canvas.style.border = "1px #fa0 solid";
    canvas.width = 600;
    canvas.height = 600;
    document.body.appendChild(canvas);
    var ctx = canvas.getContext("2d");
}
window.onload = picEditor();
</script>

var canvas=document.createElement（“canvas”）；
canvas.style.position=“绝对”；
canvas.style.left=“740px”；
canvas.style.top=“15px”；
canvas.style.border=“1px#fa0 solid”；
画布宽度=600；
帆布高度=600；
document.body.appendChild（画布）；
var ctx=canvas.getContext（“2d”）；
}
window.onload=picEditor（）；

---

我的三个可见对象正在绘制，但当输入图像并单击“加载”按钮时，图像不会被绘制。

在画布上绘制图像之前，您必须等待图像准备就绪

loadButton.onclick = function() {
    img.onload = function() {
        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    };
    img.src = window.URL.createObjectURL(fileInput.files[0]);
};

---

window.onload=picEditor（）

执行

picEditor（）

并将返回值指定为

onload

处理程序，因此这可能是

window.onload=picEditor谢谢，我尝试了img.onload=function（）{ctx.drawImage（…）；}而不是ctx.drawImage（…）；我得到了errorReporting:unhandledrejection:TypeError:未能对“URL”执行“createObjectURL”：重载解析失败。
loadButton.onclick = function() {
    img.onload = function() {
        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
    };
    img.src = window.URL.createObjectURL(fileInput.files[0]);
};