<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<img alt="" id="box">
<script type="text/javascript">
var imglizi = document.getElementById("box")
var img = new Image();
img.onload =()=> {
console.log("已经进去onload")
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
img.setAttribute("crossOrigin", 'Anonymous')
ctx.drawImage(img, 0, 0, img.width, img.height);
var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
var base64 = canvas.toDataURL("image/" + ext);
console.log(base64);
if(base64.length>10000){
//此处有一个bug,会执行两次onload事件,第一次执行加载的图片是不对的,所以需要使用第二次的图片
imglizi.src = base64
}
}
img.onerror=(error)=>{
console.log("error",error)
}
img.src = "./bomb.png?v="+Math.random(); //修改的地方 imgurl 就是你的图片路径,加上随机数是解决可能存在缓存问题
</script>
</body>
</html>
遇到的问题1: Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported
解决办法:增加属性 img.setAttribute(“crossOrigin”,’Anonymous’)
跨域问题2:Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
解决办法:VSCode安装Live Server插件,这个插件功能十分强大,不止可以解决ajax不支持file协议的问题,还可以实现在编辑器里保存修改后,页面自动刷新的功能。具体使用方法在插件安装的地方有说明,用起来也十分简单。
安装完成之后,打开html文件后,点击右下角的GoLive 即可。
问题三:在vue里面总是进去onerror。
解决办法:大概率是图片的路径没有找到的原因。如果项目使用了webpack,图片的资源路径就会变化。可以试试
let imgpath = "static/xxx.png"
或者自己放的目录下面 “/images/xxx.png”。
再或者就是是不是浏览器的缓存问题加上一个时间戳。
个人博客地址:http://lijian.store/ 欢迎大家交流学习