html页面长按保存图片,h5长按保存图片

实现思路：

1.html 转为canvas

2.canvas 转为图片

3.下载保存图片

1.html 转为canvas

方案1：可以使用canvas 绘制

方案2：使用插件 html2canvas

我目前使用的是html2canvas插件,使用比较方便，可以将html直接转换成canvas

let dom = document.getElementById('id');

html2canvas(dom,{ useCORS:true}).then((canvas)=> {

document.body.appendChild(canvas);

});

注意：非本地图片绘制存在跨域问题，需要加上useCORS:true 配置

2.canvas转为图片

方案1：canvas 转为base64

canvas.toDataURL("image/png");

注意点：这样转换的base64可能会太大，导致第三步下载保存图片出错

方案2： canvas 转为 Blob, 可以解决文件较大保存出错问题

canvas.toBlob(function(blob){

// 将blob 对象转为url

let downloadLink = URL.createObjectURL(blob);

})

3.下载保存图片

长按保存图片功能，浏览器都自带有，移动端webview 不分安卓和IOS都带有长按保存图片功能，所以一般我们只需要做到将html 转换成图片就可以了，webview是可以限制长按保存功能的，在使用这个功能之前需要确定webview是否限制了，在我的项目中就有遇到webview限制长按保存功能的情况，也有的webview需要调用app提供的接口来实现。

创建一个a标签设置download 属性，触发a标签的点击事件,这种方式网上有很多人推荐，但是我的项目在app中都没有调成功，但是在chrome中可以，这个需要根据项目具体情况来选择。在chrome 中使用a标签下载的方式，图片超过2mb，需要使用blob的方式

function saveImg(downloadLink,fileName){

// 生成一个a元素

var a = document.createElement('a')

// 创建一个单击事件

var event = new MouseEvent('click')

// 将a的download属性设置为我们想要下载的图片名称，带上图片类型，如：test.png

a.download = fileName;

// 将生成的URL设置为a.href属性

a.href = downloadLink;

// 触发a的单击事件

a.dispatchEvent(event)；

}

html页面长按保存图片,h5长按保存图片相关推荐

html5长按排序,H5 长按拖拽排序的实现
H5 长按拖拽排序产品需求: H5页面的一个列表,需要长按之后然后拖拽排序; vuedraggable是vue生态圈中一个知名的组件,也是vue.js项目中处理拖拽问题的不二法宝; 它基于Sort ...
html5页面长什么样子,H5是什么？5分钟就能全面了解什么是html5页面
H5突然火了通过微信和朋友圈的快速发展,H5靠着无需下载.即点即用的属性迅速上位,一跃变成炙手可热的小鲜肉.相比电视.杂志.户外广告等传统媒体呈逐年下降的趋势,品牌营销在数字和移动方面的投入在逐年上 ...
h5页面保存img_从微信H5点击保存图片说起
微信H5里保存图片,大都是通过长按操作,弹起actionsheet保存照片.但我们的部分用户是老年群体,不知道怎么进行"长按"操作.考虑到这个因素,产品要求实现点击保存按钮来保存图 ...
移动4G网络App页面加载时间过长
移动4G网络App页面加载时间过长发现问题 2016年12月份开始,使用android客户端的部分用户反映在使用移动4G网络的情况下,App内的页面加载时间过长,几乎加载不出来,导致无法正常使用Ap ...
Saiku控制页面展示的数据过长自动换行(二十四)
Saiku控制页面展示的数据过长自动换行目前用到saiku来展示数据,发现数据文本过长也不会自动换行,然而用户那边又需要换行(会好看些),所以就来改一改源码啦首先我们使用谷歌浏览器 inspect ...
页面加载时间过长的解决
有时候会遇到这样的问题: 页面加载时间很长,需要一个友好界面来load这段空白时间, 而页面未加载的时候,页面里面的表单元素都是不存在的, 那前台写的初始化的js肯定是用不了了, 怎么办? 到网上搜了 ...
uni-app手机截图页面某区域内容-生成长图方法
uni-app手机截图页面某区域内容-生成长图方法 (来自我的今日头条,都是我的博客) 以下是截图当前页面指定区域的全部内容方法安卓测试可行,测试机型为华为,ios没有业务需要所以没做,仅供参考,觉 ...
制作html5页面的软件,制作h5页面的软件
原标题:制作h5页面的软件制作h5页面的软件有很多,今天我们以一款非常容易上手的软件来给大家分享制作的过程. 为了展现更多的长页面设置过程,本教程中的完成效果与步骤中采用图片并不一致.您在制作自己的 ...
h5活动是什么意思_浅谈什么是H5页面，怎么制作h5页面
来源|活动盒子-APP活动运营工具(huodonghezi.com) 我们经常在社交平台都可以看到很多h5页面活动,这些h5活动页面不仅做的炫酷,而且还有非常好的营销推广效果.那么,怎么制作h5页面呢 ...

html页面长按保存图片,h5长按保存图片

html页面长按保存图片,h5长按保存图片相关推荐

最新文章

热门文章