图片转base64

js-实现文档水印效果 中,用了 canvas.toDataURL将水印导出为为base64格式的字符串,用于作为容器背景。

接下来再介绍几种方式:

原文: https://blog.csdn.net/ambit_tsai/article/details/80888899

canvas

  • 此方法只适用于静态图片
  • 如果图片地址跨域,canvas.toDataURL() 会失败
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let img = new Image();
// 或者
// let img = document.createElement('img');
img.onload = function(){
let canvas = document.createElement('canvas'),
width = img.width,
height = img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(img, 0, 0, width, height);
console.log(canvas.toDataURL());
// => "data:image/png;base64,iVBORw0KGgoAAA..."
};
img.src = '/path/to/target.png';

FileReader

  • 通过fetch或是ajax发起请求,受跨域问题限制;
  • 该方法可以转换任意文件,不仅仅是图片。
1
2
3
4
5
6
7
8
9
10
fetch('/path/to/target.gif')
.then(respone => respone.blob()) // 将响应体转换成blob格式数据
.then(blob => {
let reader = new FileReader();
reader.onloadend = function(){
console.log(reader.result); // 输出DataURL数据
};
reader.readAsDataURL(blob); // 将blob数据转换成DataURL数据
})
.catch(console.error);

input 标签

1
2
3
4
5
6
7
8
9
10
<input type="file" onchange="toDataURL(this)" />
<script type="text/javascript">
function toDataURL(el){
let reader = new FileReader();
reader.onloadend = function(){
console.log(reader.result);
};
reader.readAsDataURL(el.files[0]); // el.files[0]为选中的文件
}
</script>
0%