現在有很多微信公眾號運營活動，都有生成圖片的需求，生成圖片後可以發送給好友和發送到朋友圈擴散，利於產品的宣傳！
1.產生圖片可以用canvas,但是由於已經有了html2canvas這個開源庫，所以為了節省時間就沒有自己寫了
github地址:html2canvas
少囉嗦，先看東西！ ！ ！
LiveDemo
/** * 根據window.devicePixelRatio取得像素比*/ function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; } return 1; } /值轉 * 將傳入**為整數*/ function parseValue(value) { return parseInt(value, 10); }; /** * 繪製canvas */ async function drawCanvas (selector) { // 取得想要轉換的DOM 節點const dom = document.querySelector(selector); const box = window.getComputedStyle( dom); // DOM 節點計算後寬高const width = parseValue(box.width); const height = parseValue(box.height); // 取得像素比const scaleBy = DPR(); // 建立自訂canvas 元素var canvas = document.createElement('canvas'); // 設定canvas 元素屬性寬高為DOM 節點寬高* 像素比canvas.width = width * scaleBy; canvas.height = height * scaleBy; // 設定canvas css寬高為DOM 節點寬高canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; // 取得畫筆const context = canvas.getContext('2d'); // 將所有繪製內容放大像素比倍context.scale(scaleBy, scaleBy); let x = width; let y = height; return await html2canvas(dom, {canvas}).then(function () { convertCanvasToImage(canvas, x ,y) }) } /** * 圖片轉base64格式*/ function convertCanvasToImage(canvasToImage(canvasTo , x, y) { let image = new Image(); let _container = document.getElementsByClassName('container')[0]; let _body = document.getElementsByTagName('body')[0]; image.width = x; image.height = y; image.src = canvas.toDataURL(image/png ); _body.removeChild(_container); document.body.appendChild(image); return image; } drawCanvas('.container')2.由於現在的手機都是高清屏，所以如果你不做處理就會出現模糊的情況，為什麼會出現模糊的情況？這個就牽涉到裝置像素比devicePixelRatio js 提供了window.devicePixelRatio 可以取得裝置像素比
function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return window.devicePixelRatio; } return 1; }這個DPR函數就是取得裝置的像素比, 那取得像素比之後要做什麼呢？
var canvas = document.createElement('canvas'); // 設定canvas 元素屬性寬高為DOM 節點寬高* 像素比canvas.width = width * scaleBy; canvas.height = height * scaleBy; // 設定vascanvas css寬高為DOM 節點寬高canvas.style.width = `${width}px`; canvas.style.height = `${height}px`; // 取得畫筆const context = canvas.getContext('2d'); // 將所有繪製內容放大像素比倍context.scale(scaleBy, scaleBy);3.取得裝置像素比之後將canavs.width 和canvas.height 去乘以裝置像素比也就是scaleBy; 這時候在去設定canvas.style.width 和canvas.style.height 為dom的寬和高。想想為什麼要這麼寫？最後在繪製的餓時候將所繪製的內容放大像素比倍
舉例iphone6S是裝置寬高是375 X 667 ,6S的window.devicePixelRatio = 實體像素/ dips（2=750/375）所以設計師一般給你的設計稿是不是都是750*1334的？所以如果照一比一去畫在高清螢幕下就會模糊，看圖說話6S DPR=2
6plus DPR=3
4.最後調用canvas.toDataURL(image/png);賦值給image.src,由於微信裡面無法保存圖片，所以只能生成圖片文件，調用微信自帶的長按保存到圖片到相冊功能,如圖:
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。