這兩天接到一個需求，需要做一個圖片裁剪功能。找到了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.crossOrigin = 'anonymous';
//加時間戳解決跨域問題
img.src = url+"?timeStamp="+new Date(); <= 解決問題的關鍵點
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>