需求如下：根據(jù)后臺(tái)返回的海報(bào)背景圖和一個(gè)鏈接二維碼(vue-qr)，合成一張圖，然后可以進(jìn)行長(zhǎng)按保存本地操作
思路如下
- 使用 canvs.drawImage 繪制圖片到相應(yīng)位置
- canvas.toDataUrl 導(dǎo)出圖片數(shù)據(jù)流到 img 上, 顯示到頁(yè)面
遇到的問(wèn)題
- 圖片地址是網(wǎng)絡(luò)地址且不同域名，js中新建Image對(duì)象并直接賦值src, 會(huì)產(chǎn)生跨域
- canvas繪制的圖片會(huì)變得模糊
跨域問(wèn)題的解決
- 將圖片網(wǎng)絡(luò)地址轉(zhuǎn)換為base64流，不推薦
- 將圖片下載放置本地，使用本地固定的圖片，部分需求下不能使用, 不理想
- 將圖片網(wǎng)絡(luò)地址的域名與運(yùn)行環(huán)境域名保持一致即可, 能解決部分，但也不太理想
- 需要后端配合設(shè)置Access-Control-Allow-Origin: *
另外，img 標(biāo)簽和 js 中的image 都建議增加 crossorigin = "anonymous" 屬性
**注意： **有部分網(wǎng)友評(píng)論img.setAttribute('crossOrigin', 'anonymous') 必須是寫(xiě) 在你賦值 img.src 之前，所以樓主寫(xiě)法有誤 可以看看這個(gè)鏈接 去看看, https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror/27260385#27260385
模糊問(wèn)題的解決
未優(yōu)化的就決方案
效果圖如下:
<!DOCTYPE html><html><style> .content{ display: flex; } .poster_img { width: 300px; }</style><body> <div class="content"> <div> <p>要繪制的圖像：</p> <img id="tulip" class="poster_img" src="./poster.jpg" alt="The Tulip" /> </div> <div> <p>畫(huà)布：</p> <canvas id="myCanvas" width="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> </div> <div> <p>DataURL后的圖片樣式：</p> <img class="poster_img" id="canvas_img" src="" alt="" srcset=""> </div> </div></body><script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var canvasImg = document.getElementById("canvas_img") const img = new Image() img.src = document.getElementById("tulip").src; img.onload = function () { const imgScale = img.width / img.height; c.style.width = c.width + 'px' c.style.height = c.width / imgScale + 'px' c.width = c.width; c.height = c.width / imgScale; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, c.width, c.height); canvasImg.src = c.toDataURL('image/jpeg', 1) }</script></html>
模糊原因分析：
??在瀏覽器的 window 對(duì)象中有一個(gè) devicePixelRatio 的屬性，該屬性表示了屏幕的設(shè)備像素比，即用幾個(gè)（通常是2個(gè)）像素點(diǎn)寬度來(lái)渲染1個(gè)像素。
??舉例來(lái)說(shuō)，假設(shè) devicePixelRatio 的值為 2 ，一張 100×100 像素大小的圖片，在 Retina 屏幕下，會(huì)用 2 個(gè)像素點(diǎn)的寬度去渲染圖片的 1 個(gè)像素點(diǎn)，因此該圖片在 Retina 屏幕上實(shí)際會(huì)占據(jù) 200×200 像素的空間，相當(dāng)于圖片被放大了一倍，因此圖片會(huì)變得模糊。
??類(lèi)似的，在 canvas context 中也存在一個(gè) backingStorePixelRatio 的屬性，該屬性的值決定了瀏覽器在渲染canvas之前會(huì)用幾個(gè)像素來(lái)來(lái)存儲(chǔ)畫(huà)布信息。 backingStorePixelRatio 屬性在各瀏覽器廠商的獲取方式不一樣，所以需要加上瀏覽器前綴來(lái)實(shí)現(xiàn)兼容。
解決方案：
1.首先一樣，獲取 Canvas 對(duì)象：
2.獲取像素比，將 Canvas 寬高進(jìn)行放大，放大比例為：devicePixelRatio / webkitBackingStorePixelRatio , 我們寫(xiě)了一個(gè)兼容的方法。
3.按實(shí)際渲染倍率來(lái)縮放canvas。
注意基礎(chǔ)知識(shí)點(diǎn)：
要設(shè)置canvas的畫(huà)布大小，使用的是 canvas.width 和 canvas.height；
要設(shè)置畫(huà)布的實(shí)際渲染大小，使用的 style 屬性或CSS設(shè)置的 width 和height，只是簡(jiǎn)單的對(duì)畫(huà)布進(jìn)行縮放。
4.繪制
優(yōu)化后的解決方案
效果圖如下
<!DOCTYPE html><html><style> .content{ display: flex; } .poster_img { width: 300px; }</style><body> <div class="content"> <div> <p>要繪制的圖像：</p> <img id="tulip" class="poster_img" src="./psoter.jpg" alt="The Tulip" /> </div> <div> <p>畫(huà)布：</p> <canvas id="myCanvas" width="300" style="border:1px solid #d3d3d3;background:#ffffff;"> Your browser does not support the HTML5 canvas tag. </canvas> </div> <div> <p>DataURL后的圖片樣式：</p> <img class="poster_img" id="canvas_img" src="" alt="" srcset=""> </div> </div></body><script> var getPixelRatio = function (context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1; return (window.devicePixelRatio || 1) / backingStore; }; var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var ratio = getPixelRatio(ctx); ctx.scale(ratio, ratio) var canvasImg = document.getElementById("canvas_img") const img = new Image() img.src = document.getElementById("tulip").src; img.onload = function () { const imgScale = img.width / img.height; c.style.width = c.width + 'px' c.style.height = c.width / imgScale + 'px' c.width = c.width * ratio; c.height = c.width / imgScale; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, c.width, c.height); canvasImg.src = c.toDataURL('image/jpeg', 1) }</script></html>
參考鏈接：
一個(gè)關(guān)于image訪問(wèn)圖片跨域的問(wèn)題,http://www.itdecent.cn/p/8fa0fb53c183
解決 canvas 在高清屏中繪制模糊的問(wèn)題, https://www.html.cn/archives/9297
