E企盈营销工具技术服务商 热线:4006-838-530

三分钟让你上手小程序canvas合成海报

E企盈直播平台营销卖货系统

一,先准备素材(图片与文字)根据业务需求准备好素材与需要的文字内容二,了解微信api了解微信小程序配合canvas使用的一些api  例如(wx.createSelectorQuery(),wx.createContext(),wx.drawCanvas)等等…三,实现思路定义一个canvas容器,动态计算图片,文字大小,根据需求在画布上任意位置展示四,图片合成两种方案:响应式的海报 || 固定宽高海报一,响应式的海报通过wx.createSelectorQuery()节点查询,获取画布宽高通过计算比例动态宽高复制代码二,固定宽高顾名思义就是写死宽高  优势:简单, 缺点:不利于用户体验复制代码废话不多说直接进去正题:* 第一步:先查询节点(画布)大小(宽高)const query = wx.createSelectorQuery()    query.select(‘.myCanvas’).boundingClientRect(function (rect) {       //rect.width画布宽度       //rect.height画布高度    }).exec()* 第二步:获取绘画上下文//使用wx.createContext获取绘图上下文contextvar context = wx.createContext()* 向画布上绘制图像。context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)sx,sy,swidth,sheight四个为可选参数sx开始剪切的 x 坐标位置。sy开始剪切的 y 坐标位置。swidth被剪切图像的宽度。sheight被剪切图像的高度。如果img为网络图片: wx.getImageInfo({     src: 网络地址,//服务器返回的图片地址     success: function (res) {       //res.path     } }) 调用微信api下载图片到本地,才能绘画到画布上  * 向画布上绘制文字context.fillText(text,x,y,maxWidth);text :绘画文字x :开始绘制文本的 x 坐标位置(相对于画布)。y :开始绘制文本的 y 坐标位置(相对于画布)。maxWidth  可选,允许的最大文本宽度,以像素计。如果你还想给控制文字大小或者颜色:context.setFontSize(字号大小)//setFontSize绘画文本字体大小context.strokeStyle= “rgba(255,0,0,0.5)”;//strokeStyle用于描边context.fillStyle= “rgba(255,0,0,0.5)”;//fillStyle填充样式* 接下来画个圆,用来绘制用户头像context.beginPath() //开始创建一个路径context.arc(x,y,r,sAngle,eAngle,counterclockwise); //画一个圆形裁剪区域x圆的中心的 x 坐标。y圆的中心的 y 坐标。r圆的半径。sAngle起始角,以弧度计(弧的圆形的三点钟位置是 0 度)。eAngle结束角,以弧度计。counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。context.clip() //裁剪context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) //绘制图片上去context.save();//保存当前绘制的状态context.restore() //恢复之前保存的绘图上下文//调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为 wx.drawCanvas({      canvasId: ‘myCanvas’,      actions: context.getActions() //获取绘图动作数组 });  **到此图片文字已经绘画成功**复制代码五,裁剪画布制定区域生成图片wx.canvasToTempFilePath({  x: 100,  y: 200,  width: 50,  height: 50,  destWidth: 100, //输出的图片的宽度(width*屏幕像素密度)  destHeight: 100, //输出的图片的高度(height*屏幕像素密度)  canvasId: ‘myCanvas’,  success(res) {    console.log(res.tempFilePath) //生成文件的临时路径  }})destWidth和destHeight值越小越好,不然图片会很大,很占内存,下载慢,影响用户体验不要以为到这一步就结束了,还有最后一步~!复制代码六,图片下载wx.saveImageToPhotosAlbum({    filePath: res.tempFilePath,    success(res) {     }})对临时生成的图片路径进行下载,保存到用户手机相册复制代码生成二维码的就不讲了,一般由后端生成,也可以使用云开发自己调用api生成小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 三分钟让你上手小程序canvas合成海报
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