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

How to convert an image to a string using javascript?

本文关键字：转换 字符串 图像 何使用 javascript      更新时间：2024-01-24
<input type="file" id="picture">

我想将上传到 html 输入的图像转换为字符串。如何使用 JavaScript 来做到这一点？

提前谢谢。

有

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

您可以向其添加一个事件处理程序，以侦听更改事件(此代码必须位于上述 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>

如果你想要的是 dataURI 版本，请使用 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" />

相关文章：