需求： 將HTML5的內容儲存為圖片
想法： 透過Canvas繪圖產生base64圖片，長按即可儲存至本機
問題： canvas禁止跨域、安卓微信長按無法儲存base64圖片、伺服器拉取的圖片被壓縮
二、具體問題問題1：canvas是禁止跨域的，如果影像來自其他域，呼叫toDataURL()會拋出錯誤
解決：<img>標籤透過引入crossorigin 屬性能解決跨域， 即crossOrigin=Anonymous 或crossOrigin=* 請注意手q環境下設定'Anonymous '不支持，需要設定為'*'，如果使用crossorigin=anonymous，則相當於匿名CORS
問題2：設定了crossOrigin的<img>標籤不能拉下跨域的圖片，無法觸發img.onload
解決: 後台轉送或nigix代理,設定Access-Control-Allow-Origin：wx.qlogo.cn，允許靜態資源伺服器圖片跨域這種設定解決取得圖片跨域的問題。 (此處圖片為使用者頭像網域名稱wx.qlogo.cn，存在跨域問題)
問題3：安卓手機微信h5長按不能儲存base64圖片
解決：將canvas繪製的base64圖片上傳到伺服器上，再從伺服器取得到png(jpg)圖片。這種做法較麻煩，後面還需要找方法改進。
問題4：上傳到伺服器的圖片壓縮嚴重
解決：上傳的圖片會在伺服器有幾個資源，壓縮度不一，從目錄'http://img10.360buyimg.com/promotepic/' 可拿到像素較清晰的圖片。
問題5：繪製的二維碼連結(//wqs.jd.com/xxx)長按不能直接進入頁面
解決：指定要繪製的二維碼連結一定要加上http: 否則二維碼將識別為文字
//canvas繪製部分程式碼：var picurl = http://wx.qlogo.cn/mmopen/OicsrgN57fqDxImI3icnMeSXRfVUQRueHcxRRuWG0O1Ea1bNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EbNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2EbNyBPKKKLeq5FiaXFWOdsltVe1R1PtJ2Epts/Fapgm = 0,40007m1R1D MF三; document.createElement(canvas), ctx = canvas.getContext(2d), //後台nigix代理程式參考問題2 src = picurl.replace(http://wx.qlogo.cn,//wq.jd.com); / /解決canvas 跨域toDataURL不能讀取問題請參考問題1 img.crossOrigin = Anonymous; //圖片資源的預先載入img.onload = function() { canvas.width = img.width; canvas.height = img.height; ctx.drawImage( img, 0, 0 ); //將畫好的base64圖片localStorage.setItem( savedImageData, canvas.toDataURL(image/png) ); } img.src = src;上傳圖片部分代碼：
// 上傳圖片請參考問題3$.ajax({ type: 'POST', url: loadJs.addToken('http://wq.jd.com/activetmp/promotepic/promoteaddpic', j132), data: { filename: new Date().getTime()+''+Math.floor(Math.random()*10000) + '.jpg', content: base64pic, active: shotpic20160901 }, dataType: 'json', xhrFields: { withCredentials: true }, success: function(data) { if (picdata.id == 1 && picdata.msg) { //之前綴路徑的圖片路徑前綴路徑的圖片路徑前綴路徑的圖片路徑。圖片最清晰請參考問題4 var imgPre = 'http://img10.360buyimg.com/promotepic/'; //圖片位址拼接的完整位址連結var photo = imgPre + picdata.msg; $(#cardImg)[0].onload = function() { // to do 業務邏輯}; $(#cardImg).attr(src,photo); } }, error:function(data){ }});以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。