小程序实现绘制图片 保存到手机

 HTML

<template><view><canvas canvas-id="myCanvas" :style="{height:'380px',width:wWidth+'px',background:'#FFFFFF'}"></canvas><view class="textCenter"><button @click="saveCanvas">保存图片</button></view></view>
</template>

JS

<script>export default {data() {return {wHeight:'',wWidth:''}},onLoad(){this.wHeight=uni.getWindowInfo().screenHeight-50; //屏幕可视区域高度this.wWidth=uni.getWindowInfo().screenWidth;//屏幕可视区域宽// 获取Canvas对象 var context = wx.createCanvasContext('myCanvas') //设置背景颜色是白色，这个地方就是设置一个与canvas画布一样大小的方框设置方框背景context.setFillStyle('#FFFFFF')context.fillRect(0,0,this.wWidth,380);context.stroke()// 绘制文本			context.setFontSize(20)			context.setFillStyle('red')context.setTextAlign('center')context.fillText('Hello World!',  this.wWidth/2, 50) context.setFontSize(20)context.setFillStyle('red')context.setTextAlign('center')context.fillText('葫芦娃', this.wWidth/2, 100)context.stroke() let _this=this;// 绘制图片wx.getImageInfo({src: 'https://yujia-shanghai-bucket.oss-cn-shanghai.aliyuncs.com/h5/out_program/1687242451873_634a7025d03364b415b90bf5a07306071827dbc97358-C6odDl_fw1200.webp.jpg',success(res) { context.drawImage(res.path, _this.wWidth/2-100, 140, 200, 200) context.stroke() // 将Canvas绘制出来 context.draw()}			}) },methods: {saveCanvas(){wx.canvasToTempFilePath({  x: 0,  y: 0,  width: this.wWidth, height: 380,  canvasId: 'myCanvas',  fileType:'jpg',success: function (res) {  console.log(res.tempFilePath);  wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: (resS) => {    console.log(resS)  uni.showToast({title:'保存成功',icon:'success'})},  fail: (errS) => {}}) },fail: (err) => {console.log(err);}  }) return;}}}
</script>