微信小程序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();}});},

微信小程序Canvas画布绘制以及保存相关推荐

微信小程序之画布绘制并管理多张图片
在微信小程序的画布绘制多张图片,很简单,只需要调用drawImage就可以,但是如果要做一个图片编辑的小程序,肯定要对绘制上去的图片.文字等等进行操作,比如移动一下,旋转一下或者缩放等等.但普通的画布 ...
微信小程序canvas画布新接口type为2D时drawImage方法的使用以及注意事项
微信小程序canvas画布自2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),但文档不全,从原canvas的api转变到新的api时遇到不少问题,现将新版与旧版的画布载入图 ...
微信小程序 canvas画布渲染云存储的图片
[已解决]问题: 在云开发小程序过程种,用canvas画布渲染云存储的图片,发现不能显示.用http带头的网络图片是可以显示的,用cloud带头的云存储图片就是不行.http带头的网络图片可以展示, ...
微信小程序canvas 2d 绘制图片与文字导出图片
wxml内容如下 <canvas id="myCanvas" type="2d"style="width: {{ canvas.width } ...
微信小程序canvas画布转成图片并在转发里面形成图片转发
onReady() {var that = thisvar rpx = wx.getSystemInfoSync().windowWidth / 375; //加入rpx进行手机适配const que ...
微信小程序canvas画布不清晰解决方法
绘制的图片,文字等十分模糊添加以下代码,通过设置分辨率来解决 const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = res[0].w ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
用python画圆角矩形_详解微信小程序canvas圆角矩形的绘制的方法
详解微信小程序canvas圆角矩形的绘制的方法发布时间:2020-10-04 18:20:31 来源:脚本之家阅读:103 作者:清夜微信小程序允许对普通元素通过 border-radius 的 ...
canvas 圆角矩形填充_详解微信小程序canvas圆角矩形的绘制的方法
微信小程序允许对普通元素通过 border-radius 的设置来进行圆角的绘制,但有时候在使用 canvas 绘图的时候,也需要圆角,例如需要将页面上某块区域导出为图片下载到本地的时候,常用的解决方 ...

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

微信小程序Canvas画布绘制以及保存相关推荐

最新文章

热门文章