h5页面点击保存图片可以保存到手机相册

2023-11-15

3924f54ef9fc4c01ba3317a547553226.png

 如图,点击下面的保存图片想要把图片保存到手机相册,

 <div class="saveImg" @click="savePic">保存图片</div>
   savePic(Url) {
        Url = this.imgURL //图片路径,也可以传值进来
        var triggerEvent = "touchstart"; //指定下载方式
        var blob = new Blob([''], { type: 'application/octet-stream' }); //二进制大型对象blob
       var url = URL.createObjectURL(blob); //创建一个字符串路径空位
       var a = document.createElement('a'); //创建一个 a 标签
        a.href = Url;  //把路径赋到a标签的href上
      //正则表达式,这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本
       a.download = Url.replace(/(.*\/)*([^.]+.*)/ig, "$2").split("?")[0];
      /* var e = document.createEvent('MouseEvents');  //创建事件(MouseEvents鼠标事件)
     e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件(initMouseEvent已弃用)*/
      //代替方法。创建鼠标事件并初始化(后面这些参数我也不清楚,参考文档吧https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent)
    var e = new MouseEvent('click', (true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));
   //派遣后,它将不再执行任何操作。执行保存到本地
     a.dispatchEvent(e);
   //释放一个已经存在的路径(有创建createObjectURL就要释放revokeObjectURL)             
     URL.revokeObjectURL(url);
                },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

