前言

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});}});}});}}});
}

总结

以上就是今天要讲的内容，本文仅仅简单介绍了uniapp生成商品分享海报和保存的方法，如果感觉保存的图片过小，可以再创建一个较大的canvas，然后不显示，保存生成的图片用较大的canvas，然后显示用小的canvas。
要是在使用中遇到问题，欢迎下方评论或者私信给我，我会及时进行解答的

uniapp生成商品分享海报相关推荐

uniapp 生成商品分享通用海报源码详解
uniapp 生成商品分享通用海报源码,使用canvas生成海报,圆片加圆角,标题换行显示两排多余点点,兼容H5端和小程序端. 组件显示代码<template><view>& ...
uniapp 生成商品海报并分享保存
uniapp 生成商品海报并分享保存 <template><view class="center"><view class="icon-it ...
使用PHP的GD库绘制电商小程序的商品分享海报
GD(代表 Graphic Draw)是一个开源代码库,在 PHP 中创建和操作图像是必需的. 除了创建 JPEG.PNG 和 GIF 图像外,它还可以创建图形.图表和缩略图. 下面的例子是PHP使用 ...
微信小程序商品分享海报
canva实现微信小程序商品分享海报前言使用canvas画布实现小程序分享海报功能一.定义一个生成海报按钮 1.点击按钮生成海报 catchtap:handleShare 使用catch绑定阻止 ...
小程序绘制海报的那些问题——记录一次uniapp小程序生成分享海报的问题及解决
最近做了一个需求,一个推广活动,在小程序中生成推广海报并且支持保存在手机相册,UI稿中呈现的是一个非全屏的固定宽高的海报图片,在保存的时候遇到了如下问题并一一解决 [问题1]开发者工具中可以正常绘制海 ...
[Java生成商品的海报图片 ]
目录前言: 生成商品海报图片需要处理两个问题: 依赖: 编写生成海报代码另一个方法: 补全上面的main测试方法: 前言: 你知道的这只是一个简单笔记...... 生成商品海报图片需要处理两个问 ...
h5页面生成图片分享到微信js_html2canvas 动态生成微信分享海报的优质js库
如何把网页上的内容用javascript来实现截图?今天分享的html2canvas就可以. 介绍在微信项目中经常会遇到动态生成海报的需求,Web前端合成图片往往会使用canvas.canvas虽然 ...
微信小程序canvas商品分享海报
先上效果图 1.wxml <button class="footer-item" bindtap="creatShareImageTap">分享&l ...
JAVA后端生成类似于分享海报图片的功能的实现
首先确定一下我们需要实现的效果图案例图核心代码如下: import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D ...

uniapp生成商品分享海报

文章目录

前言