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

在这里插入图片描述

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/45797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WPF入门到精通:1.新建项目及项目结构

WPF&#xff08;Windows Presentation Foundation&#xff09;是一种用于创建 Windows 应用程序的技术&#xff0c;它可以通过 XAML&#xff08;Extensible Application Markup Language&#xff09;和 C# 或其他 .NET 语言来实现。WPF 提供了许多强大的 UI 控件和样式&#xf…

Azure虚拟网络对等互连

什么是Azure虚拟网络对等互联 Azure虚拟网络对等互联&#xff08;Azure Virtual Network peering&#xff09;是一种连接两个虚拟网络的方法&#xff0c;使得这两个虚拟网络能够在同一地理区域内进行通信。它通过私有IP地址在虚拟网络之间建立网络连接&#xff0c;不论是在同一…

星际争霸之小霸王之小蜜蜂(四)--事件监听-让小蜜蜂动起来

目录 前言 一、监听按键并作出判断 二、持续移动 三、左右移动 总结&#xff1a; 前言 今天开始正式操控我们的小蜜蜂了&#xff0c;之前学java的时候是有一个函数监听鼠标和键盘的操作&#xff0c;我们通过传过来不同的值进行判断&#xff0c;现在来看看python是否一样的实现…

SpringMVC之异常处理

SpringMVC之异常处理 异常分为编译时异常和运行时异常&#xff0c;编译时异常我们trycatch捕获&#xff0c;捕获后自行处理&#xff0c;而运行时异常是不可预期的&#xff0c;就需要规范编码来避免&#xff0c;在SpringMVC中&#xff0c;不管是编译异常还是运行时异常&#xff…

2023面试八股文 ——Java基础知识

Java基础知识 一.Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性&#xff1f;原理是什么Java语言有哪些特点什么是字节码&#xff1f;采用字节码的大好处是什么什么是Java程序的主类&#xff1f;应用程序和小程序的主类有何不同&#xff1f…

漏洞指北-VulFocus靶场专栏-初级01

漏洞指北-VulFocus靶场专栏-初级 初级001 &#x1f338;海洋CMS代码执行&#xff08;CNVD-2020-22721&#x1f338;step1&#xff1a;进入后台页面 账号密码&#xff1a;admin amdinstep2&#xff1a;点击系统&#xff0c;点击后台IP安全设置,关闭step3 启动burpsuite&#xff…

一百五十九、Kettle——Kettle9.2通过配置Hadoop clusters连接Hadoop3.1.3(踩坑亲测、附流程截图)

一、目的 由于kettle的任务需要用到Hadoop&#xff08;HDFS&#xff09;&#xff0c;所以就要连接Hadoop服务。 之前使用的是kettle9.3&#xff0c;由于在kettle新官网以及博客百度等渠道实在找不到shims的驱动包&#xff0c;无奈换成了kettle9.2&#xff0c;kettle9.2的安装…

设计模式之迭代器模式(Iterator)的C++实现

1、迭代器模式的提出 在软件开发过程中&#xff0c;操作的集合对象内部结构常常变化&#xff0c;在访问这些对象元素的同时&#xff0c;也要保证对象内部的封装性。迭代器模式提供了一种利用面向对象的遍历方法来遍历对象元素。迭代器模式通过抽象一个迭代器类&#xff0c;不同…

16----公式

本节我们来学习如何在markdown中打印公式 Markdown是一种轻量级标记语言&#xff0c;常用于撰写文档、博客和论坛帖子。虽然Markdown本身并不支持数学公式&#xff0c;但可以使用一些扩展来实现公式的显示。在支持公式扩展的 Markdown 解析器中&#xff0c;我们可以使用 Katex …

AE-卡通人物解说动画视频的制作

目录 1.导入卡通人物图片和音频文件 2.新建合成 3.在卡通人物图片上添加效果和表达式 4.在音频文件上添加效果和表达式 5.将卡通人物中的 CC Split2 中分割1 表达式链接到滑块中 6.卡通人物根据音频文件自动匹配口型。 AE制作卡通人物解说视频&#xff0c;卡通人物口型根据…

