微信小程序使用canvas绘图并下载

微信小程序使用canvas绘图并下载
实现的功能：

canvas绘制页面
当前页面可下载
文字自动换行
实现的效果最终如下图所示：
在这里插入图片描述

实现步骤：
1.页面初始化获取屏幕尺寸

  onLoad: function (options) {let number = options.code;let that = this;//this.getInfor(number);wx.getSystemInfo({success: function(res) {// console.log(res);that.setData({screenWidth: res.safeArea.width,screenHeight: res.safeArea.height-44, //减去顶部不可使用的标题高度,ratio:res.windowWidth.windowWidth / 375,type:options.type,   });},});const ctx = wx.createCanvasContext("my-canvas", this);this.drawImage(ctx);},

2.canvas绘制方法,并保存为图片

  drawImage: function(ctx){const sWidth = this.data.screenWidth;const sHeight = this.data.screenHeight;// console.log(this.data.sfzcode);// 设置填充色ctx.setFillStyle("#fff");// ctx.draw();// 填充一个矩形ctx.fillRect(0, 0, sWidth, sHeight);// 绘制标题ctx.setFillStyle("#000");// 设置标题的字体大小ctx.setFontSize(20);// 测量标题宽度let measure = ctx.measureText('证明').width;console.log(measure);// 标题居中显示ctx.fillText('证明', (sWidth-measure)/2, 50);let datas = `     兹证明******${this.data.adress},房屋类型：${this.data.type2}，层数：${this.data.floor}层，实测宗地面积：${this.data.area1}㎡，实测建筑面积：${this.data.area2}㎡，登记建筑面积：${this.data.area3}㎡，登记占地面积：${this.data.area4} ㎡，房屋所有者：${this.data.name}。`console.log(datas);ctx.setFontSize(16);//绘制的文字需要自动换行，调用自动换行的方法this.textPrewrap(ctx,datas,10,100,40,sWidth-25,30);ctx.fillText('特此证明!', 60, 340);ctx.fillText(`证明单位： ${this.data.danwei}`,170, 390);ctx.fillText(`${this.data.time}`,200, 420);// 绘制图片ctx.save();ctx.drawImage("./test.png",200,360,80,70);ctx.restore();ctx.draw();// 绘制印章图片var avatarurl_width = 100;    //绘制的头像宽度var avatarurl_heigth = 100;   //绘制的头像高度var avatarurl_x = 50;   //绘制的头像在画布上的位置var avatarurl_y = 50;   //绘制的头像在画布上的位置ctx.save();ctx.beginPath(); //开始绘制//先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);},getPower: function(){let that = this;wx.getSetting({success(res) {if (!res.authSetting['scope.writePhotosAlbum']) {wx.authorize({scope: 'scope.writePhotosAlbum',success() {// 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问that.saveImage();}})} else {wx.openSetting({success(res) {}})}}})},//点击保存按钮，保存为图片到本地saveImage: function(){wx.canvasToTempFilePath({x: 0,y: 667,width: this.data.screenWidth,height: this.data.screenHeight,destWidth: this.data.screenWidth*2,destHeight: this.data.screenHeight*2-60,canvasId: "my-canvas",fileType: "png",success: function(res){wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) { // console.log("succ", res)},fail(res){ // console.log("err", res) }});wx.showToast({title: '保存成功',icon: 'success',duration: 2000});},fail: function(res){// console.log("err", res);},complete: function(){}}, this);},

3.绘制的文字自动换行的方法

  // ctx： 画布的上下文环境,content： 需要绘制的文本内容,drawX： 绘制文本的x坐标,drawY： 绘制文本的y坐标, lineHeight：文本之间的行高, lineMaxWidth：每行文本的最大宽度,lineNum：最多绘制的行数
textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {var drawTxt = ''; // 当前绘制的内容var drawLine = 1; // 第几行开始绘制var drawIndex = 0; // 当前绘制内容的索引// 判断内容是否可以一行绘制完毕if(ctx.measureText(content).width <= lineMaxWidth) {ctx.fillText(content.substring(drawIndex, i), drawX, drawY);} else {for (var i = 0; i < content.length; i++) {drawTxt += content[i];if (ctx.measureText(drawTxt).width >= lineMaxWidth) {if (drawLine >= lineNum) {ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);break;} else {ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);drawIndex = i + 1;drawLine += 1;drawY += lineHeight;drawTxt = '';}} else {// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidthif (i === content.length - 1) {ctx.fillText(content.substring(drawIndex), drawX, drawY);}}}}
},

微信小程序使用canvas绘图并下载相关推荐

微信小程序使用canvas绘图
微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canva ...
微信小程序使用canvas绘图
微信小程序的绘图是使用canvas,canvas的使用和普通的h5的canvas使用一样,没有什么区别想使用canvas,首先是要在页面是创建canvas标签,如果只是想要获得图片,可以把canva ...
微信小程序使用canvas绘图，圆形头像，网络背景图，文字，虚线，直线
<canvas type="2d" id="shareCanvas0" style="height: 1196rpx;width:578rpx; ...
微信小程序使用canvas绘图，并保存下载到本地。圆形头像，虚线网络图片
wxml <button class="btn" type="primary" form-type="submit" bindtap ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序使用canvas绘制海报并保存本地相册
在做微信小程序的时候,很多都会用到生成海报分享功能,刚好最近项目有这个需求,今天就发出来记录下首先是使用canvas绘制一张海报,微信小程序的canvas有老版本和新版本我是用的是新版本代码如下 ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序：全新动态视频壁纸下载支持多种分类短视频另外也有静态壁纸
这是一款主打动态视频壁纸的一款微信小程序源码当然啦,里面也是有静态壁纸的其实这款小程序也可以说是短视频小程序都可以该款小程序全采集,另外支持多种流量主大家应该知道小编之前也发过一款动态壁纸的小 ...
微信小程序github源码大全下载
微信小程序实例源码大全下载微信小应用示例代码(phodal/weapp-quick) 源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo ...

微信小程序使用canvas绘图并下载

微信小程序使用canvas绘图并下载相关推荐

最新文章

热门文章