【长按图片保存到相册】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

6318

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

Vue - H5 生成带二维码和文案的宣传海报（可自定义二维码扫描后的内容、海报背景图、文案文字、宽高间距等）用 HTML 写可 DIY 的海报，做完后转为图片供用户保存和转发下载

🏆 前端领域优质创作者

08-24

2913

Vue-H5生成分享宣传海报（含自定义动态二维码和文案），Vue生成二维码分享海报并下载到本地，移动端H5分享海报(含二维码，Vue怎么生成带二维码的推广海报，用户可以长按保存与转发，可以自定义海报内容，自定义标题内容与二维码跳转路径链接文字，h5页面生成分享海报(保存图片、分享)，h5在微信生成分享海报(带二维码)，前端VueH5生成带二维码的分享海报,实现长按保存到手机，微信h5页面生成带头像和二维码的海报,分享图片，利用canvas生成二维码海报，qrcodejs2，vue2.x实现生成海报

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都可以

下载图片到本地vue3-ts

weixin_46572329的博客

06-29

1647

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

vue下载图片

Meditation_Crazy

11-29

2225

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

【http图片地址转base64】

ITyangk的博客

05-04

924

http文件转base64

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

hflxia的博客

09-09

4399

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

js通过图片url下载图片

盼盼大小姐的博客

07-03

3385

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

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

Mr_Chao的博客

07-07

4419

本文使用使用 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

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

咸煌的博客

05-11

1471

主要工具类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

1164

// 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

1428

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

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

做好一个小前端

07-09

200

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

JS 下载根据URL下载图片

zq爱生活爱代码的博客

01-03

844

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

js根据url直接下载图片

夜空繁星VV

04-28

3377

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

js根据url实现下载图片功能

m0_50864962的博客

11-23

1344

js根据url实现下载图片功能 const downImage = (imgsrc) => { var image = new Image(); image.src = imgsrc + '?v=' + Math.random(); // 处理缓存 image.crossOrigin = '*';// 支持跨域图片 image.onload = function () { var canvas = document.createElement('

js 根据URL下载图片文件等

qq_42560402的博客

08-16

3922

代码】js 根据URL下载图片文件等。

js 下载文件（根据URL下载文件,根据URL下载图片）

朝阳39的博客

08-13

2263

根据URL下载图片 // 根据URL下载图片 function downloadImgURL(url, name) { let image = new Image(); image.setAttribute("crossOrigin", "anonymous"); image.src = url; image.onload = () => { let canvas = document.crea.

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