如何使用javascript将图像转换为字符串？

Question

<input type="file" id="picture">我想将上传到html输入的图像转换为字符串。我怎么能用JavaScript做到这一点？提前致谢。

Answer 1

有

<input type="file" id="picture">

你可以为它添加一个事件处理程序来监听change事件（这段代码必须在上面的HTML之后或在DOMContentLoaded事件上注册）

var input = document.getElementById('picture');input.addEventListener('change', handleFiles, false);

然后你的handleFiles事件会将图像绘制到画布中并从文件中提取base64字符串：

function handleFiles(e) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  var img = new Image();

  img.onload = function() {
    ctx.drawImage(img, 0, 0);

    var base64 = canvas.toDataURL();
    console.log(base64);
  }

  img.src = URL.createObjectURL(e.target.files[0]);}

运行示例如下：

var input = document.getElementById('picture');

input.addEventListener('change', handleFiles, false);

function handleFiles(e) {

  var canvas = document.createElement('canvas');

  var ctx = canvas.getContext('2d');

  var img = new Image();

  img.onload = function() {

    ctx.drawImage(img, 0, 0);

    var base64 = canvas.toDataURL();

    document.getElementById('result').value = base64;

  }

  img.src = URL.createObjectURL(e.target.files[0]);

}

textarea {

  width: 350px;

  height: 100px;

}

<input type="file" id="picture" />

<br /> <br />

<textarea id="result"></textarea>

Answer 2

如果您想要的是dataURI版本，请使用a FileReader及其readAsDataURL()方法。

file_input.onchange = function(e) {

  var fr = new FileReader();

  fr.onload = function() {

    output.src = this.result;

  }

  fr.readAsDataURL(this.files[0]);

};

<input type="file" id="file_input" />

<img id="output" />

如果您只想显示它，那么您可以使用URL构造函数：

file_input.onchange = function(e) {

  output.src = URL.createObjectURL(this.files[0]);

};

// don't forget to revoke the URLObject when you don't need it anymore

output.onload = function() {

  URL.revokeObjectURL(this.src);

}

<input type="file" id="file_input" />

<img id="output" />