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

【uniapp】微信小程序 , 海报轮播图弹窗,点击海报保存到本地,长按海报图片分享,收藏或保存

在这里插入图片描述
uivew 2.0
uniapp 海报画板 DCloud 插件市场

第一步,下载插件并导入HbuilderX

第二步,文件内 引入 海报组件

<template><painter ref="haibaorefs"></painter>
<template>
<script>import painter from '@/components/painter.vue'export default {components: {painter},methods: {// 点击打开海报弹窗clickFun(){this.$refs.haibaorefs.open();}}
}
<script>

第三步,子组件 海报 源码, components/painter.vue 文件内容

<template><!-- 弹窗 --><u-popup :show="goodsshow" mode="center" round='26rpx' z-index='10076' bgColor='transparent' @close="goodsclose"><view class="popupbox"><view class="swiperbox"><swiper class="swiper" :indicator-dots="false" :autoplay="false" :circular="true" skip-hidden-item-layoutprevious-margin='35rpx'next-margin='35rpx'@change="swiperChange"><swiper-item v-for="(item,i) in list" :key="i"><view class="" v-if="item.coverimg"><image :src="item.coverimg" mode="" class="swiperImg"  show-menu-by-longpress></image></view><l-painterv-else@success='successFun($event,i)'isCanvasToTempFilePathpath-type="url"css="width: 600rpx;height:900rpx; box-sizing: border-box;  position: relative;"><l-painter-image :src="item.image"css="width: 600rpx;height:900rpx;border-radius: 20rpx;object-fit: cover;"/><l-painter-view css="position: absolute; bottom: 40rpx; right: 40rpx; background: #fff;  padding:10rpx 8rpx;border-radius: 10rpx; "><l-painter-image :src="erweima"css="width: 146rpx;height:143rpx;object-fit: cover;"/></l-painter-view></l-painter></swiper-item></swiper></view><view class="btnbox" @click="saveFun()"><!-- <view class="btn btn1" @click="goodsshow = false">长按识别分享海报</view> --><view class="btn btn2">保存到本地</view></view></view></u-popup>
</template><script>export default {components: {},props: {// list: {//   type: Array,//   default: null// }},data() {return {goodsshow: false,current: 0,list: [{image: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',coverimg:'', // 海报生成图片的临时地址id: 11},{image: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',coverimg:'',id: 11},{image: require('@/static/img/1.jpg'),coverimg:'',id: 11},],erweima: require('@/static/img/1.jpg')}},mounted() {},methods: {open(){this.goodsshow = true;},goodsclose() {this.goodsshow = false;},swiperChange(e) {this.current = e.detail.current;},// 接收海报临时路径successFun(e,i){console.log('接收海报临时路径',e,i)uni.getSavedFileList({success: function (res) {console.log(res.fileList);}});this.list.forEach((item,index) => {if(index == i){item.coverimg = e;}});},// 保存到本地saveFun(){let that = this;console.log(that.list[that.current].coverimg,'保存图片的临时路径和下标',this.current)uni.saveImageToPhotosAlbum({filePath: that.list[that.current].coverimg,success: function () {console.log('save success');uni.$u.toast('海报已保存到相册')}});},// 跳转navTo(url) {uni.navigateTo({url: url})},},}
</script><style lang='scss' scoped>swiper-item {/* 	display: flex;justify-content: center;align-items: center; */}.popupbox {display: flex;justify-content: center;align-items: center;flex-direction: column;.swiperbox {background-color: transparent;width: 750rpx;height: 900rpx;box-sizing: border-box;.swiper {width: 750rpx;height: 900rpx;overflow: hidden;border-radius: 20rpx;box-sizing: border-box;.swiperImg {width: 600rpx;height: 900rpx;border-radius: 20rpx;}}}.btnbox {margin: 50rpx auto 0;.btn {width: 315px;height: 96rpx;line-height: 96rpx;text-align: center;border-radius: 48rpx;font-size: 32rpx;font-weight: 500;}.btn2 {background: linear-gradient(177deg, #F2582F, #E1200B);color: #ffffff;}}}
</style>

相关文章:

【uniapp】微信小程序 , 海报轮播图弹窗,点击海报保存到本地,长按海报图片分享,收藏或保存

uivew 2.0 uniapp 海报画板 DCloud 插件市场 第一步&#xff0c;下载插件并导入HbuilderX 第二步&#xff0c;文件内 引入 海报组件 <template><painter ref"haibaorefs"></painter> <template> <script>import painter from /comp…...

SpringBoot与前端交互遇到的一些问题

一、XXX.jar中没有主清单属性 场景&#xff1a; SpringBoot打的jar包在Linux运行报错 解决方案&#xff1a; 百度找了很多都是一样的答案&#xff0c;但是解决不了我的问题&#xff0c;于是我新建了一个springboot项目发现打的jar包可以在Linux上运行。检查了下只要把下面这2个…...

Maven介绍与配置+IDEA集成Maven+使用Maven命令

目录 一、Maven简介 二、配置环境变量 三、IDEA集成Maven 1.配置本地仓库地址 2.集成Maven 3. pom.xml文件介绍 四、Maven命令 jar包太多、jar包相互依赖、不方便管理、项目编译还需要jar包&#xff0c;Maven工具来帮你&#xff01; 一、Maven简介 Maven 是 Apache 软…...

毕业设计题目源码-毕业论文参考

目录 java语言ssm框架springboot框架微信小程序jspservletmysqljspservletsqlserverssh框架springmvc框架oracle无数据库 C#/asp/net语言B/S结构 浏览器模式C/S结构 窗体模式 安卓/androidapp 客户端appweb 客户端服务端 php语言php java语言 ssm框架 题目ssm828基于java的珠…...

SSH报错-Terminal shell path: C:\WINDOWS\System32\cmd.exe 此时不应有

最近接盘了实验室的工作&#xff0c;需要重新配置连接自己的VScode的SSH远程连接服务器&#xff0c;结果配置了一个下午都没搞好&#xff0c;决定记录一下&#xff0c;希望大家避免踩坑。在vscode上遇到的是这个报错&#xff1a; 错误日志 [11:40:12.097] Checking ssh with …...

Docker 轻量级可视化工具Portainer

1. 是什么 Portainer 是一款轻量级的应用&#xff0c;它提供了图形化界面&#xff0c;用于方便地管理Docker环境&#xff0c;包括单机环境和集群环境。 2. 安装 2.1 官网 https://www.protainer.io/ https://docs.portainer.io/ce-2.9/start/install/server/docker/linux 2.2 …...

站点平台技术架构

系统架构部署思维导图 平台模块分配&#xff1a; 1.账号模块 2.权限模块 3.站点模块 4.配置模块 5.系统升级 6.日志模块 一、前期工作 1.系统保持一致性方案&#xff1a; GIT版本控制&#xff1a;通过总控端向租户端发送一个更新同步请求&#xff0c;租户端收到请求后执行GI…...

一个以太坊合约的漏洞分析-重入攻击

请找出下列合约漏洞&#xff0c;并说明如何盗取ContractB 中的数字资产&#xff0c;并修复合约。中说明&#xff1a;ContractB 的contract_a接口为ContractA 地址 pragma solidity ^0.8.21; interface ContractA {function get_price() external view returns (uint256); }int…...

测试先行:探索测试驱动开发的深层价值

引言 在软件开发的世界中,如何确保代码的质量和可维护性始终是一个核心议题。测试驱动开发(TDD)为此提供了一个答案。与传统的开发方法相比,TDD鼓励开发者从用户的角度出发,先定义期望的结果,再进行实际的开发。这种方法不仅可以确保代码满足预期的需求,还可以在整个开…...

如何用Dockerfile部署LAMP架构

目录 构建LAMP镜像&#xff08;Dockerfile&#xff09; 第一步 创建工作目录 第二步 编写dockerfile文件 Dockerfile文件配置内容 第三步 编写网页执行文件 第四步 编写启动脚本 第五步 赋权并且构建镜像 第六步 检查镜像 第七步 创建容器 第八步 浏览器测试 构建LA…...

基于量子粒子群算法(QPSO)优化LSTM的风电、负荷等时间序列预测算法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

SQL Server软件安装包分享(附安装教程)

目录 一、软件简介 二、软件下载 一、软件简介 SQL Server是一种关系型数据库管理系统&#xff0c;由美国微软公司开发。它被设计用于存储、管理和查询数据&#xff0c;被广泛应用于企业级应用、数据仓库和电子商务等场景。 以下是SQL Server软件的主要特点和功能&#xff1…...

基于Django的博客管理系统

1、克隆仓库https://gitee.com/lylinux/DjangoBlog.git 若失效&#xff1a;https://gitee.com/usutdzxy/DjangoBlog.git 2、环境安装 pip install -Ur requirements.txt3、修改djangoblog/setting.py 修改数据库配置&#xff0c;其他的步骤就按照官方文档。 DATABASES {def…...

windows系统依赖环境一键安装

window系统程序依赖库&#xff0c;可以联系我获取15958139685 脚本代码如下&#xff0c;写到1. bat文件中&#xff0c;双击直接运行&#xff0c;等待安装完成即可 Scku.exe -AVC.exe /SILENT /COMPONENTS"icons,ext\reg\shellhere,assoc,assoc_sh" /dir%1\VC...

centos7安装nacos

解决 Nacos 国内下载速度缓慢的问题 方案 1. 选择相应的版本源码下载 1.1 依次点击 1、2、3 选中我们的最新稳定版本 1.4.0 1.2 点击下载 ZIP、或者 clone 也行&#xff0c;这里都可以 2. 本地编译 2.1 预备环境准备 2.2 解压编译 3. 启动验证 3.1 解压 3.2 启动服务器 3…...

【python】python智能停车场数据分析(代码+数据集)【独一无二】

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…...

如何使用Redis来防止穿透、击穿和雪崩问题

推荐阅读 AI文本 OCR识别最佳实践 AI Gamma一键生成PPT工具直达链接 玩转cloud Studio 在线编码神器 玩转 GPU AI绘画、AI讲话、翻译,GPU点亮AI想象空间 资源分享 史上最全文档AI绘画stablediffusion资料分享 AI绘画关于SD,MJ,GPT,SDXL百科全书 「java、python面试题」…...

以getPositionList为例,查找接口函数定义及接口数据格式定义

job-app-master/pages/index/index.vue中299行 async getPositionList(type refresh, pulldown false) {this.status 请求中;if (type refresh) {this.query.page 1;} else {this.query.page;}let res await this.$apis.getPositionList(this.query);if (res) {if (type …...

一生一芯8——在github上添加ssh key

为在github上下载代码框架&#xff0c;这里在github上使用ssh key进行远程连接&#xff0c;方便代码拉取 参照博客https://blog.csdn.net/losthief/article/details/131502734 本机 系统ubuntu22.04 git 版本2.34.1 本人是第一次配置&#xff0c;没有遇到奇奇怪怪的错误&…...

2023年6月电子学会Python等级考试试卷(一级)答案解析

青少年软件编程(Python)等级考试试卷(一级) 一、单选题(共25题,共50分) 1. 可以对Python代码进行多行注释的是?( ) A. #...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...