这两天接到一个需求,需要做一个图片裁剪功能。找到了cropper.js,使用起来算是顺手,在做到将截好的图片以base64的形式上传保存的时候,突然遇到了一个之前没有碰到过的问题,没错就是:图片跨域问题。
网上搜锁了一下跨域图片使用toDataURL转换为base64的方法,没错,想必大家也肯定都知道了。
给Img标签设置crossOrign属性,将值设置为""或"Anonymous",事实上如果crossOrigin属性不设置为“use-credentials”,设置为其他的值时,都默认等同于“Anonymous”。
如此设置好后,满心欢喜的去测试,此时的代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="picUrl">
<button onclick="test()">测试</button>
</body>
<script>
function test(){
var url = document.getElementsByName("picUrl")[0].value;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
var img = new Image();
//设置图片跨域访问
img.crossOrigin = 'anonymous';
img.src = url;
document.body.appendChild(img);
img.onload = function () {
ctx.drawImage(this,0,0,100,100);
var base64 = canvas.toDataURL('image/jpg', 1);
console.log(base64)
};
}
</script>
</html>
但是结果却是:
报错:图片跨域无权限访问
百思不得其解,明明都设置好了啊,只好继续在百度中探索,但是凭借自己的关键字,搜来搜去都是一样的内容,而且感觉还都是互相复制粘贴的,几乎都快失望了。终于功夫不负有心人,说是因为浏览器使用本地缓存的问题,需要禁止浏览器使用缓存。
如法炮制,在控制台的network里将disablecache勾上以后,满心欢喜的再度尝试!yeah,OK了。But!!!!反转又来了,当你将控制台关掉后,disablecache是无效的,所以说你每次使用这个功能的时候都得开着控制台,那可真是要了命了,不得被人喷死啊!心情又down了下来,又开始了漫长的搜寻之路。终于终于,让我看到了一篇帖子,提到了使用时间戳来解决问题,犹如醍醐灌顶啊,最终解决了这个问题。
发这个帖,最主要的原因是自己觉得解决这个问题花费了太多时间,其实就是一个小细节,希望能帮助更多的人节省时间。另一点就是想说,百度搜索出来有效的帖子太少了,都是互相粘贴。
最终版的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" name="picUrl">
<button onclick="test()">测试</button>
</body>
<script>
function test(){
var url = document.getElementsByName("picUrl")[0].value;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = 100;
canvas.height = 100;
var img = new Image();
img.onload = function () {
ctx.drawImage(this,0,0,100,100);
var base64 = canvas.toDataURL('image/jpg', 1);
console.log(base64)
};
//设置图片跨域访问
img.crossOrigin = 'anonymous';
//加时间戳解决跨域问题
img.src = url+"?timeStamp="+new Date(); <= 解决问题的关键点
document.body.appendChild(img);
}
</script>
</html>
以上纯属个人见解,如果有什么不对的地方,请大家指出,诚虚心受教!