h5页面点击保存图片可以保存到手机相册 的相关文章

  • jquery 验证错误位置

    这看起来很简单 但我无法弄清楚 我正在使用 jquery 验证插件 我验证所有文件 但我想要的是在输入文本行中显示验证消息警报 例如在电子邮件输入中 请填写电子邮件地址 但现在它出现在所有字段下 在我的html中
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • Ember.js 处理 View 事件后转换到路由

    Setup 我有一个 Ember 应用程序 支持使用 Imgur API 上传图像 我已经有一个工作路线和模板来处理任何 Imgur ID 但我想在上传新图像后转换到此路线 使用返回的 Imgur ID 这是该应用程序的相关部分 http
  • 是否可以使用 javascript 测试用户的浏览器/操作系统是否支持给定类型的链接?

    是否可以使用 javascript 或其他任何东西 测试用户的操作系统 浏览器是否支持给定的 url 方案 例如 大多数仅使用网络邮件的用户计算机上未设置 mailto 是否有可能以某种方式捕获单击 mailto 链接的尝试并弹出比浏览器错
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 按百分比设置 bootstrap 模态身高

    我正在尝试制作一个带有主体的模态 当内容变得太大时 该主体会滚动 但是 我希望模式能够响应屏幕尺寸 当我将最大高度设置为 40 时 它没有任何效果 但是 如果我将最大高度设置为 400px 它会按预期工作 但不会响应 我确信我只是错过了一些
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • JavaScript 中数组的 HTML 数据列表值

    我有一个简单的程序 它必须从服务器上的文本文件中获取值 然后将数据列表填充为输入文本字段中的选择 为此 我想要采取的第一步是我想知道如何动态地将 JavaScript 数组用作数据列表选项 我的代码是
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 如何在 Angular 中从父组件访问子组件?

    I have mat paginator在子组件a中 如下所示 子组件 html
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • 如何使JavaScript函数在Eclipse“大纲视图”中可见?

    我有这样的代码 但如果它在匿名函数中定义 则无法打开函数大纲 类没有问题 我该如何概述something2 请分享一些提示 我可以将所有函数标记为构造函数 但这是无效的方法 start of track event required deb
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • 将 javascript 整数转换为字节数组并返回

    function intFromBytes x var val 0 for var i 0 i lt x length i val x i if i lt x length 1 val val lt lt 8 return val func
  • 如果数字小于 10,则显示前导零 [重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 相当于 printf string format https stackoverflow com questions 610406 javascript equivalent t
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 防止文本区域出现新行

    我正在开发聊天功能 使用 Vue 并使用文本区域作为输入 以便溢出换行 并且对于编写较长消息的用户来说更具可读性 不幸的是 当用户按下 Enter 键并提交时 光标会在提交之前移动到新行 从而使用户体验感觉不佳 关于如何使用普通 Javas
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • 面向小白的最全Python可视化教程,超全的

    今天小编总结归纳了若干个常用的可视化图表 并且通过调用plotly matplotlib altair bokeh和seaborn等模块来分别绘制这些常用的可视化图表 最后无论是绘制可视化的代码 还是会指出来的结果都会通过调用streaml
  • Vue3全网最细介绍使用

    文章目录 一 Vue3介绍 二 Vue3项目创建 三 Setup 四 ref与reactive 五 setup context 六 计算属性 七 监听属性 八 Vue3生命周期 九 自定义hook函数 十 toRef 一 Vue3介绍 1
  • 思科命令配置总结

    Packet tracer 6 0 交换机命令配置 1 基本配置 Switch gt enable 用户模式 Switch configure terminal 特权模式 Switch config 全局模式 Switch config h
  • SDN-Mininet模拟多数据中心带宽实验

    一 实验目的 通过Mininet模拟搭建基于不同数据中心的网络拓扑 掌握多数据中心网络拓扑的构建 熟悉网络性能测试工具lperf 根据实验测试SDN网络的性能 通过程序生成真实网络流量 二 数据中心拓扑逻辑网络 存在线路冗余 多条链路可达
  • C语言提取(key,value)键值对

    include stdio h include stdlib h include string h 去除空格 int trim str char inBuf char outBuf int i 0 j strlen inBuf 1 int
  • nginx 之正则表达式(一)

    1 元字符 匹配除换行符以外的任意字符 w 匹配字母或数字或下划线或汉字 s 匹配任意的空白符 d 匹配数字 b 匹配单词的开始或结束 匹配字符串的开始 匹配字符串的结束 2 重复 重复零次或多次 重复一次或多次 重复零次或一次 n 重复n
  • FTP被动模式连接被拒绝(FTP passive mode connection refused)

    I m creating an ftp client and I have a problem First I create a socket where I sent USER and PASS then PASV a receive I
  • 软件工程 第一章 软件工程概述

    1 什么是软件 软件是计算机系统中与硬件相互依存的另一部分 它是包括程序 数据及其相关文档的完整集合 程序 按事先设计的功能和性能需求执行的指令序列 数据 程序能正常操纵信息的数据结构 gt 软件的核心 文档 与程序开发 维护和使用有关的图
  • Java中Stream详细使用教程

    1 java8中Stream流以及lambda的使用 stream可以将需要处理的集合元素看做流操作 是结合对象功能的一个增强 lambda表达式与stream结合使用 可以更好的对集合进行遍历 筛选 排序 聚合 分组 stream特性 不
  • Google Chrome浏览器无法翻译网页怎么办?

    最近喜欢上了一个数据分析的python脚本 可以直接出html版的数据分析报告 但是指标都是英文的 实在是看不懂 就想到了要用网页翻译这个功能 但是发现chrome浏览器不能翻译了 找了很多办法都没有解决 也是找了很久 尝试着找扩展属性包
  • mysql多表查询--实例

    1 创建student和score表 CREATE TABLE student id INT 10 NOT NULL UNIQUE PRIMARY KEY name VARCHAR 20 NOT NULL sex VARCHAR 4 bir
  • matinal:SAP ABAP 生成XML的例子

    REPORT ZXML A SET EXTENDED CHECK OFF TYPE POOLS IXML Report T DOM MANIPULATE shows how to manipulate a dom tree
  • 编译kernel-2.6.38提示错误:Compile error in arch/x86/kernel/entry_64.S

    make 1 katalog home thue linux 2 6 37 4 CHK include linux version h CHK include generated utsrelease h CALL scripts chec
  • IAR查看两断点之间执行时间

    IAR查看两断点之间执行时间 veiw gt register查看 veiw gt register查看 IAR官网原文链接
  • VBA基本语法整理

    转自 http www zjmainstay cn vba usage 1 VBA 局部变量和全局变量 1 局部变量 在Sub或者Function结构中定义的变量 通常使用Dim关键词来声明 但是可以不声明使用 不报错 2 全局变量 在Su
  • Qt中窗体控件按照比例缩放,自适应窗口大小进行布局

    最近在做本科毕设 用到了Qt 无奈本人实在是太过于小白了 很多东西都进行了很久的探索 比如今天说到的窗体控件布局 一把辛酸泪 首先就是创建一个GUI文件 然后进行UI设计 这里就只需要从左边进行拖拽 这个很easy啦 然后对其进行布局 比如
  • facebook大数据搜索库faiss使用——选择Index

    选择Index并不明显 有几个问题可以帮助选择Index 是否需要精确结果 使用Flat IndexFlat2是唯一能保证精确结果的Index 它为其他Index提供了对比标准 它不会压缩向量 不支持带标签添加 只能顺序添加 所以 如果你需
  • java批量生成订单号_Java技术干货分享:浅谈订单号生成设计方案

    最简单的方式 基于数据库 auto increment increment 来获取 ID 首先在数据库中创建一张 sequence 表 其中 seq name 用以区分不同业务标识 从而实现支持多种业务场景下的自增 ID current v
  • 【机器学习】支持向量回归

    有任何的书写错误 排版错误 概念错误等 希望大家包含指正 在阅读本篇之前建议先学习 机器学习 支持向量机 上 硬间隔 机器学习 支持向量机 下 软间隔与核函数 支持向量回归 支持向量回归 support vector regression
  • h5页面点击保存图片可以保存到手机相册

    如图 点击下面的保存图片想要把图片保存到手机相册 div class saveImg 保存图片 div savePic Url Url this imgURL 图片路径 也可以传值进来 var triggerEvent touchstart