JavaScript toDataURL图片转换问题解读
作者：Tornado_Liao
这篇文章主要介绍了JavaScript toDataURL图片转换问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
JavaScript toDataURL图片转换
问题
js业务中涉及到图片转换格式，.在安卓手机的微信浏览器上出现
stack: "Error: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported
最初解决方法（在安卓的微信浏览器上有问题）
let image = new Image();
image.src = img;
image.setAttribute('crossOrigin', 'anonymous');最开始使用的这个方法。是将跨域属性设置为anonymous，然后服务器的nginx端也添加跨域header=*
但测试时会卡住
最终解决方法
let image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = img;调试了很久发现将属性设置放在图片的赋值前面就解决问题了
js将图片转为base64（解决Canvas.toDataURL 图片跨域问题）
场景一
将项目中的图片资源转为base64
function convertImgToBase64(url, callback) {
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
img = new Image();
img.crossOrigin = 'anonymous';//解决Canvas.toDataURL 图片跨域问题
img.onload = () => {
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase(); // 获取到图片的格式
let dataURL = canvas.toDataURL("image/" + ext); // 得到base64 编码的 dataURL
callback && callback(dataURL);
canvas = null;
};
img.src = url;
}
var baseUrl = ''
convertImgToBase64(this.options.logo, (baseUrl) => {
baseUrl = baseUrl
})场景二
将用户本地上传的资源转化，即用户通过浏览器点击文件上传时，将图片资源转化成base64：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
</style>
</head>
<body>
<p><input type="file" id="upfile"></p>
<p><button id="upJS">用原生JS上传</button>
</div>
<script>
function imgFileTobase64() {
var reader = new FileReader();
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
var file = document.getElementById('upfile').files[0]
if (file) {
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert('上传失败，请上传不大于2M的图片！');
return;
} else {
//执行上传操作
alert(reader.result);
}
}
}
}
document.getElementById("upJS").onclick = function () {
imgFileTobase64()
}
</script>
</body>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。