这里是将证件照图片写死,背景颜色写死,尺寸写死,大家可按需进行改进
首先最注意的地方是保存图片时,必须保证
canvas绘制完成
第一步:在 WXML 中添加 canvas 组件
wxml 文件
<view class="border" style="margin: 75rpx">
<canvas id="myCanvas" type="2d" style="border: 1px solid; width: 600rpx; height: 840rpx;"/>
</view>
-
首先需要在 WXML 中添加 canvas 组件。
-
指定 id=“myCanvas” 唯一标识一个 canvas,用于后续获取 Canvas 对象。
-
指定 type 用于定义画布类型,本例子使用 type=“2d” 示例。
效果图
第二步:获取 Canvas 对象和渲染上下文
后面的代码我都是放在生命周期函数onLoad里面,你们可以按需分别放在不同事件里面,因为我只是做过简单的栗子
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
})
-
通过
SelectorQuery
选择上一步的 canvas,可以获取到 Canvas 对象。 -
再通过
Canvas.getContext
,我们可以获取到 渲染上下文 RenderingContext。 -
后续的画布操作与渲染操作,都需要通过这两个对象来实现。
第三步:初始化 Canvas
wx.createSelectorQuery()
.select('#myCanvas') // 在 WXML 中填入的 id
.fields({ node: true, size: true })
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
// 渲染上下文
const ctx = canvas.getContext('2d')
// Canvas 画布的实际绘制宽高
const width = res[0].width
const height = res[0].height
// 初始化画布大小
const dpr = wx.getWindowInfo().pixelRatio
canvas.width = width * dpr
canvas.height = height * dpr
ctx.scale(dpr, dpr)
})
- canvas 的宽高分为渲染宽高和逻辑宽高,具体看官网的教程(上面那个链接)
第四步:绘制背景色
// ...接上面的代码...
// 背景颜色
ctx.fillStyle = 'rgba(0, 0, 200)'
ctx.fillRect(0, 0, width, height)
效果图
第五步:绘制图片
// ...接上面的代码...
// 图片对象
const image = canvas.createImage()
// 设置图片src
image.src = 'https://i.postimg.cc/s2d5kHG3/test-2.png'
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0)
}
效果图
最后一步保存画布的内容到本地
在刚刚的
image.onload
下添加如下代码
// 图片加载完成回调
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0, width, height)
console.log('绘制完成')
// 生成图片
wx.canvasToTempFilePath({
// 放在image.onload 里面确保图片绘制完成
canvas: canvas,
success: res => {
// 生成的图片临时文件路径
const tempFilePath = res.tempFilePath
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
console.log('成功保存到系统相册')
}
})
}
})
}
这一步是最关键的,(本人也迷茫半天,因为我将
canvasToTempFilePath
放在外面,只输出一张纯蓝色的图片,最后在微信开发社区发现是画布绘制还没有完成,我就保存图片到本地导致的)
关键点:将canvasToTempFilePath
放在image.onload
回调里面。确保插入的图片已经绘制进画布