h5保存图片到手机相册_微信小程序长按图片保存至相册

最新推荐文章于 2024-03-28 16:40:03 发布
最新推荐文章于 2024-03-28 16:40:03 发布
阅读量3.4k 收藏 2
点赞数
文章标签： h5保存图片到手机相册 js 保存图片到相册 js保存图片到手机相册 uniapp 生成二维码长按保存 vue保存图片到手机相册 vue移动端保存图片到相册
本文介绍了如何在H5和微信小程序中实现长按图片后授权并保存到手机相册的功能。用户在长按图片后，如果授权成功，通过点击‘保存到相册’按钮，图片将被保存到用户的相册。
摘要由CSDN通过智能技术生成

18f8e45df8ffe2d6e43f6e7c8c2d7493.pnga9e20592ae042679e0715f14c7f7205b.png

描述：

「长按图片」，是否授权保存图片or视频到相册，「授权成功」，点击「保存到相册」即可完成。

代码：

wxml

<image src="{
    {imgSrc}}" data-url="{
    {imgSrc}}" bindlongpress="saveImage">image>

js

Page({
      data: {
        imgSrc: 'http://img4.99114.com/group3/M00/4F/0F/rBADvVtEac-AAohzAAMH5HgHPZY230.jpg',  },  // 长按保存  saveImage(e) {
        let that = this    wx.showActionSheet({
          itemList: ['保存到相册'],      success(r
最低0.47元/天 解锁文章
weixin_39797693
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Uniapp小程序web-view嵌套H5环境，如何实现H5页面生成的图片在小程序端下载
第二世界
05-27 348
【代码】Uniapp小程序web-view嵌套H5环境，如何实现H5页面生成的图片在小程序端下载。
h5页面使用js实现保存当前图片到手机相册
weixin_30488085的博客
04-10 2万+
很可惜，这个鬼东西微信内置浏览器不适用 页面： <!doctype html> <html> <head> <meta charset="UTF-8"> <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-sc...
js 图片保存至手机相册
下雨不愁的博客
07-29 9749
var triggerEvent = "touchstart"; //指定下载方式 function savePicture(Url) { var blob = new Blob([''], { type: 'application/octet-stream' }); var url = URL.createObjectURL(blob); var a = document.cr...
实现[微信]H5长按保存图片功能
东小记的博客
10-15 2万+
通过js插件html2canvas实现 a.下载html2canvas.js（github地址：https://github.com/niklasvh/html2canvas/releases/、官网地址：http://html2canvas.hertzen.com/） b.个人需求实现 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;
微信小程序之html5 canvas绘图并保存到系统相册
11-21
开始实现之前先上个效果图   tips 1.网络图片需先配置download域名，可通过wx.getImageInfo转为临时路径； 2.个人习惯问题，我习惯使用async-await语法，所以需要引入regenerator这个库，使用方式可网上查。 一、封装通用微信api返回为Promise对象 /datas/common.js // 封装获取微信图片信息。 export const getWxImageInfo = (imgPath) => { return new Promise((resolve, reject) => { wx.getImageInfo({
移动端H5实现点击按钮保存图片到相册
a_靖的博客
03-01 3629
这是模仿uniapp中H5环境原生的预览图片组件样式，由于原生组件不支持在图片上层加自定义提示的文字，所以自己写一个简单的组件加上“长按保存/分享图片”提示文字。canvasImg 是图片地址，你自己添加或者由canvas画出来的都可以。canvas海报生成图片可以参考下面的页面代码。所以只能曲线救国，自己写一个预览图片组件，在预览的图片上面加上提示，长按保存/分享图片。方案1：微信浏览器为了安全考虑不支持执行使用代码直接保存图片到相册。方案2：不支持A标签下载。
H5页面保存图片到相册
weixin_52137798的博客
08-17 1942
不管是微信浏览器,还是ios浏览器亦或者是安卓浏览器都拥有 一个 只要是image 标签的图片 都可以长按保存到手机相册功能。所我们完全可以做一个长按弹框 把我们生成的图片展示在弹框中利用浏览器机制去实现保存图片到相册。
h5基于html2canvas实现保存图片到手机相册
最新发布
angela_ice的博客
03-28 1385
通过html2canvas实现保存图片到手机相册
h5在微信中打开长按保存图片
qdm13209211861的博客
03-10 1838
需求：邀请好友功能，根据用户id动态生成二维码，和背景图生成为一张图，长按图片后分享给好友或保存图片。 参考地址为：https://www.jianshu.com/p/abd9e9c5ba20 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分享</title> <meta name="description"
图片展示_微信小程序模板js代码前台前端H5页面源码.rar
08-09
标题中的“图片展示_微信小程序模板js代码前台前端H5页面源码.rar”表明这是一个用于创建图片展示功能的微信小程序模板，其中包含了JavaScript（js）代码以及前端H5页面的源码。这个压缩包文件“weapp-51Meizhitu-...
图片_微信小程序模板js代码前台前端H5页面源码.rar
08-09
标题中的“图片_微信小程序模板js代码前台前端H5页面源码.rar”表明这是一个关于微信小程序的源码包，其中包含用于构建图片展示的前端页面的JavaScript代码。这个压缩文件很可能是为开发者提供的一个基础框架或者...
扫描条形码_微信小程序模板js代码前台前端H5页面源码.rar
08-09
"扫描条形码_微信小程序模板js代码前台前端H5页面源码.rar" 这个标题和描述明确指出，这个压缩包包含的是一套用于微信小程序的模板，主要用于实现条形码扫描功能。这里的关键词是“条形码扫描”、“微信小程序”、...
美女福利图片_微信小程序模板js代码前台前端H5页面源码.rar
08-09
该压缩包文件“美女福利图片_微信小程序模板js代码前台前端H5页面源码.rar”包含了一套用于创建微信小程序的前端源码，主要用于展示美女福利图片。此模板集成了JavaScript（JS）代码，用于实现微信小程序的动态功能...
h5页面点击保存图片可以保存到手机相册
yingw1的博客
01-06 5391
点击下面的保存图片想要把图片保存到手机相册，
微信H5生成海报图片并保存到手机
harry_zhaoning的博客
02-22 8323
微信h5，生成海报图片，由DOM元素生成图片。
【微信H5开发】基于html2canvas实现（图文组合）图片长按即可保存（简单处理）
yxk17668的博客
11-09 4989
鉴于当前开发的功能比较简单 所以这里只涉及html5的canvas来实现功能，所以没有涉及很深的功能开发 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&am
H5保存图片到相册
weixin_58031521的博客
02-22 4995
H5保存图片到相册
H5项目打包成App后将图片保存到手机相册
weixin_69773376的博客
11-16 1286
这篇文章和(1) 的代码是一样,只是这个博主把html5 plus的网址和他自己写的demo放出来了, 我没用到,但是说不定之后会用到,就一起把他们贴出来吧。: 这里将echarts图表保存图片我用的是echarts的API – getDataURL(), getDataURL返回的是图片是base64格式的。: 这个文章的代码我是直接拿来使用的, 他利用的是html5 plus, plus可以在App上使用,在电脑浏览器上显示会报错的。(2) 将base64格式的图片转换为file文件。
h5页面点击保存图片到手机本地相册（通用，传值就能用）
热门推荐
weixin_45923100的博客
09-02 3万+
前言：本来用uniapp开发h5页面，想点击图片保存到本地，但是，uniapp并不支持这个方法，所以下面这个是通过百度找各种资源然后弄出来的方法 直接上代码，有注释： <image mode="aspectFit" :src="xxxxxx"></image> <button style="margin-top: 10px;" @click="savePic">保存到本地</button> savePic(Url){ Url = this.dialogI
h5保存图片到手机相册
06-03
要在H5页面中将图片保存到手机相册，可以使用HTML5的File API和Canvas API。下面是一个简单的示例代码： ```javascript // 获取图片URL var imgUrl = 'your_image_url'; // 创建Image对象 var img = new Image(); img.src = imgUrl; // 图片加载完成后执行 img.onload = function() { // 创建Canvas对象 var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; // 将图片绘制到Canvas上 var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); // 将Canvas转成Blob对象 canvas.toBlob(function(blob) { // 创建下载链接 var a = document.createElement('a'); a.download = 'image.png'; a.href = URL.createObjectURL(blob); // 触发下载 a.click(); // 释放URL对象 URL.revokeObjectURL(a.href); }, 'image/png'); }; ``` 以上代码会将图片转成Canvas对象，并将Canvas对象转成Blob对象，最后通过创建下载链接的方式将Blob对象下载到本地，从而实现将图片保存到手机相册的功能。需要注意的是，该代码只能在支持File API和Canvas API的浏览器中使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值