说在前面的话
自己第一次制作了海报并且保存相册,故来记录一下。。。分享给需要的朋友,这里以字节小程序为例,明白思路,学以致用!!!
正文开始了(一本正经)
思路:
1.用canvas绘图,将自己的海报绘制出来
2.将绘制好的canvas转化成图片
3.调用api将生成的图片保存到相册
tip:为什么要用canvas呢?因为只有图片才可以保存到相册,把你海报的所有东西变成一张图片,仿佛只能canvas了吧。思路了解,码上就来!
第一步:绘制海报
我们可以想一下海报的构成:背景,头像,昵称,标题,正文,二维码。。。主要可能也就是这些了吧。然后再来分析一下,背景、二维码、头像是图片;昵称标题,正文是文字。所以就是这么简单,图片加文字,自己测量好长宽、位置放置就好啦。第一次绘制canvas的同学不要慌,就是如此简单的吖!!!
我呢还是很贴心的啦,虽然没有成品的海报(毕竟每个人的海报中内容不一样),but 我把文字图片的绘制方法都写出来了,还绘制了一些常用图形,以及海报中可能遇到的一些需求,所以大家根据自己的需要修改他们的大小和位置就好啦
index.js 首先创建一个canvas(我是在onshow中)
data: {
canvasWidth: 375,
canvasHeight: 500,
bgwidth: "",
bgHeight: "",
text: "骑着我心爱的小摩托温婉居家小仙女啦啦啦",
img: ''
},
onShow() {
this.ctx = tt.createCanvasContext("myCanvas");//myCanvas是canvas的id,这个之后我们在html中给大家展示写法
this.createCanves();//调用绘制海报的方法
},
createCanves() {
let ctx = this.ctx;
let imgArr = {
url1:
"../../image/bg.jpg",
url2: "../../image/user.jpg",