微信小程序提供canvas組件以及比較豐富的關(guān)于canvas的API，非常常見的應(yīng)用有生成一張帶有小程序碼或者二維碼的圖片用于小程序在朋友圈中傳播，特別是淘寶客小程序更需要。

簡(jiǎn)單的流程就是：創(chuàng)建畫布->在畫布中畫圖->從可見畫布生成圖片->保存圖片到客戶端設(shè)備的相冊(cè)中。其中畫布轉(zhuǎn)圖片，微信小程序提供一個(gè)名為wx.canvasToTempFilePath，該API的參數(shù)如下：

然而，在討論組中經(jīng)?？吹揭粋€(gè)問題，那就是canvas生成的圖片保存后很模糊，包括我自己第一次按照官方文檔寫demo的時(shí)候也遇到過?，F(xiàn)在在網(wǎng)上搜索這個(gè)的問題的內(nèi)容，出現(xiàn)最多的就是兩個(gè)方案，而且很多內(nèi)容都是復(fù)制已有文章內(nèi)容的。

方案一：方案1準(zhǔn)備兩個(gè)canvas，一個(gè)繪制壓縮圖(600*400)，一個(gè)繪制原圖大小(1200*800)，截圖的時(shí)候從原圖canvas截取。

但實(shí)際上上這個(gè)方案有一點(diǎn)問題：其一，生成需要兩個(gè)畫布；其二，繪制過大畫布在安卓上面會(huì)出現(xiàn)問題，官方文檔里也提示了避免設(shè)置過大的寬高，在安卓下會(huì)有crash的問題。

方案二：將canvas大小設(shè)為(1200*800)，使用css將canvas縮放到適應(yīng)屏幕大小。

這在開發(fā)工具的模擬器中是沒有問題的，然而在真機(jī)測(cè)試的時(shí)候是無效的，不管用的是transform還是zoom。

本質(zhì)上就是生成一個(gè)更大的圖片，因?yàn)槭謾C(jī)的屏幕設(shè)備的像素比現(xiàn)在一般都是超過2的。實(shí)際上我們只需要在使用wx.canvasToTempFilePath的時(shí)候，設(shè)置參數(shù)destWidth和destHeight(輸出的寬度和高度)為width和height的2倍以上即可。

當(dāng)然，這個(gè)具體數(shù)值也可以wx.getSystemInfo這個(gè)API來獲取設(shè)備的像素比了（pixelRatio），這個(gè)像素比作為以上數(shù)值。