使用uniapp做海报有两种方法
1,使用canvas(uniapp官网有插件,可以根据仿照例子做一个)
2,使用HTML2canvas(不过使用这个需要获取dom节点,因为小程序是没有dom节点这一说法的,所以当时没想到好的解决办法,就用了第一种)
canvas我也仅仅只是了解,没有真正做过什么东西,这是我第一次使用这个做一个完整的页面
(海报链接地址)
我用的是这个插件,首先请求海报上需要的数据(如果是小程序需要分享海报,我建议海报这个做成弹框形式出现,因为页面的话还需要请求一次数据在画canvas会很慢的)这时就开始第一个坑了,我当时不知道怎么将正方形图片裁剪成一个圆
1,正方形图片裁剪成一个圆
如果知道的可以跳过这个,我当时很傻傻的百度了半天,但是百度的东西都不对,后来我想想还是以最原始的方法,看文档,文档肯定会介绍这些,我们先把原理搞懂了再想其他办法(canvas文档)可能一开始没有你想要的答案,你需要把这些都过了一遍自然就会有思绪
getDraw(){
this.ctx = uni.createCanvasContext('zwyPoster',this);
this.circleImg(this.img,.475,.2, 24)
}
circleImg(img, x, y, r) {
uni.getImageInfo({
src:img
}).then((image)=>{
x= Math.ceil(this.cansWidth * x)
y = Math.ceil(this.cansHeight * y)
this.ctx.save();
var d = 2 * r;
var cx = x + r;
var cy = y + r;
this.ctx.arc(cx, cy, r, 0, 2 * Math.PI);
this.ctx.clip();
this.ctx.drawImage(image[1].path, x, y, d, d);
this.ctx.restore();
this.ctx.draw(true);
})
},
2,小程序码是最坑的
小程序码是后台返回过来的二进制流文件,我拜托后端换成base64形式的,开始了我的填坑之路
因为base64的图片看到的都是通过img在页面展示的,而通过canvas画就需要先下载下来再进行画
我们百度到的小程序base64画到canvas里面都是
因为我们用的是uniapp不能使用wx,所以我们要继续填坑,百度到很多,终于找到了方法
let base64Image = base64Str.split(',')[1].replace(/[\r\n]/g, ''); // 后台返回的base64数据的回车换行换为空字符''
const fsm = wx.getFileSystemManager(); //文件管理器
const FILE_BASE_NAME = 'tmp_base64src'; //文件名
const format = 'png'; //文件后缀
const timestamp = (new Date()).getTime();//获取一个当前时间戳,用于区分每一个小程序码,防止多次写进的小程序码图片都一样(建议通过不同的商品id来区分不同的小程序码)
const buffer = wx.base64ToArrayBuffer(base64Image),//base 转二进制
filePath = `${wx.env.USER_DATA_PATH}/${timestamp}www.${format}`; //文件名
fsm.writeFile({ //写文件
filePath,
data: buffer,
encoding: 'binary',
success(res) {
wx.getImageInfo({ //读取图片
src: filePath,
success: function(res) {
let img = res.path;//把需要画出来的图片
},
fail(e){
console.log('读取图片报错');
console.log(e);
},
error(res) {
console.log(res)
}
})
},
fail(e){
console.log(e);
}
})
}).catch((e)=>{
console.log(e);
})
base64Str是后台返回的base64文件