使用readAsDataURL预览图片后调用toDataURL报错，请求排查问题

嘿，我来帮你定位这个问题的根源！先看你的代码里这一行：

canvas = document.getElementById("preview");

你这里犯了一个很容易混淆的错误：你获取的preview是img元素，不是canvas元素！页面里的<img id="preview">是图片标签，而toDataURL()是canvas元素独有的方法，img标签根本没有这个方法，所以调用的时候自然会报错。

两种解决思路，看你需求选： #

思路1：直接用readAsDataURL的结果（最简单，不需要canvas）

其实你已经通过reader.result拿到了图片的Base64格式数据！因为readAsDataURL()方法本身就会把文件转换成data:image/xxx;base64,xxxxxx格式的DataURL，完全没必要再绕一遍canvas。直接用这个结果就行：

function previewFile() {
  console.log('Start Function')
  var preview = document.querySelector('img');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
    // 直接拿到Base64数据，打印看看
    console.log("图片的Base64数据：", reader.result);
    // 如果只需要逗号后面的纯Base64字符串，用下面这行
    // console.log(reader.result.split(',')[1]);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

思路2：如果确实需要用canvas处理（比如压缩、裁剪图片）

要是你必须用canvas来处理图片（比如调整尺寸、压缩质量），那得先确保页面里有canvas元素，并且正确获取它，还要等图片加载完成后再绘制：

首先在页面里加一个canvas（注意id不要和img重复）：

<input type="file" onchange="previewFile()"><br> 
<img id="preview" src="https://dummyimage.com/600x400/000/fff" height="200" alt="Image preview...">
<!-- 新增隐藏的canvas元素 -->
<canvas id="imageCanvas" style="display: none;"></canvas>

然后修改JS代码：

function previewFile() {
  console.log('Start Function')
  var previewImg = document.getElementById('preview');
  var file = document.querySelector('input[type=file]').files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    previewImg.src = reader.result;
    
    // 必须等图片完全加载完成，才能绘制到canvas
    previewImg.onload = function() {
      var canvas = document.getElementById('imageCanvas');
      var ctx = canvas.getContext('2d');
      
      // 设置canvas和图片原生尺寸一致
      canvas.width = previewImg.naturalWidth;
      canvas.height = previewImg.naturalHeight;
      
      // 把图片绘制到canvas上
      ctx.drawImage(previewImg, 0, 0);
      
      // 现在可以调用toDataURL获取Base64了
      var imageData = canvas.toDataURL("image/jpeg");
      console.log("canvas转换的Base64数据：", imageData);
    }
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

额外注意点： #

• 用canvas的方式时，一定要等img的onload事件触发后再绘制，不然图片还没加载完，canvas会绘制空内容，得到的Base64是空白图片。
• toDataURL("image/jpeg")默认压缩质量是0.92，如果需要调整，可以传第二个参数，比如canvas.toDataURL("image/jpeg", 0.5)就是50%质量的JPG。

内容的提问来源于stack exchange，提问作者fightstarr20