岩土工程安全监测隧道中使用振弦采集仪注意要点?

岩土工程安全监测隧道中使用振弦采集仪注意要点&#xff1f; 岩土工程的安全监测是非常重要的&#xff0c;它可以帮助工程师及时发现可能存在的问题&#xff0c;并及时解决&#xff0c;保障施工进度以及施工质量&#xff0c;保障工程的安全运行。其中&#xff0c;振弦采集仪是…

04_18内存反碎片技术,什么时候适合进行内存碎片整理

前言 内存碎片分为内部碎片和外部碎片&#xff0c;内部碎片指内存页里面的碎片&#xff0c;外部碎片指空闲的内存页分散&#xff0c;很难找到一组物理地址连续的空间内存页&#xff0c;无法满足超过一页的内存分配请求。 虚拟可移动区域 可移动区域&#xff08;ZONE_MOVABLE…

JVM性能分析-jstat工具观察gc频率

jstat jstat是java自带的工具&#xff0c;在bin目录下 用法 语法&#xff1a;jstat -<option> [-t] [-h<lines>] <vmid> [<interval> [<count>]] [kqkyyj-2 bin]$ jstat -help Usage: jstat -help|-optionsjstat -<option> [-t] [-h&l…

【Spring Boot 源码学习】自动装配流程源码解析(下)

自动装配流程源码解析&#xff08;下&#xff09; 引言往期内容主要内容4. 排除指定自动配置组件5. 过滤自动配置组件6. 触发自动配置事件 总结 引言 上篇博文&#xff0c;笔者带大家了解了自动装配流程中有关自动配置加载的流程&#xff1b; 本篇将介绍自动装配流程剩余的内…

vs2022配置opencv进行监控 c++

下载opencv文件 下载好的目录结构是 以上就是用到的文件和目录 在vs2022配置 最后&#xff1a;此处运行提示找不到 opencv_world480.dll 解决办法&#xff1a;直接从 复制到windows下

“SRP模型+”多技术融合在生态环境脆弱性评价模型构建、时空格局演变分析与RSEI 指数的生态质量评价

近年来&#xff0c;国内外学者在生态系统的敏感性、适应能力和潜在影响等方面开展了大量的生态脆弱性研究&#xff0c;他们普遍将生态脆弱性概念与农牧交错带、喀斯特地区、黄土高原区、流域、城市等相结合&#xff0c;评价不同类型研究区的生态脆弱特征&#xff0c;其研究内容…

vue + vue-office 实现多种文件(docx、excel、pdf)的预览

支持多种文件( docx、excel、pdf)预览的vue组件库&#xff0c;支持vue2/3。也支持非Vue框架的预览。 github: 《仓库地址》 演 示&#xff1a; 《演示效果》 功能特色 一站式&#xff1a;提供docx、pdf、excel多种文档的在线预览方案&#xff0c;有它就够了简单&#xff1a…

泰迪大数据挖掘建模平台功能特色介绍

大数据挖掘建模平台面相高校、企业级别用户快速进行数据处理的建模工具。 大数据挖掘建模平台介绍 平台底层算法基于R语言、Python、Spark等引擎&#xff0c;使用JAVA语言开发&#xff0c;采用 B/S 结构&#xff0c;用户无需下载客户端&#xff0c;可直接通过浏览器进行…

mac上如何压缩视频大小?

mac上如何压缩视频大小&#xff1f;由于视频文件体积庞大&#xff0c;常常会占据我们设备的大量存储空间。通常情况下&#xff0c;我们选择删除视频以释放内存&#xff0c;但这将永久丢失它们。然而&#xff0c;有一种更好的方法可以在不删除视频的情况下减小内存占用&#xff…

C语言小白急救 指针初级讲解(四千字教程)

系列文章目录 C语言小白急救 表达式求值&#xff08;两千字教程&#xff09; C语言小白急救 操作符详解(8千字保姆级教程) C语言小白急救 扫雷游戏&#xff08;万字保姆级教程&#xff09; C语言小白急救 使用C语言编写‘三子棋‘ 文章目录 系列文章目录[C语言小白急救 表达式…