【长按图片保存到相册】Vue移动端H5页面实现长按图片保存到手机功能

原创

已于 2022-12-07 14:26:36 修改 · 5.6k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

于 2022-12-07 14:24:07 首次发布

本文介绍了一种在移动端实现长按保存图片到相册的方法，通过触摸事件监听结合Canvas绘制图片并导出为Base64编码，实现了跨平台的支持，包括H5网页和Web应用。

移动端、H5长按保存到相册、web端长按自行选择保存位置

先上效果图

在这里插入图片描述

2.源码

<template>
  <div class="save-file">
    <div class="img-main" @touchstart="touchStart()" @touchend="touchEnd()">
      <img :src="qrcodeUrl" alt="">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端大斗师

关注关注

9
点赞
踩
24

收藏

觉得还不错? 一键收藏
7
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue2 | vue3 - 解决html2canvas苹果ios系统保存图片到相册空白问题，真机IOS系统动态截图无法保存到相册或白屏，vue html2canvas ios系统保存图片空白啥也不显示

高级前端工程师

10-24

6328

vue2，vue3，html2canvas，苹果ios系统，保存到相册失败，保存至相册发现是一张白图，如何解决html2canvas动态图片ios空白,html2canvas ios系统保存图片空白问题，部分iphone手机机型出现空白，生成图片后使用html2canvas截图时回显的照片是空白的，保存到相册报错，解决低版本ios使用html2canvas截图空白问题，ios系统保存图片空白问题，在ios13版本生成图片失效，保存的图片空白，使用html2canvas截图/保存图片到手机相册时出现空白图片的

微信公众号 - 禁用 H5 网页长按图片时弹出的菜单（转发给朋友 / 保存到手机 / 收藏 / 搜一搜），苹果安卓系统都可暴力 100% 完美禁用菜单，任何前端框架、任何浏览器都适用的解决方案

🏆 前端领域优质创作者

02-16

6158

微信公众号网页H5禁用长按弹出的菜单，uniappvue项目H5网页在微信浏览器怎么禁用长按图片弹出的菜单，微信公众平台禁用微信h5的长按弹窗，禁用h5页面中长按图片弹出的弹层，reactvueuniapp网页H5怎么禁止微信公众号h5页面长按弹出菜单，前端公众号网页如何禁用长按图片显示的菜单，H5网站微信公众号页面禁止长按弹出系统菜单,兼容ios和安卓，微信公众号h5页面图片长按问题，彻底解决H5页面中长按保存图片，HTML5网页公众号移动端网页怎么把长按图片弹出的菜单去掉，微信公众号-禁用

7 条评论您还未登录，请先登录后发表或查看评论

8 条评论

Lfy_TT 2025.07.21
手机上浏览器能使用么

又见薰烟 2025.01.07
qrcodeUrl64 请问这个是做什么的？是需要吧http转成base64再保存吗？

Wayne_Brando 2023.09.22
我试了一下，app跳转webview，ios可以长按保存，但是安卓不行，求指教

妹妹你大胆地往前走啊！ 2023.07.21
只支持在浏览器下载吧，在原生的webview可以吗

ZforikX127 2023.05.29
小米浏览器下载失败

2023.04.27
为什么直接跳转到一个图片文件的[face]emoji:054.png[/face]

apinkyday 2023.01.28
支持安卓吗
- 前端大斗师回复apinkyday 2023.01.29
  ios Android都可以

vue生成图片保存到本地

xniYa的博客

06-25

1263

【代码】vue生成图片保存到本地。

使用JavaScript下载图片并保存到本地，超详细

qq_45094682的博客

04-07

2520

将选中的图片下载到本地 1.先获取到图片信息 2.设置图片信息 3.图片下载实现原理解释

VUE微信H5生成二维码海报保存在本地相册

yuanqi3131的博客

06-06

5072

