微信小程序提供canvas組件以及比較豐富的關(guān)于canvas的API，非常常見(jiàn)的應(yīng)用有生成一張帶有小程序碼或者二維碼的圖片用于小程序在朋友圈中傳播泪掀，特別是淘寶客小程序更需要。
簡(jiǎn)單的流程就是：創(chuàng)建畫(huà)布->在畫(huà)布中畫(huà)圖->從可見(jiàn)畫(huà)布生成圖片->保存圖片到客戶端設(shè)備的相冊(cè)中。其中畫(huà)布轉(zhuǎn)圖片乱豆，微信小程序提供一個(gè)名為wx.canvasToTempFilePath辜窑，該API的參數(shù)如下：
然而钩述，在討論組中經(jīng)常看到一個(gè)問(wèn)題穆碎，那就是canvas生成的圖片保存后很模糊牙勘，包括我自己第一次按照官方文檔寫(xiě)demo的時(shí)候也遇到過(guò)。現(xiàn)在在網(wǎng)上搜索這個(gè)的問(wèn)題的內(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)問(wèn)題：其一蔚叨，生成需要兩個(gè)畫(huà)布；其二辙培，繪制過(guò)大畫(huà)布在安卓上面會(huì)出現(xiàn)問(wèn)題蔑水，官方文檔里也提示了避免設(shè)置過(guò)大的寬高，在安卓下會(huì)有crash的問(wèn)題扬蕊。
目前測(cè)試總結(jié): 方案二最佳!!!
方案二：將canvas大小設(shè)為(1200*800)搀别，使用css將canvas縮放到適應(yīng)屏幕大小。(此步驟可省略,直接設(shè)置destWidth和destHeight乘以像素比即可)
這在開(kāi)發(fā)工具的模擬器中是沒(méi)有問(wèn)題的尾抑，然而在真機(jī)測(cè)試的時(shí)候是無(wú)效的歇父，不管用的是transform還是zoom。
本質(zhì)上就是生成一個(gè)更大的圖片再愈，因?yàn)槭謾C(jī)的屏幕設(shè)備的像素比現(xiàn)在一般都是超過(guò)2的榜苫。實(shí)際上我們只需要在使用wx.canvasToTempFilePath的時(shí)候，設(shè)置參數(shù)destWidth和destHeight(輸出的寬度和高度)為width和height的2倍以上即可翎冲。
當(dāng)然垂睬，這個(gè)具體數(shù)值也可以wx.getSystemInfo這個(gè)API來(lái)獲取設(shè)備的像素比了（pixelRatio），這個(gè)像素比作為以上數(shù)值。
