当前位置：首页 > news >正文

uniapp 微信小程序绘制海报，长按图片分享，保存海报

news 2025/8/24 15:11:17

在这里插入图片描述

uView UI 2.0
dcloud 插件市场地址

弹窗海报源码

<template><!-- 推荐商品弹窗 --><u-popup :show="haibaoShow" mode="center" round='26rpx' z-index='10076' bgColor='transparent' safeAreaInsetTop  @close="goodsclose"><image v-if="picture2" :src="picture2" mode="widthFix" show-menu-by-longpress></image><l-painter v-else@done='successFun'isCanvasToTempFilePathpath-type="url"ref="painter"css="width: 600rpx; padding-bottom: 50rpx; background: #FFFFFF;padding:30rpx;border-radius: 20rpx; box-sizing: border-box;"><l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"css="width: 540rpx;height:540rpx;border-radius: 10rpx;object-fit: cover;"/><l-painter-view css="background: #fff; display:flex;align-item:center;justify-content: space-between; padding-top:25rpx;"><l-painter-view css="width:335rpx" ><l-painter-text  css="font-size: 24rpx;font-weight: 500;color: #CA273D; 	display: block;"  text="￥12.00" /><l-painter-text  css="font-size: 26rpx;font-weight: 500;color: #333333;margin-top:18rpx;display: block;" text="米菲兔超薄尿不湿"/><l-painter-text  css="font-size: 24rpx;color: #666666;margin-top:15rpx;	display: block;" text='菲兔超薄尿不湿米菲兔超薄尿不湿简介米菲兔超 薄尿不湿简介米菲兔超薄尿 '/></l-painter-view><l-painter-view css="width:155rpx" ><l-painter-image src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"css="width: 146rpx; height: 143rpx; object-fit: cover;padding:10rpx 8rpx; border:2rpx solid #eee;border-radius:10rpx;"/><l-painter-text  css="font-size: 24rpx;color: #666666;margin-top:15rpx;	display: block;" text='长按图片分享微信好友 '/></l-painter-view></l-painter-view></l-painter><view class="btnbox u-flex-around"><!-- <view class="btn btn1">长按图片分享微信好友</view> --><view class="btn btn2" @click="saveFun">保存到本地</view></view></u-popup>
</template><script>// import {//   apigoods,// 	cartlist,// 	addcart//  } from "@/api/index/index.js"export default {components: {},props: {// list: {//   type: Array,//   default: null// }},data() {return {picture2: '',haibaoShow: false,img:'https://cdn.uviewui.com/uview/swiper/swiper3.png',list: [{ image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png', name: '春日写真春日写真春日写真春日写真春日写真春日写真春日写真春日写真春日写真',price: '123.00',id: 11},],}},mounted() {// this.getlist();},methods:{open(){this.haibaoShow = true;},getlist(){let data = {page:1,limit:9999}apigoods(data).then(res => {this.list = res.data;});},goodsclose(){this.haibaoShow = false;},// 绘制完成后，生成图片successFun(){console.log('绘制完成-=-=-=-')this.$refs.painter.canvasToTempFilePathSync({fileType: "jpg",// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为urlpathType: 'url',quality: 1,success: (res) => {this.picture2 = res.tempFilePath;},});},// 保存到本地saveFun(){let that = this;uni.saveImageToPhotosAlbum({filePath: that.picture2,success: function () {console.log('save success');uni.$u.toast('海报已保存到相册')}});}},}
</script><style lang='scss' scoped>.btnbox{width: 570rpx;margin: 64rpx auto 0;.btn{width: 250px;height: 70rpx;line-height: 70rpx;text-align: center;border-radius: 35rpx;font-size: 30rpx;color: #ffffff;}.btn1{background: linear-gradient(88deg, #FFB72C, #F98517);margin-right:30rpx;}.btn2{background: linear-gradient(177deg, #F2582F, #E1200B);}}
</style>