JavaScript toDataURL图片转换问题解读
更新时间：2023年06月17日 09:38:24 作者：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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了JS实现图片放大效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
玩转JavaScript函数：apply/call/bind技巧
欢迎来到这篇关于JavaScript中apply、call、bind函数的指南,这里充满了实用技巧和深入理解,让你的编程之旅更加游刃有余,赶快翻开这个神秘的“魔法书”,让我们一起探索吧！2024-01-01
本文主要介绍如何手动实现客户端应用的自动全量更新,通过改造electron-updater实现版本,系统等字段的动态判断更新,实现后台配置不同设备,版本,系统的版本更新,可自行在后台配置定向更新,批量更新等,需要的朋友可以参考下2025-08-08
本文主要对JavaScript中定义对象原型的两种使用方法进行介绍，具有很好的参考价值，下面就跟小编一起来看下吧2016-12-12
现代数据库管理工具中,SQL 智能补全功能已成为提升开发效率的重要特性,它能够根据上下文环境自动提示关键词、表名、字段名等信息,大大减少了手动输入错误和查询文档的时间,本文将介绍如何使用HTML、CSS和JavaScript实现SQL智能补全功能,需要的朋友可以参考下2026-03-03
这篇文章主要介绍了JavaScript中变量提升和函数提升的详解，文章通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
这篇文章主要介绍了javascript触发模拟鼠标点击事件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-06-06
MutationObserver监视对DOM 树所做更改的功能妙用
这篇文章主要为大家介绍了MutationObserver监视对DOM 树所做更改的功能妙用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
Map对象在JavaScript中提供了一种灵活且高效的键值对存储方式,它具有许多实用的方法,如set()、get()、has()和delete()等,使得操作和管理键值对变得更加简单,这篇文章主要介绍了JS中map属性,需要的朋友可以参考下2024-08-08
仿Google和Windows Live的拖拽...2006-11-11
最新评论