Question

演示和完整代码如下：https://jsfiddle.net/q93c7Lpf/

它有效

它使用document.body.appendChild(img);来显示图像。结果是这样的：

<canvas width="660" height="1100" style="width: 600px; height: 1000px;"></canvas>

我想将其更改为标签img。所以我想使用文件阅读器。

我在这里阅读html image blob to base64和Convert blob to base64

然后我尝试实现它

我添加此代码：

var dataURI;
var reader = new FileReader();
reader.onload = function(){
  // here you'll call what to do with the base64 string result
  dataURI = this.result;
  console.log(dataURI);
};
reader.readAsDataURL(blob);

我在loadImage(...)之后添加代码，然后我运行，我在控制台上看到存在这样的错误：

未捕获的ReferenceError：未定义blob

演示和完整代码如下：https://jsfiddle.net/q93c7Lpf/1/

我该如何解决这个问题？

Answer 1

您可以直接传递文件对象

document.getElementById('file-input').onchange = function (e) {
  var dataURI;
  var reader = new FileReader();
  reader.onload = function(){
    dataURI = this.result;
    var image = new Image();
    image.src=dataURI;
    document.body.appendChild(image);
  };
  reader.readAsDataURL(e.target.files[0]);
};

这是你在找什么？

我如何解决＆＃34;未捕获的ReferenceError：未定义blob＆＃34;？

1 个答案: