一文彻底解决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;
canvas.height = height * scale;
canvas.getcontext('2d').scale(scale, scale);
html2canvas(dom, {
  canvas: canvas,
  scale,
  usecors: true,
  logging: true,
  width: width + 'px',
  hegiht: height + 'px',
}).then((canvas) => {
  const context = canvas.getcontext('2d');
  // 关闭抗锯齿形
  context.mozimagesmoothingenabled = false;
  context.webkitimagesmoothingenabled = false;
  context.msimagesmoothingenabled = false;
  context.imagesmoothingenabled = false;
  // canvas转化为图片
  canvas2image(canvas, canvas.width, canvas.height);
});

2. canvas2image转化为图片

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

canvas2image(canvas, canvas.width, canvas.height) {
  const retcanvas = document.createelement('canvas');
  const retctx = retcanvas.getcontext('2d');
  retcanvas.width = width;
  retcanvas.height = height;
  retctx.drawimage(canvas, 0, 0, width, height, 0, 0, width, height);
  const img = document.createelement('img');
  img.src = retcanvas.todataurl('image/jpeg');  // 可以根据需要更改格式
  return img;
}

3. 长按保存图片

先实现一个长按的方法，长按之后把生成的图片append到body，透明浮在屏幕上。

// 封装一个长按方法
longpress(fn) {
  let timeout = 0;
  const $this = this;
  for (let i = 0; i < $this.length; i++) {
    $this[i].addeventlistener('touchstart', () => {
      timeout = settimeout(fn, 800); // 长按时间超过800ms，则执行传入的方法 
    }, false);
    $this[i].addeventlistener('touchend', () => {
      cleartimeout(timeout); // 长按时间少于800ms，不会执行传入的方法
    }, false);
  }
}
// 添加生成的图片到body
const img = canvas2image(canvas, canvas.width, canvas.height);
document.body.appendchild(img);
img.style.csstext = "width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;";

4. 完整代码如下

$.fn.longpress = function(fn) {
  let timeout = 0;
  const $this = this;
  for (let i = 0; i < $this.length; i++) {
    $this[i].addeventlistener('touchstart', () => {
      timeout = settimeout(fn, 800); // 长按时间超过800ms，则执行传入的方法 
    }, false);
    $this[i].addeventlistener('touchend', () => {
      cleartimeout(timeout); // 长按时间少于800ms，不会执行传入的方法
    }, false);
  }
};
$('img').longpress(() => {
  saveimg();
});saveimg() {
  // 想要保存的图片节点
  const dom = document.queryselector('img');
  // 创建一个新的canvas
  const canvas = document.createelement('canvas');
  const width = document.body.offsetwidth;  // 可见屏幕的宽
  const height = document.body.offsetheight;  // 可见屏幕的高
  const scale = window.devicepixelratio;  // 设备的devicepixelratio
  // 将canvas画布放大scale倍，然后放在小的屏幕里，解决模糊问题
  canvas.width = width * scale;
  canvas.height = height * scale;
  canvas.getcontext('2d').scale(scale, scale);
  html2canvas(dom, {
    canvas: canvas,
    scale,
    usecors: true,
    logging: true,
    width: width + 'px',
    hegiht: height + 'px',
  }).then((canvas) => {
    const context = canvas.getcontext('2d');
    // 关闭抗锯齿形
    context.mozimagesmoothingenabled = false;
    context.webkitimagesmoothingenabled = false;
    context.msimagesmoothingenabled = false;
    context.imagesmoothingenabled = false;
    // canvas转化为图片
    const img = canvas2image(canvas, canvas.width, canvas.height);
    document.body.appendchild(img);
    img.style.csstext = "width:100%;height:100%;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;";
  }
}
canvas2image(canvas, width, height) {
  const retcanvas = document.createelement('canvas');
  const retctx = retcanvas.getcontext('2d');
  retcanvas.width = width;
  retcanvas.height = height;
  retctx.drawimage(canvas, 0, 0, width, height, 0, 0, width, height);
  const img = document.createelement('img');
  img.src = retcanvas.todataurl('image/jpeg');  // 可以根据需要更改格式
  return img;
}

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

总结

以上所述是小编给大家介绍的一文彻底解决html5页面中长按保存图片功能，希望对大家有所帮助