uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈

1.html

<!-- 分享模态框 --><canvas canvas-id="poster" class="poster-canvas"></canvas><view class="share-mask" v-if="isShowShare" @click="isShowShare = false"><view class="share-container" @click.stop><u-image width="600rpx" height="600rpx" :src="goodsInfo.image" ></u-image><view class="share-til line1">{{goodsInfo.goods_name}}</view><view class="share-price">¥{{goodsInfo.price}}</view><image  class="share-code" :src="shareCode" ></image></view><view class="share-bot" @click.stop><view class="share-btns"><view class="btns-list" @click="onAppShare"><image src="/static/image/wx_icon.png" class="btn" mode=""></image><text>微信</text></view><view class="btns-list" @click="onFriendShare"><image src="/static/image/friend_icon.png" class="btn" mode=""></image><text>朋友圈</text></view><view class="btns-list" @click="onSaveImg"><image src="/static/image/save_icon.png" class="btn" mode=""></image><text>保存本地</text></view></view><view class="share-cancel" @click="isShowShare = false">取消</view></view></view>

2.js

// 创建海报createPoster() {const that = this;return new Promise((resolve, reject) => {uni.showLoading({title: '海报生成中'});const ctx = uni.createCanvasContext('poster');ctx.fillRect(0, 0, 300, 460);ctx.setFillStyle("#FFF");ctx.fillRect(0, 0, 300, 460);//商品图片下载uni.downloadFile({// url: "https://tianseapi.jujiangsoft.com/storage/images/2021_08_02/95e8dcdeac7156a38f205d5b0b71d521918.jpg",url: that.goodsInfo.image,success: (res) => {console.log('商品图片下载',res)if (res.statusCode === 200) {ctx.drawImage(res.tempFilePath, 0, 0, 300, 300);// 二维码图片下载uni.downloadFile({// url: "https://tianseapi.jujiangsoft.com/storage/images/2021_08_02/95e8dcdeac7156a38f205d5b0b71d521918.jpg",url: that.shareCode,success: (res2) => {console.log("二维码图片下载",res2);if (res2.statusCode === 200) {// 商品标题ctx.setFontSize(14);ctx.setFillStyle('#222222');ctx.fillText(that.goodsInfo.goods_name, 15, 325);// 商品价格ctx.setFontSize(18);ctx.setFillStyle('#222222');ctx.fillText('¥'+that.goodsInfo.price, 15, 368);// // 长按识别二维码访问// ctx.setFontSize(19);// ctx.setFillStyle('#333');// ctx.fillText("长按识别二维码访问", 17, textTop + 136);// // 平台名称// ctx.setFontSize(16);// ctx.setFillStyle('#999');// ctx.fillText(that.platformName, 17, textTop + 170);// 二维码ctx.drawImage(res2.tempFilePath, 196, 354, 89, 89);ctx.draw(true, () => {// canvas画布转成图片并返回图片地址uni.canvasToTempFilePath({canvasId: 'poster',width: 300,height: 460,success: (res) => {console.log("生成海报",res);resolve(res.tempFilePath);},fail: () => {uni.hideLoading();reject();}})});} else {uni.hideLoading();console.log('海报第四步')uni.showToast({title: '海报制作失败，图片下载失败',icon: 'none'});}},fail: err => {console.log('海报第三步',err)uni.hideLoading();uni.showToast({title: '海报制作失败，图片下载失败',icon: 'none'});}});} else {console.log('海报第er步')uni.hideLoading();uni.showToast({title: '海报制作失败，图片下载失败',icon: 'none'});}},fail: err => {console.log('海报第一步',err)uni.hideLoading();uni.showToast({title: '海报制作失败，图片下载失败',icon: 'none'});}});});},// 保存图片async onSaveImg() {const that = this;let imgUrl = await that.createPoster();console.log("保存图片-海报生成图片",imgUrl);// // #ifdef H5// that.h5SaveImg = imgUrl;// uni.hideLoading();// // #endif// #ifdef MP-WEIXINuni.showLoading({title: '海报下载中'});if (settingWritePhotosAlbum) {uni.getSetting({success: res => {if (res.authSetting['scope.writePhotosAlbum']) {uni.saveImageToPhotosAlbum({filePath: imgUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});} else {uni.showModal({title: '提示',content: '请先在设置页面打开“保存相册”使用权限',confirmText: '去设置',cancelText: '算了',success: data => {if (data.confirm) {uni.hideLoading();uni.openSetting();}}});}}});} else {settingWritePhotosAlbum = true;uni.authorize({scope: 'scope.writePhotosAlbum',success: () => {uni.saveImageToPhotosAlbum({filePath: imgUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});}});}// #endif// #ifdef APP-PLUSuni.showLoading({title: '海报下载中'});uni.saveImageToPhotosAlbum({filePath: imgUrl,success: () => {uni.hideLoading();uni.showToast({title: '保存成功'});}});// #endif},// 微信分享async onAppShare() {const that = this;let imgUrl = await that.createPoster();console.log("微信分享-海报生成图片",imgUrl);uni.hideLoading();// let arr = [];// arr[0] = imgUrl;// plus.share.sendWithSystem({content:'',href:'',pictures:arr}, function(){//  console.log('分享成功');// }, function(e){//  console.log('分享失败：'+JSON.stringify(e));// });uni.share({provider: 'weixin',scene: 'WXSceneSession',type: 2,// title: '你好呀',// href: 'https://www.baidu.com/',// summary: '我是图文描述',imageUrl: imgUrl,success: function(res) {console.log('success:' + JSON.stringify(res));},fail: function(err) {console.log('fail:' + JSON.stringify(err));}});},//微信朋友圈分享async onFriendShare(){const that = this;let imgUrl = await that.createPoster();console.log("微信分享-海报生成图片",imgUrl);uni.hideLoading();uni.share({provider: 'weixin',scene: 'WXSenceTimeline',type: 2,// title: '你好呀',// href: that.dataInfo.share.shareUrl,// summary: that.dataInfo.share.shareContent,// imageUrl: that.dataInfo.share.shareImg,imageUrl: imgUrl,success: function(res) {console.log('success:' + JSON.stringify(res));},fail: function(err) {console.log('fail:' + JSON.stringify(err));}});},

