- 目的:
不使用组件,生成海报图片。
- 效果:
- 代码如下:
wxml:
<view style="width:100%;height:{{canvasHeight}}px;">
<canvas wx:if="{{!showImg}}" type="2d" id="myCanvas" style="width:100%;height:100%;"></canvas>
<image wx:else src="{{imgSrc}}" style="width: 100%;height: 100%;" show-menu-by-longpress="true"></image>
</view>
js:
data: {
name: "Sun",
sign: "靡不有初,鲜克有终。",
posterUrl: "", // 海报地址
photoUrl: "", // 头像地址
qrcodeUrl: "", // 二维码
photoDiam: 50, // 头像直径
qrcodeDiam: 80, // 小程序码直径
infoSpace: 13, // 底部信息的间距
bottomInfoHeight: 100, // 底部信息区高度
tips: "长按或扫码了解更多", // 提示语
canvasWidth: 0, // 画布宽
canvasHeight: 0, // 画布高
canvasDom: null, // 画布dom对象
canvas: null, // 画布的节点
ctx: null, // 画布的上下文
dpr: 1, // 设备的像素比
posterHeight: 0, // 海报高
imgSrc:'',
showImg: false,
},
其实也就是看文档,踩了一些坑,也看了社区的一些问答,但总的来说官方文档可以满足使用。
主要使用方法如下
ctx.drawImage(pic, 0, 0, res.width, res.height) // 绘制大图,头像和二维码 到 canvas
ctx.fillText(this.data.name, 0, 0) // 绘制文字
ctx.fillRect(0, this.data.canvasHeight - this.data.bottomInfoHeight, this.data.canvasWidth, this.data.bottomInfoHeight) // 底部白色背景
// 把canvas 绘制成 图片
wx.canvasToTempFilePath({
canvas: that.data.canvas,
fileType: 'jpg',
success: function (res) {
console.log(res.tempFilePath)
that.setData({
imgSrc:res.tempFilePath,
showImg:true,
})
}
})
- 拓展阅读:
完。
大佬可否看下完整代码呢
能不能完整点
没学过前端的我啥都看不懂文档 大佬能加我如何使用uchars画报表吗