h5保存图片

最新推荐文章于 2024-03-01 17:22:45 发布
最新推荐文章于 2024-03-01 17:22:45 发布
阅读量1.8k 收藏 8
点赞数 6
分类专栏： h5 文章标签： h5保存图片 css保存图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43992658/article/details/102564213
版权

之前做过保存图片到本地的例子，当时主要是需要动态生成二维码，然后可以使二维码保存到手机相册，当时用到canvas，比较繁琐

最近看到css也能保存图片，试了一下果真可以，

-webkit-touch-callout: default;

就这么简单，只要添加这个样式就可以了，不过要注意层级问题，如果有元素遮到他就不能触发保存了（长按图片才会触发保存）
官方文档如下： （同事的安卓手机也支持）

在这里插入图片描述
希望可以帮到你

姿势
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 生成海报，解决跨域问题 ，下载图片到本地
hflxia的博客
09-09 3505
// 获取图片元素 // 创建图片元素 var img = new Image(); //设置图片跨域 img.setAttribute("crossOrigin", "anonymous"); //设置图片路径 img.src = url; //下载图片 img.onload = function() { //创建画布 var can = document.createEleme...
h5页面生成分享海报（保存图片、分享）
努力、拼搏、奋进
06-27 4098
h5页面生成分享海报（保存图片、分享）、FileSaver.js 文件保存、html2canvas
移动端H5实现点击按钮保存图片到相册
最新发布
a_靖的博客
03-01 2921
这是模仿uniapp中H5环境原生的预览图片组件样式，由于原生组件不支持在图片上层加自定义提示的文字，所以自己写一个简单的组件加上“长按保存/分享图片”提示文字。canvasImg 是图片地址，你自己添加或者由canvas画出来的都可以。canvas海报生成图片可以参考下面的页面代码。所以只能曲线救国，自己写一个预览图片组件，在预览的图片上面加上提示，长按保存/分享图片。方案1：微信浏览器为了安全考虑不支持执行使用代码直接保存图片到相册。方案2：不支持A标签下载。
uniapp 保存图片（小程序端配置白名单）,
weixin_47517731的博客
08-17 1480
代码】uniapp 保存图片（h5端做下跨域处理，小程序端配置白名单）
h5 使用canvas绘制海报并保存到本地
weixin_48309048的博客
03-21 844
h5 使用canvas绘制海报并保存到本地
html5 plus 保存图片,H5+app点击图片保存到相册
weixin_31220971的博客
06-15 2439
业务场景:webapp点击图片保存到相册思路：点击保存到相册要调用保存到相册的save方法，第一个参数为手机的本地文件路径，这个就有一个问题我们需要将当前的页面的文件先存入手机的系统文件中，经过api的寻找发现nativeObj中的bitmap是可以通过loadBase64Data()将base64转换成原生图片对象，之后使用bitmap.save可以将原生图片对象放入系统文件并且通过成功回调获得...
Android 的WebView长按保存图片
12-28
根据业务需要，WebView上经常会用到长按保存图片的功能，现在做一个Demo，希望能够帮到有用的童鞋。简述请看博文：http://blog.csdn.net/geofferysun/article/details/53900625
保存图片到本地相册
10-27
"保存图片到本地相册"这一功能涉及到多个技术点，包括权限管理、文件操作以及用户界面交互。在Android 6.0及以上版本，由于运行时权限的引入，实现这一功能变得稍微复杂了一些。以下是对这个主题的详细解释： 1. **...
H5快照+下载图片到本地+源码
05-25
总结一下，"H5快照+下载图片到本地"技术在前端开发中具有广泛的应用，例如网页截图分享、预览、存档等。结合JavaScript和html2canvas库，我们可以方便地捕获网页内容，并通过前端代码实现图片的下载。提供的源码案例...
mobile h5 上传图片
09-27
服务器端需要接收Base64编码的图片数据，并将其保存为实际的图片文件。这通常涉及到解码Base64字符串，然后写入磁盘。服务器端语言可以是PHP、Node.js、Python等，具体实现根据服务器环境和开发者偏好选择。 7. **...
H5页面保存图片到相册
weixin_52137798的博客
08-17 1794
不管是微信浏览器,还是ios浏览器亦或者是安卓浏览器都拥有 一个 只要是image 标签的图片 都可以长按保存到手机相册功能。所我们完全可以做一个长按弹框 把我们生成的图片展示在弹框中利用浏览器机制去实现保存图片到相册。
【vue+h5 移动端保存图片到手机相册】
写代码脑子疼
05-11 2925
废话不多说 直接贴代码。
H5 H5+保存图片至相册
lys20000913的博客
02-25 2089
H5 H5+保存图片至相册
H5页面保存base64图片到本地
similing的博客
07-01 9275
保存base64图片到本地 H5页面与APP端、小程序端有所不同，其没有操作本地文件的权限，因此保存图片功能需要“下载”来支持。 一般我们通过canvas等功能生成的图片都是base64格式的。我们需要 1.将base64解码转换成blob对象 2.将blob对象封装到a标签中置入页面 3.模拟点击这个a标签触发下载请求 实现： function savePicture(base64) { var arr = base64.split(','); var bytes = atob(arr[1]); l
h5页面使用js实现保存当前图片到手机相册
热门推荐
rentian1的博客
12-13 4万+
来源：https://bbs.csdn.net/wap/topics/392154316?from=groupmessage var triggerEvent = "touchstart"; //指定下载方式 function saveAs(Url){     var blob=new Blob([''], {type:'application/octet-stream'});    ...
H5 中html 页面存为图片并长按 保存
anzhen5888的博客
09-07 3620
最近接到的一个新需求：页面一个静态H5，中间有一页是输入信息，然后跳转到最后一页，自动将页面生成图片，用户可以长按图片保存到手机上。 展示一下最后一页的样子： 刚拿到这个需求，在网上看了很多文章，最普遍的是使用 html2canvas + canvas2image 来实现。于是，跟着前人的脚步，踏上了一个不断采坑采坑采坑的旅程。 下面直接描述我在做这个需求过程中遇到的问题以...
正确将图片保存到相册的方法
大叩则大鸣，小叩则小鸣
05-20 5148
而如果这个文件变成了一张图片，那你涉及到的就不仅仅是一个 I/O 操作了，还需要考虑如何更新 MediaStore，这样才可以在系统相册中。 刷新系统 Media 通常有如下几种方式： 通过操作 MediaStore 类。 发送广播更新 MediaStore。 通过操作 MediaScannerConnection 类。 操作 MediaStore MediaStore.Image...
保存图片到相册
zookpk的专栏
11-02 655
UIImageWriteToSavedPhotosAlbum(_myImg, self, @selector(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:), nil);上面的_myimg 就是需要保存的 uiimage  图片 - (void)imageSavedToPhotosAlbum:(UIImage *)im
uniapp移动端h5保存图片到本地
11-23
以下是uniapp移动端h5保存图片到本地的方法： 由于uni-app中的保存图片到本地相册的API在H5中不适用，因此我们需要使用H5的API来实现保存图片到本地的功能。具体步骤如下： 1. 获取图片的base64编码。 2. 创建一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值