欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-19 10:02:52
这篇文章主要介绍了解决HTML5页面中长按保存图片功能,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧... 19-06-10...

本文详细介绍了如何在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页面中长按保存图片功能,希望对大家有所帮助