1.需求
由于在最近在做的項(xiàng)目需要用到在前端把頁(yè)面生成圖片并保存到手機(jī)中，在技術(shù)調(diào)用過(guò)程中自己寫(xiě)了一個(gè)demo副硅，沒(méi)有采用vue-cli腳手架姥宝，但是大同小異翅萤，這個(gè)demo也采用了vue2.js開(kāi)發(fā)頁(yè)面恐疲，qrcode.js來(lái)生成二維碼，原理比較簡(jiǎn)單套么。該demo項(xiàng)目：github地址 培己，覺(jué)得有幫助的給一個(gè)星，萬(wàn)分感謝胚泌。該項(xiàng)目不能直接打開(kāi)index.html進(jìn)行訪問(wèn)省咨，會(huì)出現(xiàn)報(bào)錯(cuò)。請(qǐng)用 http-server 打開(kāi)玷室，不明白怎么配置可參考http-server開(kāi)啟本地服務(wù)
在線預(yù)覽
具體的需求如下：
- 獲取后臺(tái)信息零蓉，得出排名和用戶圖像
2.點(diǎn)擊保存按鈕，把改頁(yè)面生成圖片
3.長(zhǎng)按保存圖片或掃描二維碼
2.思路
- html2canvas.js：可將 htmldom 轉(zhuǎn)為 canvas 元素穷缤。
- canvasAPI：toDataUrl() 可將 canvas 轉(zhuǎn)為 base64 格式
- 在微信瀏覽器中敌蜂，長(zhǎng)按img，會(huì)彈起actionsheet津肛，可以進(jìn)行保存章喉、發(fā)送、識(shí)別二維碼等操作
3.代碼分析
解決圖片模糊
在pc端開(kāi)發(fā)時(shí)生成圖片沒(méi)有問(wèn)題身坐，但是在移動(dòng)端會(huì)出現(xiàn)模糊的情況秸脱，主要原因是像素比的問(wèn)題。
設(shè)備像素比 (簡(jiǎn)稱 dpr) 定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系部蛇，它的值可以按如下的公式的得到：
設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上摊唇，x方向或者y方向
解決代碼：
/**
* 根據(jù) window.devicePixelRatio 獲取像素比
* @returns {number}
*/
changeDpr: function() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 1;
},
解決圖片不顯示問(wèn)題
如果引用沒(méi)有跨域配置的圖片地址會(huì)出現(xiàn)一下報(bào)錯(cuò)
Uncaught (in promise) DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
盡管不通過(guò) CORS 就可以在畫(huà)布中使用圖片，但是這會(huì)污染畫(huà)布涯鲁。一旦畫(huà)布被污染遏片，你就無(wú)法讀取其數(shù)據(jù)。例如撮竿，你不能再使用畫(huà)布的 toBlob(), toDataURL() 或 getImageData() 方法吮便，調(diào)用它們會(huì)拋出安全錯(cuò)誤。
HTML 規(guī)范中圖片有一個(gè) [crossorigin](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img#attr-crossorigin) 屬性幢踏，結(jié)合合適的 CORS 響應(yīng)頭髓需，就可以實(shí)現(xiàn)在畫(huà)布中使用跨域 <img> 元素的圖像。
解決代碼如下：
// 將圖片轉(zhuǎn)為base64格式
imgTobase64: function(url, crossOrigin) {
return new Promise(resolve => {
const img = new Image();
img.onload = () => {
const c = document.createElement('canvas');
c.width = img.naturalWidth;
c.height = img.naturalHeight;
const cxt = c.getContext('2d');
cxt.drawImage(img, 0, 0);
// 得到圖片的base64編碼數(shù)據(jù)
resolve(c.toDataURL('image/png'));
};
// 結(jié)合合適的CORS響應(yīng)頭房蝉，實(shí)現(xiàn)在畫(huà)布中使用跨域<img>元素的圖像
crossOrigin && img.setAttribute('crossOrigin', crossOrigin);
img.src = url;
});
}
生成圖片
圖片生成是利用canvas來(lái)進(jìn)行獲取并生成圖片僚匆，有些需求需要導(dǎo)出長(zhǎng)圖微渠，可以改動(dòng)一下代碼
// 設(shè)置需要生成的圖片的大小，不限于可視區(qū)域（即可保存長(zhǎng)圖）
var w = dom.style.width;
var h = dom.style.height;
由于部分需求并不需要顯示個(gè)別的元素咧擂，可以利用 data-html2canvas-ignore來(lái)進(jìn)行忽略逞盆。如果在開(kāi)始渲染不顯示，可以把它的透明度進(jìn)行變化松申，在轉(zhuǎn)化之前設(shè)置為1即可云芦。
下載后的圖片會(huì)覆蓋整個(gè)頁(yè)面，即長(zhǎng)按就可以調(diào)用actionsheet進(jìn)行操作贸桶。
代碼如下：
/**
* 生成圖片
*/
createImage: function() {
var _this = this;
// 獲取想要轉(zhuǎn)換的dom節(jié)點(diǎn)
// var dom = document.getElementById('app');
var dom = _this.$refs.app;
var box = window.getComputedStyle(dom);
// 顯示導(dǎo)出需要樣式
_this.$refs.scanText.style.opacity = '1'
// dom節(jié)點(diǎn)計(jì)算后寬高,轉(zhuǎn)為整數(shù)
var width = parseInt(box.width, 10);
var height = parseInt(box.height, 10);
// 獲取像素比
var scaleBy = _this.changeDpr();
// 創(chuàng)建自定義的canvas元素
var canvas = document.createElement('canvas');
// 設(shè)置canvas元素屬性寬高為 DOM 節(jié)點(diǎn)寬高 * 像素比
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
// 設(shè)置canvas css 寬高為DOM節(jié)點(diǎn)寬高
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
// 獲取畫(huà)筆
var context = canvas.getContext('2d');
// 將所有繪制內(nèi)容放大像素比倍
context.scale(scaleBy, scaleBy);
// 設(shè)置需要生成的圖片的大小舅逸，不限于可視區(qū)域（即可保存長(zhǎng)圖）
var w = dom.style.width;
var h = dom.style.height;
html2canvas(dom, {
allowTaint: true,
width: w,
height: h,
useCORS: true
}).then(function(canvas) {
// 將canvas轉(zhuǎn)換成圖片渲染到頁(yè)面上
var url = canvas.toDataURL('image/png');// base64數(shù)據(jù)
var image = new Image();
image.src = url;
document.getElementById('shareImg').appendChild(image);
// 隱藏按鈕
_this.CanvasImageHide = false;
// 給渲染后圖片大小全屏
var shareImgElem = document.getElementById('shareImg');
shareImgElem.style.height = '100%'
});
}
