h5页面保存img_一文彻底解决HTML5页面中长按保存图片功能

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

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

下面是详细的步骤：

1. html2canvas截屏

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

npm i html2canvas --save

import html2canvas from 'html2canvas';

// 想要保存的图片节点

const dom = document.querySelector('img');

// 创建一个新的canvas

const Canvas = document.createElement('canvas');

const width = document.body.offsetWidth; // 可见屏幕的宽

const height = document.body.offsetHeight; // 可见屏幕的高

const scale = window.devicePixelRadio; // 设备的devicePixelRadio

// 将Canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题

Canvas.width = width * scale;

C