云开发Painter插件使用分享过程
为什么选择Painter?
也尝试过微信的扩展组件wxml-to-canvas ,没有painter布局灵活,关键是wxml-to-canvas绘制的图片与编辑器的里位置不一样,什么原因我也不清楚就果断的选择了
Painter。
Painter插件绘制的图片是矩形?
参考的代码是@ 喵的房东大人 , 原因我总结了下,要给展示图片的组件固定样式,估计是这样加了样式就正常了。
.share-image {
width: 560rpx;
display: block;
border-radius: 16rpx;
box-shadow: 0px 4rpx 8px 0px rgba(0, 0, 0, 0.1);
}
Painter绘制图片文字模糊有锯齿?
解决方法: 画布大小= 设计的宽高px*2*像素比
导出图片=画布大小*2
//画布大小
let pro=res.pixelRatio>2?2:res.pixelRatio
that.setData({
canvasDisplayW:280*2*pro,
canvasDisplayH:435*2*pro,
});
}
});
//需修改Painter源码
saveImgToLocal() {
const that = this;
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'photo',
canvas: that.properties.use2D ? that.canvasNode : null,
destWidth: that.canvasWidthInPx*2, //*2
destHeight: that.canvasHeightInPx*2,//*2
success: function (res) {
that.getImageInfo(res.tempFilePath);
},
fail: function (error) {
console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
that.triggerEvent('imgErr', {
error: error
});
},
}, this);
}, 300);
},
云开发图片地址如何在Painte使用?
方法:替换,将微信云图片 文件ID 替换成https.不用开启 校验合法域名,真机也可以用
/**@图片处理路径 */
imgPathDs(regsrc){
let imgReg = new RegExp('cloud://你的File ID 格式');
return regsrc.replace(imgReg, 'https://下载格式.tcb.qcloud.la');
},
如何生成菊花码?
方法:通过云函数方法拿到buffer,转成base64,再将base64转为图片,再传给painte.
结语:我是老师口子说的面向百度开发,以上是个人搜索尝试的结果,以上内容不是唯一最佳的方法,不对的地方望指正。