公司需求：宣传海报从后台获取，二维码地址也从后台获得，然后生成一个海报，海报上固定位置放二维码，长按图片可以保存在本地相册(其实前面的需求是点击按钮，下载海报图到本地相册，然后h5下载的实现原理是生成一个a标签链接，然后下载，在电脑模拟器可以下载，在微信浏览器一点反应没有，所以退一步，长按保存),下面是使用版本，UI插件用的是vant(有赞)vue：“^2.6.11”,“html2canvas”: “1.4.1”,“vant”: “^2.8.1”，“vue_qrcodes”: “^1.1.3”从后端获取海报

vue下载图片

Meditation_Crazy

11-29

2227

主要内容 downloadIamge(imgsrc, name) {//下载图片地址和图片名 var image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { var canvas = doc...

【http图片地址转base64】

ITyangk的博客

05-04

929

http文件转base64

移动端 h5页面长安保存图片到手机

Mr_Chao的博客

07-07

4421

本文使用使用 html2canvas.min.js 插件业务需要，这里我先将图片转译为base64,然后项html 片段替换为绘制的 img图片 // An highlighted block //手指长按事件 var timeOutEvent; document.querySelector("#share-qr-content").addEventListener("touchstart", function (e) { //开启定时器前先清除定时器，防止

前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册

热门推荐

cd13849109771的博客

10-26

1万+

前端Vue H5生成带二维码的分享海报，实现长按保存到手机相册前言：关于H5分享海报的需求，经常会遇到，通常就是一个分享的二维码+分享文案，生成一张图片，供用户在手机上长按保存到手机，然后就可以将保存的图片发给别人，实现扫码进入分享页，从而实现分佣、引流等目的。目标海报：实现思路步骤： a：二维码的生成； b：图片的生成； c：用户可长按的同时不影响查看分享效果（即当分享海报较长时，可以滚动查看）。根据上述思路步骤： 1，使用qrcodejs2生成二维码；安装： npm install qr

下载图片到本地vue3-ts

weixin_46572329的博客

06-29

1650

vue3下载图片到本地公共放法

vue 生成海报，解决跨域问题，下载图片到本地

hflxia的博客

09-09

4402

// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...

js通过图片url下载图片

盼盼大小姐的博客

07-03

3390

项目中遇到前端获取到图片外部url，使用该url完成图片下载功能，涉及到跨域下载。

【Java】http/https/ftp路径的图片转base64

咸煌的博客

05-11

1474

主要工具类ImageUtil.java ：提供图片url转base64功能 @Slf4j public class ImageUtil { // 图片url转base64 public static String transToBase64(String url, String charsetName) { byte[] data = getImageFromUrl(url, charsetName); return org.apache.commons.codec.binary.Base64.

h5写长按保存图片到手机相册

yzxzxf的博客

12-19

6529

h5写长按保存图片到手机相册话不多说直接上代码首先引入html2canvas import html2canvas from ‘html2canvas’ <div> //模板部分 <div class="contents"> <img src="./img/psb.jpg" alt="" class="imgs"> </di...

js 根据url 下载图片

吴冬雪的博客

07-06

1166

// js 根据url 下载图片 export const downloadIamge = (imgsrc, name) => { // 下载图片地址和图片名 let image = new Image() // 解决跨域 Canvas 污染问题 image.setAttribute('crossOrigin', 'anonymous') image.onload = function () { let canvas = document.createElement('can.

通过url下载文件或图片js

wonderfulgood的博客

03-26

1438

response.msg 示例为 unzip/163/518/20240124-144926562000/7feb94adde1e45fcb634800744b4a38c.jpg。要下载图片，必须创建GET请求并将图片的URL作为请求的URL。示例为下载pdf,更换其他类型文件注意更换blob的type。2、当请求成功后，需要将响应数据保存为图片文件。1、向服务器发送HTTP请求并获取响应。

前端js根据一个图片地址下载保存图片

做好一个小前端

07-09

204

前端js根据一个图片地址下载保存图片

JS 下载根据URL下载图片

zq爱生活爱代码的博客

01-03

845

download(src){ var$a=$("<a></a>").attr("href",src).attr("download","img.png"); $a[0].click(); }

js根据url直接下载图片

夜空繁星VV

04-28

3378

function downloadIamge(imgsrc, name) {//下载图片地址和图片名 let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function() { let canvas = document.createElement("canvas");

ios 前端实现保存图片到手机相册里面vue