900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 微信小程序Canvas画布绘制以及保存

微信小程序Canvas画布绘制以及保存

时间:2021-06-13 11:19:26

相关推荐

微信小程序Canvas画布绘制以及保存

<canvas canvas-id="firstCanvas" style="width: 320px;height: 500px;" bindlongtap="bao" ></canvas>

绘制图像

var code=t.data.wxcode;/*code是指图片base64格式数据*///声明文件系统const fs = wx.getFileSystemManager();//随机定义路径名称var times = new Date().getTime();var codeimg = wx.env.USER_DATA_PATH + '/' + times + '.png';//将base64图片写入fs.writeFile({filePath: codeimg,data: code.slice(22),encoding: 'base64',success: () => {console.log(codeimg);//写入成功了的话,新的图片路径就能用了var ctx = wx.createCanvasContext('firstCanvas'); //获取canvas标签idctx.drawImage('/pages/image/friend.jpg', 0, 0, 320, 500);ctx.drawImage(codeimg, 80, 240, 170, 170);ctx.drawImage('/pages/image/esc.png', 288, 7, 30, 30);ctx.draw();}});

保存

save(){var _this = this;wx.canvasToTempFilePath({// 把画布转化成临时文件x: 0,y: 0,width: 380, // 截取的画布的宽height: 600, // 截取的画布的高destWidth: 380, // 保存成的画布宽度destHeight: 600, // 保存成的画布高度fileType: 'jpg', // 保存成的文件类型quality: 1, // 图片质量canvasId: 'firstCanvas', // 画布IDsuccess(res) {// 2-保存图片至相册wx.saveImageToPhotosAlbum({// 存成图片至手机filePath: res.tempFilePath,success(res2) {wx.hideLoading();wx.showToast({title: '保存成功',duration: 2000});},fail(res3) {if (res3.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {wx.showToast({title: '保存失败,稍后再试',duration: 2000,icon: 'none'});wx.hideLoading();} else {wx.showToast({title: '保存失败,稍后再试',duration: 2000,icon: 'none'});wx.hideLoading();}}});},fail() {uni.showToast({title: '保存失败,稍后再试',duration: 2000,icon: 'none'});uni.hideLoading();}});},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。