3.css

//分享模态框.poster-canvas {position: fixed;top: -10000rpx;left: 0rpx;width:600rpx;height:920rpx;}.share-mask{position: fixed;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);}.share-container{position: absolute;left: 75rpx;top: 100rpx;width:600rpx;height:920rpx;background: #FFFFFF;}.share-til{width: 100%;margin-top:40rpx;padding:0 30rpx;font-size: 28rpx;color: #222222;}.share-price{margin-top:50rpx;padding:0 30rpx;font-size: 28rpx;color: #222222;}.share-code{position: absolute;// right: 30rpx;// bottom: 30rpx;left: 392rpx;top: 708rpx;width: 178rpx;height: 178rpx;background-color: #fff;}.share-bot{position: absolute;left: 0;right: 0;bottom: 0;width: 100%;height: 250rpx;background: #FFFFFF;}.share-btns{display: flex;justify-content: space-around;align-items: center;width: 100%;height: 160rpx;padding: 30rpx 0;border-bottom: 1rpx solid #EEEEEE;}.btns-list{display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;height: 100%;justify-content: center;}.btn{width: 60rpx;height: 60rpx;}.share-cancel{width: 100%;font-size: 24rpx;color: #222222;line-height: 90rpx;text-align: center;}

uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈相关推荐

uniapp页面生成海报并保存和分享微信
Painter 画板 | LimeUiLimeUi - 增强型的 uni-app 组件库http://liangei.gitee.io/limeui-docs/components/painter/ ...
uniapp生成海报，保存相册 / 分享微信好友和朋友圈
<view> <u-button @click="createPoster">生成海报</u-button> <u-popup :show ...
uniapp中使用canvas生成海报
如下图,是在H5中测试,canvas生成后需要保存图片,使用uni.canvasToTempFilePath(官方文档API支持H5的)拿到绘制海报的base64,保存图片,如果提示画布被污染,看看是 ...
uni-App小程序、canvas 生成海报 +下载图片+分享微信好友
功能:分享弹窗,生成海报并支持保存,目前仅支持微信小程序 ·插件包链接 https://ext.dcloud.net.cn/plugin?id=586 代码: <template>< ...
微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
小程序uniapp利用canvas生成海报并可以保存至相册
✨uniapp实现生成海报并保存至相册组件,u-popup可以根据自己所使用的组件进行替换这里主要讲的是JS部分,css和元素相关的就不展开赘述了,下方先给大伙看看效果图,图的下方有代码讲解,最下方 ...
小程序canvas生成海报
小程序canvas生成海报,画布转图片后可直接保存图片到系统相册: 海报素材使用图片宽750px: 注: 画布转图片时参数destWidth 值须 * dpr 否则IOS测试生成的图片是模糊的: . ...
小程序中使用canvas绘制海报
最近项目需求使用canvas绘制朋友圈可分享的海报,中间遇到很多问题,于是上网搜索,完美解决后,在此总结一下. 先来看一下效果图,点击按钮生成带二维码的图片. 1.关于canvas画布的宽度和高度 w ...
小程序通过canvas生成海报保存为图片的技巧
小程序通过canvas生成海报保存为图片的技巧最近公司要求在小程序点击分享,要生成一张图片,可以保存在用户相册里,图片里的内容根据后台返回的数据生成,这就涉及到小程序画布的知识了,因为微信文档上,画 ...

uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈

uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈

uniapp项目中使用canvas生成海报并保存、微信分享、发送至朋友圈相关推荐

最新文章

热门文章