javascript - HTML Canvas 不会绘制图像

Question

好吧，我知道有很多主题看起来与这个主题相同，但没有一个能解决我的问题...

我正在尝试从文件输入中抓取图像并将其扔到 Canvas 上，以便稍后将其转换为 Base-64 图像...但我在这个过程中遇到了障碍没想到，在将图像绘制到 Canvas 上时......

采用以下 HTML:

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

以及以下脚本:

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');
}

我遇到的问题是图像根本拒绝绘制到 Canvas 上。即使进入控制台并手动将图像绘制到 Canvas 上，脚本运行后，它仍然拒绝绘制。因此，图像数据只是作为 data:,

运行

这是一个 https 网站，如果这会影响任何内容的话。

为了澄清，这是我的问题:

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

Answer 1

如果目的是将图像转换为 Data-URI(“base64”)，则可以使用 FileReader - 不需要 Canvas (这也可以改变图像/最终压缩):

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>