canvas画条形图 微信小程序_微信小程序-通过canvas编辑生成图片
最近有做一个关于自定义内容之后生成图片,用作分享使用.研究了一下,实现有两种方案:1.服务端生成模板,通过传给服务端数据返回图片.这样前端基本没有任务量,只负责展示.2.前端自己处理,将所需数据画入canvas中.我选择了自己处理...
首先我们需要先写一个canvas.如果还不了解canvas的朋友,给你们一个入口:
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
注意,这个canvas不可隐藏.有图片预览需求的可以直接把他画在页面相应位置,由于canvas是原生组件,不会被其他任何组件遮挡.如果想画出效果,但又不想展示出来的,可以把canvas移除页面显示范围就可以了.
如果不了解原生组件:https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
写入了canvas组件.之后便是绘制canvas.(示例内容,大家可根据)
let ctx = wx.createCanvasContext('shareCanvas'); //根据canvas-id创建canvas 的绘图上下文 CanvasContext 对象
//填充背景
ctx.setFillStyle('#ffffff');
ctx.fillRect(0, 0, 750, 1334);
// 画一个边框
ctx.setStrokeStyle('#cccccc')
ctx.strokeRect(24, 500, 700, 350)
// 画入一段文字
ctx.setFontSize(26);
ctx.setFillStyle('#ff7e28');
ctx.fillText('我是一段文字', 145, 580);
// 画入一张图片(图片url可以是网络链接,也可以是本地路径)
ctx.drawImage(imageUrl, 210, 60, 330, 330);
// 将上面的内容全部画入canvas中
ctx.draw()
注意这个draw()方法是有callback的.所以,在进行下一步操作的时候,一定要写在callback中.比如导出图片.代码如下:
var that = this;
ctx.draw(true, ()=>{
console.log('准备导出图片');
that.exportCanvasImage();// 导出图片
});
关于canvas生成image,可以调用wx.canvasToTempFilePath方法.很简单,填入一些参数即可.
下面要说的我觉得是实现功能的关键.在根据服务端数据生成图片时,尤其是数据图片,我们不可能在图片没有download的情况下将其画入canvas,所以,一定要将其先下载到本地.才能画入canvas.而且还有多张图片需要下载的情况.所以我自己写了一个方法来处理这些需要download的图片文件,代码如下:
// imageArr是imageUrl数组.callback是执行结果的回调函数.
locateImagePath:function(imageArr=[], callback) {
let promiseList = imageArr.map((item) => {
return new Promise(resolve => {
wx.getImageInfo({
src: item,
success: (res) => {
console.log('生成本地路径成功!');
resolve(res);
},
fail:(error) =>{
wx.hideLoading();
app.showToast('图片保存失败!');
console.log('生成本地路径失败!');
return;
}
});
});
});
// 当数组内所有图片都下载到本地,返回result值
const result = Promise.all(promiseList).then((res) => {
console.log('结束');
console.log(res);
callback(res);
}).catch((error) => {
console.log(error);
});
},
可以在callback中进行图片资源的绘制.
this.locateImagePath(imageArr,(res)=>{
console.log('该画画啦');
console.log(res);
ctx.drawImage(res[0].path, 210, 60, 330, 330);
ctx.draw(true, ()=>{
console.log('准备导出图片');
that.exportCanvasImage();
});
})
这样,就可以把网络图片画入canvas中了.
在微信小程序,还要注意域名的设置.要把需要download的图片域名都添加入小程序后台的域名设置.downloadfile中.一个月只能修改5次.总结好了尽量一次添加成功.