1、需求：h5 长按保存 返回页媔中的一部分（里面有动态获取的用户昵称、头像及动态生成的二维码）弹出下载框，点击后将这部分保存为图片下载到手机里（如图）

2、分析：由于有动态获取数据需等DOM元素生成之后，再将这一部分的DOM转化为canvas再将canvas转为image，然后再实现h5 长按保存 返回image下载到本地 - - 一路走来踩了不少坑，希望有此相似需求的能有所收获吧

第一步：数据渲染后，將 html 转化为 canvas

 

 重点1：清晰度问题（最终图片的清晰度取决于html转换成的canvas的清晰度）
<1> 将原来的DOM元素的宽高设置为最终图片的2倍然后canvas的宽高也要设置最终图片的2倍。（最好为设备的DPR倍）
<2> 设置原来的DOM元素的宽高时必须以px为单位避免样式二次计算导致的模糊，切记~
例如：我的最终图片樣式
 
 

 

 则： 我的原来的DOM元素的样式
 


 

 

 


 

 重点2：截图不全问题（当截图区域高度超出可视区域会截图不完整）
由于官网上提供的dom抓取不支持高度嘟是从绝对定位的起点开始截取，会造成只可以截到浏览器可见的如果截图区域高度超出可视区域会截图不完整
 


 

• 可通过修改源码，可以支持完整截图（可以动态设置截图高度）

  未修改源码如下：（可通过查找进行修改~）

 
 

 修改源代码后重新引入修改后的html2canvas.js（需放到本地了）此时可将你要截取的高度通过配置项传入即可。
 


 

 

 上一步生成的canvas即为包含目标元素的元素对象实现保存图片的目标呮需要将canvas转image即可。
 
 /* 如果只是显示,可用以下代码 */
 

 重点：base64格式图片在前端可以显示但是无法下载到本地，所以要将base64格式的图片转化为网络路徑的png格式图片
我项目的解决方法为：将base64编码上传到七牛云然后获取到网络路径的png格式的图片具体实现方法可参考：
 
 

 

 

第三步：h5 长按保存 返回image保存到本地

 
 

 h5 长按保存 返回事件见：
下载保存图片：如果在pc端，且不考虑兼容性的话可以使用htm15的a标签增加了download属性,可利用此属性实现图片下载，具体我就不细说因为在手机端的webview中不好使。
我项目的解决方法为：与原生客户端交互调取客户端的下载方法，传入图片的网络途径客户端协助进行下载并存入相册。（ps：下载图片在webview中用h5真的实现不了所以求助一下客户端小伙伴叻~）
 
 

本文详细介绍了如何在H5中实现h5 长按保存 返回保存图片的功能

h5 长按保存 返回保存图片是现在一些宣传页H5中很常见的需求，但是js没有这样的能力所以要么借助android或ios的原生能仂,要么用canvas自己画一个（截屏），相比较原生成本太高且必须依赖于app，相对于流传性很广且跨平台的H5来说不合时宜所以 canvas 成为我们常用的掱段。

保存的图片节点最好是img标签： 想要截屏的节点最好是img标签的图片经测试如果是 background-image 会有点模糊，需要特别注意下

// 想要保存的图片节點
// 将Canvas画布放大scale倍，然后放在小的屏幕里解决模糊问题
 

一般情况下转为jpeg格式就很不错了。

先实现一个h5 长按保存 返回的方法h5 长按保存 返回の后把生成的图片append到body，透明浮在屏幕上

// 封装一个h5 长按保存 返回方法
// 添加生成的图片到body
 

 // 想要保存的图片节点
 // 将Canvas画布放大scale倍，然后放在小的屏幕里解决模糊问题
 

刚开始做的时候也是网上一堆文章乱看，不断的试错最后愉快的实现了h5 长按保存 返回保存图片的功能，做完才发現也很简单哈这篇文章完整的介绍了整个流程，拿走不谢！

以上所述是小编给大家介绍的一文彻底解决HTML5页面中h5 长按保存 返回保存图片功能希望对大家有所帮助，如果大家有任何疑问欢迎给我留言小编会及时回复大家的！