前言

uniapp用canvas生成一个分享商品的海报，因为用到了uni.downloadFile这个API，所以要注意图片在H5端跨域的问题。

以下是本篇文章正文内容

一、展示效果

大致效果就是这样，点击生成海报的按钮，会用canvas生成一张海报，长按可以保存到手机上。

在这里插入图片描述

二、使用步骤

1.HTML部分

代码如下：

<!-- 生成海报的点击事件 -->
<view @click="generatePoster">点击分享</view><!-- 生成海报的canvas -->
<view class="my-canvas-box" @touchmove.stop.prevent :class="posterInfo.status ? 'show' : 'hide'" @click="posterInfo.status = false"><canvas class="my-canvas" canvas-id="myCanvas" @longpress.stop="saveSharePic"></canvas><view class="canvas-tip">长按可保存海报</view>
</view>

@touchmove.stop.prevent这个是用来阻止滑动事件的，这个canvas显示的时候，不会让下面的内容滑动
@click="posterInfo.status = false"这个点击事件是点击空白的区域，关闭生成的海报遮罩
@longpress.stop="saveSharePic"这个方法是长按进行保存生成的海报

2.CSS部分

代码如下：

.my-canvas-box {width: 750rpx;height: 100%;position: fixed;background-color: rgba(0, 0, 0, 0.6);z-index: 99;&.hide {display: none;}&.show {display: block;}.canvas-tip {color: #ffffff;font-size: 24rpx;margin-top: 30rpx;text-align: center;}/* #ifdef MP-WEIXIN */.my-canvas {width: 550rpx;height: 950rpx;background-color: #ffffff;margin: 200rpx auto;}/* #endif *//* #ifdef APP-PLUS || H5 */.my-canvas {width: 550rpx;height: 950rpx;background-color: #ffffff;margin-top: 220rpx auto;}/* #endif */
}

css这部分就没什么好说的了，就是一些样式的展示效果
注意的是.my-canvas这个样式是控制显示白色canvas主体的样式，可以根据自己的实际需求修改大小
样式用了scss，如果报错，记得修改一下

3.JS部分

代码如下：
data部分

data(){return{// 用来控制canvas遮罩层的显示与隐藏posterInfo: {status: false,}}
}

methods部分

// 生成海报
generatePoster() {// 这里是创建 canvas 绘图上下文let context = uni.createCanvasContext('myCanvas');// 这里可以根据自己的需求显示加载动画uni.showToast({title: '正在生成海报，请稍后',icon: 'none',duration: 3000});// 小程序码图片，下面可以放一个请求，来保存小程序码。然后赋值到qrImg这个变量上面let qrImg = '';// 给整个canvas填充白色背景（这个如果不加上的话，在APP端生成的海报没有白色背景）context.setFillStyle('#ffffff');context.fillRect(0, 0, 500, 900);context.draw();// 绘制用户昵称context.setFontSize(14);context.setFillStyle('#000000');// 这里根据自己的项目填写用户昵称的字段context.fillText('用户的昵称', 100, 48);context.setFontSize(12);context.setFillStyle('#999999');context.fillText('的分享', 100, 68);// 绘制价格context.setFontSize(18);context.setFillStyle('red');context.fillText(`￥199`, 20, 366);// 绘制商品名称，这里是调用一个方法，按字符串长度进行分割换行。【可以做一个优化】this.drawText(this.goodsInfo.title, 20, 379, context);// 绘制头像uni.downloadFile({url: '用户的头像地址（一定要是网络路径）',success: function(res) {context.save();// 这个就是绘制圆形头像context.beginPath();context.arc(50, 50, 30, 0, 2 * Math.PI)context.clip();context.drawImage(res.tempFilePath, 20, 20, 60, 60);context.restore();context.draw(true);}});// 绘制商品详情uni.downloadFile({url: '商品的图片网络地址',success: function(res) {context.drawImage(res.tempFilePath, 15, 92, 245, 245);context.draw(true);}});// 绘制小程序码uni.downloadFile({// 这个qrImg就是上面获取的小程序码url: qrImg,success: function(res) {context.drawImage(res.tempFilePath, 165, 360, 100, 100);context.draw(true);}});// 绘制完成，让canvas显示【这里看自己项目，是否有loading动画】this.posterInfo.status = true;
},
// 商品名称文字换行
drawText(context, x, y, canvas) {let strArr = [];let n = 11;for (let i = 0, l = context.length; i < l / n; i++) {let a = context.slice(n * i, n * (i + 1));strArr.push(a);}strArr.forEach((item, index) => {// 限制只能显示4行文字if (index > 3) {return;}y += 20;canvas.setFontSize(12);canvas.setFillStyle('#333333');canvas.fillText(item, x, y);});
},
// 长按保存生成的海报
saveSharePic() {uni.showModal({title: '提示',content: '确定要保存分享海报吗？',success: function(res) {if (res.confirm) {// canvas生成图片uni.canvasToTempFilePath({// 这里修改保存的图片格式fileType: 'jpg',canvasId: 'myCanvas',quality: 1,success: function(res) {// 保存带哦本地uni.saveImageToPhotosAlbum({filePath: res.tempFilePath,success: function() {uni.showToast({title: '保存海报成功',icon: 'none',duration: 3000});},fail: function() {uni.showToast({title: '保存海报失败',icon: 'none',duration: 3000});}});}});}}});
}