Question

我在从文件（图像）输入将图像加载到画布时遇到问题。 fileInput对象是图像选择器。这是我网站上的一个块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);

第二部分，创建图像。首先创建图像和加载按钮。按钮的单击功能应该将图像源设置为文件输入的blob URL，然后在画布上绘制图像。

    var img = document.createElement("img");
    var loadButton = document.createElement("button");
    loadButton.onclick = function() {
        img.src = window.URL.createObjectURL(fileInput.files[0]);
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    };
    loadButton.innerHTML = "Click here";
    document.body.appendChild(loadButton);

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

    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>

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

Answer 1

您必须等到图像准备好后才能在画布上绘制

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

如何从JS中的blob url获取图像？

1 个答案: