HTML画布不会绘制图像

Question

Okay, I know that there are loads of subjects that look identical to this one on SO, but none of them have fixed my issue...

I'm trying to grab an image from a file input and throw it onto a canvas so that I can later turn it into a base-64 image... But I've hit a snag in the process that I was not expecting, in drawing the image to the canvas...

Taking the following HTML:

<input type="file" id="fileIn" onchange="preview()"><br>
<img id="filePreview"><br>
<canvas id="fileCanvas"></canvas>

And the following script:

var dataurl = '';
function preview(){
    document.getElementById('filePreview').src = URL.createObjectURL(document.getElementById('fileIn').files[0]);
    document.getElementById('filePreview').onload = showInCanvas;
    cnv = document.getElementById('fileCanvas');
    ctx = cnv.getContext('2d');
}
function showInCanvas(){
    cnv.style.width = document.getElementById('filePreview').naturalWidth + 'px';
    cnv.width = document.getElementById('filePreview').naturalWidth;
    cnv.style.height = document.getElementById('filePreview').naturalHeight + 'px';
    cnv.height = document.getElementById('filePreview').naturalHeight + 'px';
    ctx.clearRect(0, 0, cnv.width, cnv.height);
    ctx.drawImage(document.getElementById('filePreview'), 0, 0);
    dataurl = cnv.toDataURL('image/png');
}

The problem I'm having is that the image simply refuses to draw onto the canvas. Even going into the console and drawing the image to the canvas manually, after the script has run, it still refuses to draw. Because of this, the image data simply runs through as data:,

It's an https site, if that affects anything.

For clarification, here's my question:

Why is the canvas refusing to render this image? How can I fix this issue?

Answer 1

If the intent is to convert the image to Data-URI ("base64"), the FileReader can be used - no need for canvas (which can also alter the image/final compression):

 fileIn.onchange = function(e) { var fr = new FileReader(); fr.onload = done.bind(fr); fr.readAsDataURL(e.target.files[0]); } function done() { var dataURI = filePreview.src = this.result; alert(dataURI.substr(0, 35) + "...") } 

 <input type="file" id="fileIn"><br> <img id="filePreview"><br> <canvas id="fileCanvas"></canvas>