В этой статье подробно рассказывается, как реализовать функцию сохранения картинки по долгому нажатию в H5.

Длительное нажатие для сохранения изображения является очень распространенным требованием на некоторых рекламных страницах H5 сейчас, но js не имеет такой возможности, поэтому либо используйте собственные возможности Android или ios, либо используйте холст, чтобы нарисовать его самостоятельно (скриншот), по сравнению с нативной стоимостью слишком высока, и это должно зависеть от приложения, которое устарело по сравнению с широко распространенным и кросс-платформенным 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. Нажмите и удерживайте, чтобы сохранить изображение.

Сначала реализуйте метод длительного нажатия.После длительного нажатия добавьте сгенерированное изображение к телу и прозрачно поместите его на экран.

// 封装一个长按方法
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;
}

Когда я только начал это делать, я читал кучу статей в Интернете, и я все пытался и делал ошибки.Наконец-то я с радостью реализовал функцию длительного нажатия для сохранения картинки.После того, как я закончил, я обнаружил, что это было очень просто.Эта статья полностью знакомит со всем процессом.Спасибо, что оставили!

Для более интересного контента, пожалуйста, обратите внимание на мой паблик [Небесные награды за усердие Льюис]