1,使用painter插件
** 适用于微信小程序及uniapp的小程序端**
①,引入插件painter
克隆地址:https://gitcode.net/mirrors/Kujiale-Mobile/Painter
下载的
painter
放到微信小程序的
components
目录下
②在json文件中引入
"usingComponents": {
"painter":"/components/painter/painter"
},
注:在uniapp生成小程序中,painter插件需要放在wxcomponents目录下
③wxml文件中引入painter
<painter palette="{{paletteInfo.data}}"
bind:imgOK="shareImageOkAction"
bind:imgErr="shareImageErrAction"
widthPixels="1080" />
④ 创建 paletteInfo 数据
let textLeftCss = {
fontSize: '28rpx',
height:66rpx
,
}let views = []
views.push({
id: "imgBg",
type: "image",
url: this.finalPic,
css: {
top: 0,
width: '750rpx',
mode: 'widthFix',
}
}, {
id: "rectBG",
type: "rect",
css: [{
width: "718rpx",
height:${this.guigeList.length * 80 + this.stepList.length * 262 + 24}rpx
,
top:658rpx
,
left: "16rpx",
color: 'linear-gradient(-180deg, #E7F3FF 0%, #FFFFFF 50%)',
shadow: '0rpx 4rpx 16rpx #F4F4F4',
borderRadius: '16rpx'
},textLeftCss ]
})let paletteInfo = {
width: "${width}px",
height:${height}px
,
background: "#fff",
views: views
}this.painterInfo = {
height: height,
data: paletteInfo
}
⑤ 图片生成成功/失败的回调
shareImageOkAction(e) {
console.log('生成图片路径: ', e.detail.path)
},
shareImageErrAction(err) {
console.log('图片生成失败: ', err)
},
海报生成后,可以调用微信的wx.saveImageToPhotosAlbum和wx.showShareImageMenu来保存图片或者分享给好友,
2. 使用 snapshot 组件(适用于微信小程序原生开发)
- 使用 wxml 绘制海报内容
- 使用 snapshot 组件包裹海报的 wxml
- 调用 takeSnapshot 获取图片数据
- 调用 fs.writeFileSync 将海报数据写入本地文件
- 调用 wx.saveImageToPhotosAlbum 将海报保存到本地
参考链接小程序生成海报,全新组件一个就好通过 Skyline snapshot 新组件,小程序快速生成海报,营销活动新法宝!https://mp.weixin.qq.com/s/GOzwCBpnzn51R-TBDbf2Ag?poc_token=HAN3YGWjr8BT5Tqo2z2vSJGlK7DnqITgJF_TJS73
** 3,使用 htmltocanvas 插件(适用HTML)**
①,获取需要生成海报的dom元素
const dom = document.getElementById('canvas')
②生成海报链接
htmltocanvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0, // html2canvas默认绘制视图内的页面,需要把scrollY,scrollX设置为0
scrollX: 0,
useCORS: true, //支持跨域
// scale: 2, // 设置生成图片的像素比例,默认是1,如果生成的图片模糊的话可以开启该配置项
}).then((canvas) => {
console.log(canvas.toDataURL('image/png'));this.this.h5canvasImgPath = canvas.toDataURL('image/png'); }).catch(err=>{ uni.hideLoading(); // console.log('失败',err); })
③保存图片
var arr = this.h5canvasImgPath.split(","), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } // 将Blob对象转换成文件并下载到本地 var blob = new Blob([u8arr], { type: mime }); var a = document.createElement('a'); a.download = '海报.png'; a.href = URL.createObjectURL(blob); a.click();
版权归原作者 泡泡SuperJ 所有, 如有侵权,请联系我们删除。