? 一、圖片清晰度
項(xiàng)目用的是淘寶小程序舌界，百度了一大圈，能參考的也就是微信小程序泰演，都是說(shuō)改變輸出圖片寬高也就是destWidth呻拌，destHeight，如下圖：
但經(jīng)過(guò)實(shí)測(cè) 真的沒(méi)用 該模糊的還是模糊睦焕，然后怒而看原生canvas發(fā)現(xiàn)和小程序的文檔大差不差藐握，遂作罷靴拱，但我們已知等式：原始尺寸 = 樣式尺寸 * 像素比倍率
我們知道解決清晰度的關(guān)鍵就是先放大后縮小，由此可得如下操作
先在canvas標(biāo)簽作如下操作
<canvas id="canvas" width="{{canvasWidth * systemInfo.pixelRatio}}" height="{{canvasHeight * systemInfo.pixelRatio}}" style="width: {{canvasWidth}}px;height: {{canvasHeight}}px;"></canvas>
width和height屬性是canvas標(biāo)簽的寬高猾普，style內(nèi)的canvasWidth和canvasHeight才是最后實(shí)際展示渲染的寬高袜炕，systemInfo.pixelRatio則是通過(guò)my.getSystemInfo API獲取到的像素比
做完上述操作后，得到如下圖渲染所示：紅框?yàn)閷?shí)際展示的canvas區(qū)域大小初家，圖片只渲染了一部分
所以為了要完整渲染這個(gè)canvas區(qū)域偎窘，我們需要對(duì)他進(jìn)行放大，
let { pixelRatio } = this.data.systemInfo // 獲取設(shè)備像素比
const ctx = my.createCanvasContext('canvas') // 獲取canvas
ctx.scale(pixelRatio, pixelRatio) // 放大canvas
放大之后溜在，會(huì)如下圖所示
可以看到canvas已經(jīng)被填滿了陌知，實(shí)際圖片相較于沒(méi)做操作之前也已經(jīng)很清晰非常多，與原圖保持一致
最后導(dǎo)出圖片的時(shí)候也記得放大圖片寬高
ctx.toTempFilePath({
? ? ? ? ? x: x,
? ? ? ? ? y: y,
? ? ? ? ? width: w * pixelRatio,
? ? ? ? ? height: h * pixelRatio,
? ? ? ? ? // destWidth: w * pixelRatio, // 輸出圖片寬度
? ? ? ? ? // destHeight: h * pixelRatio, // 輸出圖片高度
? ? ? ? ? fileType: 'jpg',
? ? ? ? ? quality: 1, // 圖片的質(zhì)量掖肋，目前僅對(duì) jpg 有效仆葡，取值范圍為 (0, 1]
? ? ? ? ? success(res) {
? ? ? ? ? ? that.setData({
? ? ? ? ? ? ? apFilePath: res.apFilePath
? ? ? ? ? ? })
? ? ? ? ? },
? ? ? ? ? fail(error) {
? ? ? ? ? ? console.log(error);
? ? ? ? ? }
? ? ? ? });
自此 canvas圖片模糊就結(jié)束了
