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


Posted in HTML / CSS onJune 10, 2019

本文详细介绍了如何在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页面中长按保存图片功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

HTML / CSS 相关文章推荐
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 HTML / CSS
奇妙的 CSS shapes(CSS图形)
Apr 05 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 #HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 #HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 #HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 #HTML / CSS
HTML5新增form控件和表单属性实例代码详解
May 15 #HTML / CSS
Html5 滚动穿透的方法
May 13 #HTML / CSS
JavaScript+Canvas实现自定义画板的示例代码
May 13 #HTML / CSS
You might like
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php操作redis缓存方法分享
2015/06/03 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
JavaScript DOM基础
2015/04/13 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue如何解决循环引用组件报错的问题
2018/09/22 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
python进阶教程之文本文件的读取和写入
2014/08/29 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
python杀死一个线程的方法
2015/09/06 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
ubuntu 安装pyqt5和卸载pyQt5的方法
2020/03/24 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
自主招生专家推荐信
2015/03/26 职场文书
2015年仓库工作总结
2015/04/09 职场文书
单位综合评价意见
2015/06/05 职场文书
校园安全主题班会
2015/08/12 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Nginx反向代理配置的全过程记录
2021/06/22 Servers