資訊專欄INFORMATION COLUMN
摘要：微信圖片的問(wèn)題但是我發(fā)現(xiàn)這個(gè)方法用于繪制微信頭像的時(shí)候有概率會(huì)出現(xiàn)問(wèn)題，當(dāng)然了這里面指的是將圖片的網(wǎng)絡(luò)地址直接賦值給圖片的。
圖片跨域問(wèn)題的一般解決方法
當(dāng)使用canvas繪制網(wǎng)絡(luò)圖片的時(shí)候，經(jīng)常會(huì)出現(xiàn)“Tainted canvases may not be exported”報(bào)錯(cuò)，上網(wǎng)搜一下解決方案，應(yīng)該給的都是給img添加crossOrigin屬性，嘗試了一下，確實(shí)可用。
看下面的一個(gè)例子：
html代碼：
javascript代碼：
var img = new Image();
img.setAttribute("crossOrigin", "anonymous");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height + 200;
ctx.drawImage(img, 0, 0);
document.getElementById("canvasImg").src = canvas.toDataURL("image/jpeg", 1);
}
img.src = "http://img.hb.aicdn.com/38d8f519b3f464a80d85ed9632fed904ed0181f41d632-ZHrigO_fw658";
這樣就可以正常畫出圖片了。
微信圖片的問(wèn)題但是我發(fā)現(xiàn)這個(gè)方法用于繪制微信頭像的時(shí)候有概率會(huì)出現(xiàn)問(wèn)題，當(dāng)然了這里面指的是將圖片的網(wǎng)絡(luò)地址直接賦值給圖片的src?！局哉f(shuō)有概率會(huì)出現(xiàn)問(wèn)題是因?yàn)槲彝ㄟ^(guò)上面的方法去完成需求的時(shí)候并沒(méi)有畫出頭像（微信頭像放在wx.qlogo.cn域名下，然而我今天準(zhǔn)備寫這篇文章的時(shí)候突然就可以了，見鬼
當(dāng)時(shí)的時(shí)候我們找了很多方法，發(fā)現(xiàn)，在頭像url后面加上時(shí)間戳的話就可以了【emmm神操作
即：
img.src = "http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0?timeStamp="+new Date();其他的解法
今天找了個(gè)新的方法去解決canvas圖片跨域的問(wèn)題：
將文件讀入到blob文件對(duì)象，然后使用URL.createObjectURL轉(zhuǎn)換成src可用的地址
//直接讀成blob文件對(duì)象
function getImageBlob (url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
imgResponse = this.response;
//這里面可以直接通過(guò)URL的api將其轉(zhuǎn)換，然后賦值給img.src
//也可以使用下面的preView方法將其轉(zhuǎn)換成base64之后再賦值
img.src = URL.createObjectURL(this.response);
}
};
xhr.send();
}
//這里面將blob轉(zhuǎn)換成base64
function preView (url) {
let reader = new FileReader();
getImageBlob(url, function (blob) {
reader.readAsDataURL(blob);
});
reader.onload = function (e) {
console.log(e.loaded)
}
}
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height + 200;
ctx.drawImage(img, 0, 0);
document.getElementById("canvasImg").src = canvas.toDataURL("image/jpeg", 1);
}
var imgResponse = "";
getImageBlob("http://wx.qlogo.cn/mmopen/vi_32/RnLIHfXibgFHlticiclzflpriaLsC3TS9b2Sbj05Wh3vGlhcFutt18dfkXGUt8x11e4q2KHlX4EHHaBb6XylLQW1kQ/0");
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/94400.html
摘要：跨域如何解決這里記錄下使用繪圖過(guò)程中所遇到的跨域問(wèn)題和解決方案。先來(lái)看下實(shí)現(xiàn)方法?？缬蛘Ｇ闆r下，如果需要將繪制好的圖像輸出，我們可以調(diào)用的或方法來(lái)獲取到圖像數(shù)據(jù)。然而，遇到圖片跨域的情況就有些尷尬了。 Canvas 跨域如何解決？這里記錄下使用 Canvas 繪圖過(guò)程中所遇到的跨域問(wèn)題和解決方案。 先來(lái)看下實(shí)現(xiàn)方法。 實(shí)現(xiàn)方法 目標(biāo)圖片一般是由 圖片 + 文本 構(gòu)成。無(wú)論是千奇百怪的...
摘要：最近項(xiàng)目中遇到一個(gè)需求，需要把一張圖片加上平鋪的水印類似這樣的效果首先想到的是用完成這種功能，因?yàn)槲抑耙矝](méi)有接觸過(guò)，所以做這個(gè)功能的時(shí)候，就是一步一步的摸索中學(xué)習(xí)，過(guò)程還是挺的，接下來(lái)跟我一步步來(lái)實(shí)現(xiàn)這個(gè)功能以及發(fā)現(xiàn)一些的坑吧。 最近項(xiàng)目中遇到一個(gè)需求，需要把一張圖片加上平鋪的水印 類似這樣的效果showImg(https://segmentfault.com/img/remote/...
摘要：本文介紹了引入跨域的圖片導(dǎo)致報(bào)錯(cuò)的問(wèn)題的解決，分享給大家，具體如下場(chǎng)景用戶打開網(wǎng)頁(yè)，則請(qǐng)求騰訊圖片服務(wù)器上的圖片代碼。問(wèn)題圖片首次載入，選擇新圖片后裁剪繪制都沒(méi)有問(wèn)題。其他服務(wù)器同理再次測(cè)試圖片顯示成功，圖片上傳成功。本文介紹了Canvas引入跨域的圖片導(dǎo)致toDataURL()報(bào)錯(cuò)的問(wèn)題的解決，分享給大家，具體如下： 【場(chǎng)景】 用戶打開網(wǎng)頁(yè)，則請(qǐng)求騰訊COS（圖片服務(wù)器）上的圖片js代碼...
閱讀 1353·2021-11-23 09:51
閱讀 2731·2021-09-03 10:47
閱讀 2315·2019-08-30 15:53
閱讀 2521·2019-08-30 15:44
閱讀 1441·2019-08-30 15:44
閱讀 1276·2019-08-30 10:57
閱讀 2011·2019-08-29 12:25
閱讀 1155·2019-08-26 11:57
