小程序开发之分享海报并保存到相册功能 |
您所在的位置：网站首页 › 收藏头像保存到相册 › 小程序开发之分享海报并保存到相册功能 |
小程序开发之分享海报并保存到相册功能
|
项目地址：https://github.com/yancekang/wechat-plug 欢迎star 演示： 小程序生成海报并不能像客户端一样，采用截取页面上指定部分作为生成海报，而是需要用到canvas按照海报模板生成一张图片。 首先我们看下实现的效果 首先我们需要在页面上插入canvas标签 通过 css隐藏canvas， 需要将canvas定位到页面不可见部位。设置如下属性将canvas定位页面之外。 position: fixed; left: -200vw;注意：设置canvas尺寸是尽量使用px，是为了尺寸大小和生成海报是尺寸一致 不能使用 display: none隐藏canvas 开始绘制创建 canvas的绘图对象 wx.createCanvasContext let canvasW = 700 //定义画布宽高，具体根据海报模板定义 let canvasH = 1200 const ctx = wx.createCanvasContext('my_canvas') // 获取绘图对象 my_canvas 为页面canvas的id ctx.clearRect(0, 0, canvasW, canvasH) // 清空画布 ctx.setFillStyle('#ffffff') //设置填充色 ctx.fillRect(0, 0, canvasW, canvasH) //填充画布之后，画布就是一个700*1200白色背景的白板。 首先绘制一个高度为800px蓝色背景 //绘制蓝色背景 ctx.setFillStyle('#0B5FA5') //设置填充色 ctx.fillRect(0, 0, 690, 800)绘制每日一语，这里需要计算文字长度，并且内容在蓝色区域上下居中 ctx.setFontSize(40); //设置字体大小 ctx.setFillStyle("#fff") //设置字体颜色根据内容长度进行换行，当每一行超过630时，进入第二行绘制，这里将每一行文字放入到一个数组中，然后进行绘制数组里面的数据。 for (var a = 0; a < yiyu.length; a++) { if (ctx.measureText(temp).width < 630 && ctx.measureText(temp + (yiyu[a])).width |
【本文地址】
今日新闻 |
推荐新闻 |