Javascript将图像上传到画布上

Question

我想上传图像文件并在画布上显示。 所以我写了如下代码

此处为 HTML 代码

<div class="img_upload">
    <input type="file" id="real-input" class="input-btn" accept="img/*" required multiple>
    <button class="browse-btn">Image Upload</botton>
</div>

<canvas id="jsCanvas" class="canvas" width="600" height="400"></canvas>

这里是javascript代码

const canvas = document.querySelector('#jsCanvas');
const ctx = canvas.getContext('2d');
const browseBtn = document.querySelector('.browse-btn');
const realInput = document.querySelector('#real-input');

function readInputFile(e) {
    var file = e.target.files;

    const img = new Image();

    var reader = new FileReader();
    reader.onload = function (e) {
        img.src = e.target.result;
    };
    reader.readAsDataURL(file[0]);

    ctx.drawImage(img, 0, 0);
}

// button act like input tag
browseBtn.addEventListener('click', () => {
    realInput.click();
});


realInput.addEventListener('change', readInputFile);

但是ctx.drawImage(img, 0, 0); 不起作用。

我检查了值console.log(img)的img，那么它的值是<img src="incoding very long base 64 data"> 在我写了body.appendChild(img); 之后我可以看到图像。

如何在画布上激活 drawImage？这里有什么问题？

Answer 1

你好，我改变你的代码试试这个：

const canvas = document.querySelector('#jsCanvas');
const ctx = canvas.getContext('2d');
const realInput = document.querySelector('#real-input');
realInput.addEventListener('change', handleImage, false);


function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

<div class="img_upload">
   <input type="file" id="real-input" class="input-btn" accept="img/*" required multiple>
 
</div>

<canvas id="jsCanvas" class="canvas" width="600" height="400"></canvas>