小程序实现绘制图片 保存到手机
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>