前言

最近在做小程序场景下关于对图像进行二次处理的需求，在进行图像操作流程中遇到了一些坑点，希望读者可以通过这篇文章解决相似的问题或者学会如何在小程序内使用 Canvas 来处理图片，主要遇到的坑点问题如下：

小程序 Canvas 容器宽高与画布宽高问题小程序 Canvas 导出图像模糊，质量不高小程序 Canvas 画布宽高 4096 大小限制小程序 Canvas 绘制base 64图片小程序 Canvas 隐藏绘制/离屏绘制问题

技术栈为 Taro + React，当然如果使用 Taro + Vue 或者原生的朋友也可以参考来解决自己的问题

Canvas 图片绘制

在小程序内想对图片进行操作的正常流程有

通过 DOM 获取 Canvas 节点并创建 Canvas 实例通过路径读取图片信息，获取图片的宽高以及本地的临时路径，并根据图片宽高设置画布宽高创建 Image 图片对象赋予临时路径，并在其 onLoad 内进行相应的图片处理导出图片到本地获取相应的临时路径，完成图片处理

小程序大部分的 API 都是回调函数的形式，如果习惯 Promsie 的写法也可以将回调函数封装起来使用，上述流程的示例代码可以参考下面的例子

<code>import { View, Text, WebView, Canvas, Image } from '@tarojs/components'

import Taro, { useLoad } from '@tarojs/taro'

import { useEffect, useState, useRef } from 'react'

​

export default function Index() {

const url = ''

useEffect(() => {

const query = Taro.createSelectorQuery()

query

.select('#myCanvas')

.fields({ node: true, size: true })

.exec((res) => {

const canvas = res[0].node

const ctx = canvas.getContext('2d')

Taro.getImageInfo({

src: url,

success: (res) => {

console.log(res)

canvas.width = res.width

canvas.height = res.height

const img = canvas.createImage()

img.src = url

img.onload = () => {

ctx.drawImage(img, 0, 0)

Taro.canvasToTempFilePath({

x: 0,

y: 0,

width: res.width,

height: res.height,

destWidth: res.width,

destHeight: res.height,

canvas: canvas,

success: (res) => {

console.log(res.tempFilePath)

}

})

}

}

})

})

}, [])

return (

<View>

<Canvas canvasId="myCanvas" id="myCanvas" type="2d" />code>

</View>

)

}

​

有点回调地狱那味了，所以使用场景多可以封装一下，当这段程序运行下来后发现一个问题就是为什么绘制在画布上的图片发生了变形，那是因为我们没有设置Canvas 容器宽高，仅仅设置了画布的宽高，那么第一个问题来了，什么是容器宽高，什么又是画布宽高呢？

容器尺寸与画布尺寸

<code>export default function Index() {

const url =

''

const systemInfo = useRef(Taro.getSystemInfoSync())

useEffect(() => {

console.log('useEffect')

const query = Taro.createSelectorQuery()

query

.select('#myCanvas')

.fields({ node: true, size: true })

.exec((res) => {

const canvas = res[0].node

const ctx = canvas.getContext('2d')

Taro.getImageInfo({

src: url,

success: (res) => {

console.log(res)

canvas.width = systemInfo.current.windowWidth

canvas.height = systemInfo.current.windowHeight

const img = canvas.createImage()

img.src = url

img.onload = () => {

ctx.drawImage(img, 0, 0)

}

}

})

})

}, [])

return (

<View>

<Canvas

canvasId="myCanvas"code>

id="myCanvas"code>

type="2d"code>

style={ {

height: systemInfo.current.windowHeight + 'px',

width: systemInfo.current.windowWidth + 'px'

}}

/>

</View>

)

}

​

这里就可以发现图片是按照正常比例绘制上去了，但是由于图片的宽度大于画布和页面的宽度，所以没有展示出来，可以对图片的宽高进行等比例缩放，图像的绘制这里就基本OK了，但是此刻你会发现图像的清晰度没有原图高，而且在下一步图像导出的时候又发现我导出的图像质量也极差，非常模糊，这是因为我没有处理**<code>devicePixelRatio**，下面我们来讲一下这个

通过 devicePixelRatio 提高 Canvas 的图像质量