HTML Canvas 不会绘制图像答案

【问题标题】：HTML Canvas Will Not Draw ImageHTML Canvas 不会绘制图像
【发布时间】：2016-12-03 01:13:33
【问题描述】：

好的，我知道在 SO 上有很多看起来与这个相同的主题，但它们都没有解决我的问题...

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

采用以下 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');
}

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

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

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

为什么画布拒绝渲染这张图片？我该如何解决这个问题？

【问题讨论】：

数据 URI 已经是 Base64，所以你的 URL.createObjectURL 应该是你所需要的（假设它有效）。
如果不需要，您需要显示该代码。您的问题需要包含重现问题所需的所有代码。
糟糕，我在其中留下了一些 document.getElementById 的简写。现在应该出来了。我只是将所有内容（帖子中的代码）放入 HTML 编辑器并得到完全相同的结果...
致试图编辑我帖子的人... 该网站实际上是一个 HTTPS 网站。在帖子中将其更改为 HTTP 会使帖子不准确。我知道 HTTPS 在浏览器中具有与 HTTP 不同的安全特权...
对于试图再次编辑我的帖子的人，我拒绝编辑的原因有两个：首先，您试图将控制台输出从 data:, 更改为 data. 这不是什么控制台输出。其次，从“拒绝”到“拒绝”的变化实际上损害了句子的流畅性。这就像说“鲍勃吃披萨”而不是“鲍勃吃披萨”。当您删除所有逗号时，句子流也感觉很奇怪。不生气，只是解释我拒绝编辑的原因。

标签： javascript html image canvas

【解决方案1】：

如果打算将图像转换为 Data-URI（“base64”），则可以使用 FileReader - 不需要画布（也可以改变图像/最终压缩）：

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>

【讨论】：

像魅力一样工作，并删除了画布依赖项。效果很好！