数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

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


  • 本文相关:
  • html5 canvas实现的鼠标点击长按粒子动画特效源码
  • 移动端html5模拟长按事件的实现方法
  • 详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
  • html5对手机页面长按会粘贴复制禁用的解决方法
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved