小程序中使用canvas绘制海报

最近项目需求使用canvas绘制朋友圈可分享的海报，中间遇到很多问题，于是上网搜索，完美解决后，在此总结一下。

先来看一下效果图，点击按钮生成带二维码的图片。

1.关于canvas画布的宽度和高度
wxml：

<canvas canvas-id="canvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;background:red;position:fixed;top:-10000px;left:0; right:0;" disable-scroll="true" ></canvas>

 let windowWidth = wx.getSystemInfoSync().windowWidth;let windowHeight = wx.getSystemInfoSync().windowHeight;let scale = wx.getSystemInfoSync().pixelRatio let canvasHeight = windowHeight * scalelet canvasWidth = windowWidth * scale;

2.绘制背景图片
注意：绘制的背景图片高度不能超过canvas的高度，否则部分手机会出现黑屏的情况

ctx.drawImage('/images/image/backgroundImage.png', 0, 0, canvasWidth, canvasHeight);

3.绘制中间白色区域

// x，y为白色区域起始坐标
let x = 15 * scale;
let y = 48 * scale;
ctx.setFillStyle('#fff');
//contentHeight白色区域的高度
let contentHeight = 516 * scale
// contentWidth为白色区域的宽度
let contentWidth = this.data.canvasWidth - x * 2
//绘制borderRadius 为30 的 白色区域
ctx.moveTo(x + 30, y)
ctx.arcTo(x + contentWidth,  y, x + contentWidth, y + contentHeight, 20);
ctx.arcTo(x + contentWidth,  y + contentHeight, x, y + contentHeight, 20);
ctx.arcTo(x,  y + contentHeight, x, y,  20);
ctx.arcTo(x,  y, x + contentWidth , y,  20);
ctx.fill()

4.绘制换行文字

//contentMaxWidth 为 中间内容的最大宽度 如果超过此宽度需要换行let strs = [];let rowWidth = 0.0for (let c of typeName) {let cw = ctx.measureText(c).width ;// 判断有没有换行符if ((rowWidth + cw) >= contentMaxWidth ) {// 文字需要换行了let str = strs.join('');ctx.fillText(str, x, y)// 换行、清空y += 33 * scale;strs.length = 0;rowWidth = 0.0;}strs.push(c);rowWidth += cw;}if (strs.length > 0) {let str = strs.join('');ctx.fillText(str, x, y)}

5.绘制居中的圆形太阳码图片

    ctx.save()//proCodeWidth为二维码的宽度 proCodeX为居中后的X起始点坐标let proCodeWidth = 97 * scalelet proCodeX = (this.data.canvasWidth - proCodeWidth) / 2ctx.arc((proCodeX + 48.5) * scale, y + 48.5 * scale, 48.5 * scale, 0, 2 * Math.PI, false)ctx.clip()ctx.drawImage(this.data.proCode, proCodeX,  y, 97 * scale, 97 *scale);ctx.restore();

6.本地生成太阳码
因为canvas.drawImage 是不支持网络图片的，只支持本地图片。所以我们需要把从后台获取到的太阳码转换为本地图片。这里可以采用微信官方提供的 wx.getImageInfo 或者 wx.downloadFile。（网络图片需先配置download域名才能生效）

    wx.getImageInfo({src: url,success: (res) => {this.setData({proCode: res.path})console.log(this.data.proCode)},fail: (err) => {console.log(err)}})

7.绘制居中的文字

  let tip ='应手-让招聘更加得心应手'//144为文字的宽度 或者你也可以采用ctx.measureText(tip).width来获取let tipX = (this.data.canvasWidth - 144 * scale) / 2let tipY = 616.5 * scalectx.fillText(tip, tipX, tipY)

8.把canvas转为图片保存在本地

    ctx.draw(false, () => {let self = thissetTimeout(() => {wx.canvasToTempFilePath({canvasId: 'canvasId',success(res) {wx.previewImage({current: res.tempFilePath,urls: [res.tempFilePath]});},fail: function (err) {console.log('绘制失败, 请重试');}}, self)}, 500)})

这样就可以生成海报并保存在本地，第一次写文章，如果有错误欢迎指正。

小程序中使用canvas绘制海报相关推荐

在H5、微信小程序中使用canvas绘制二维码、分享海报
在H5.微信小程序中使用canvas绘制二维码.分享海报文章目录在H5.微信小程序中使用canvas绘制二维码.分享海报前言一.canvas绘制二维码 1.H5中使用canvas 2.微信小程 ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...
微信小程序之基于canvas绘制高铁线路图
前几天@天下雪给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂:如果有更简单的思路可以留言回复: 关注微信公众号,获取源码和教程下面说一下我的实现思路: ...
小程序之基于canvas绘制高铁线路图
前几天@天下雪给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂:如果有更简单的思路可以留言回复: 关注微信公众号,获取源码和教程下面说一下我的实现思路: ...
微信小程序使用html2canvas,在小程序中使用canvas的方法示例
一直没有怎么使用过canvas,小程序也是之前看过一个视频而已,想要找个例子结合一下两者.所以一个小小的保存图片作为朋友圈相册封面的demo就这么出现了,在这里主要记录一下自己遇到的一些问题以及解决的 ...
小程序 mpvue 使用canvas绘制环形图表
本来想用css3来实现,发现轮廓边上残影严重,所以直接用小程序的canvas使用来. 最终效果如下: 我的整页代码如下,里面已经写出备注来. <template><div class ...
微信小程序开发—(八)canvas绘制图形
一.小知识 (1).API接口 (2).context 对象的方法列表二.步骤 wxml中: <canvas canvas-id="myCanvas" class=&quo ...
小程序中使用canvas 生成推广图片——wepy框架
现在小程序不能直接分享到朋友圈,所以另辟蹊径的有了生成 '推广图' 让用户分享到朋友圈的方式就出来了.使用canvas 进行绘图的时候主要用了 ctx.drawImage() API进行绘画,但是c ...
微信小程序中的canvas基础应用
学了东西还是要记录一下,刚入职的小萌新啊,运气好分到一个项目不是很急的组原以为时间多了可以多学一些东西,但是发现好像不知道从哪里开始下手,我太南了.... 看旁边的实习生同事一直在搞canvas,自己 ...

小程序中使用canvas绘制海报

小程序中使用canvas绘制海报相关推荐

最新文章

热门文章