1. html
<canvas class="canvas" id="photo" type="2d" style="width:200px;height: 300px;"></canvas>
<button bindtap="saveImage">保存</button>
<!-- 用来展示生成的那张图片 -->
<image src="{{tempFilePath}}" mode="widthFix" />
2. js
data: {
canvas: null, //canvas 对象
tempFilePath: ""
},
onLoad(options) {
wx.createSelectorQuery()
.select('#photo') // 在 canvas的 id
.fields({
node: true,
size: true
})
.exec((res) => {
// Canvas 对象
const canvas = res[0].node
this.setData({ //这里保存canvas对象是因为下面保存相片要用这个对象
canvas
})
// 渲染上下文
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)
// 清空画布
ctx.clearRect(0, 0, width, height)
//canvas背景色
ctx.fillStyle = '#3c9cff';
ctx.fillRect(0, 0, 200, 300);
// 图片对象
const image = canvas.createImage()
image.src = '/images/640.png'
image.onload = () => {
// 将图片绘制到 canvas 上
ctx.drawImage(image, 0, 0, 200, 300)
}
})
},
// 生成图片
saveImage() {
wx.canvasToTempFilePath({
canvasId: 'photo',
destWidth: 286,
destHeight: 417,
canvas: this.data.canvas,
success: (res) => {
this.setData({
tempFilePath: res.tempFilePath
})
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res)=> {
wx.showToast({
title: '保存成功',
})
}
})
}
});
},
3. css
.canvas {
margin: auto;
font-size: 0;
}
.show {
width: 200px;
margin: auto;
display: block;
}
4. 效果图
文章来源地址https://www.toymoban.com/news/detail-664008.html
文章来源：https://www.toymoban.com/news/detail-664008.html
到了这里，关于小程序中通过canvas生成并保存图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
