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

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

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

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

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

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

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

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

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