$.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页面中长按保存图片功能相关推荐

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

    本文详细介绍了如何在H5中实现长按保存图片的功能. 长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个( ...

  2. mysql 乱码 越南_MySQL_mysql数据库乱码之保存越南文乱码解决方法,我自己测试一下,很多字符变 - phpStudy...

    mysql数据库乱码之保存越南文乱码解决方法 我自己测试一下,很多字符变成了 '?'. 数据库连接已经是使用了 utf8 字符集: define("MYSQL_ENCODE", & ...

  3. 模拟实现图片长按保存功能

    关于图片的长按保存(原生代码暂未集成,先记录一下准备工作) 最近要实现图片的长按保存功能,百度了好多,单由前端实现的方法网上也有,不过看上去好麻烦,头疼,后来有看到博文说原生实现会简单些,咨询了老板, ...

  4. app内嵌H5,禁止图片长按保存。

    一.第一种方法: img{ pointer-events:none; } 缺点:会禁止掉点击事件.所以当图片有点击事件的时候,给有点击事件的图片设置pointer-events:auto;那么这个图片 ...

  5. JS生成二维码以及保存页面为图片的解决方案:html2Canvas+file-saver+qrcodejs2的使用心得以及解决图片失真,保存不完整的解决办法

    前言 最近因为工作需求,需要前端根据后端传过来的链接生成二维码,并且要使用JS保存页面为图片.然后网上搜了很多解决办法.最终都是用h5的canvas进行绘制然后保存为图片.其中,又以html2Canv ...

  6. html5长按保存,iOS UIWebView仿微信H5页面实现长按保存图片功能

    最终实现效果图 选择放这张效果图的时候很是忐忑啊,不知道会不会被和谐掉. 拿到需求之后分析了一下,其实主要功能点就是如何才能通过手指按压位置获取到相应的图片资源.是不是很抓狂,如果考虑到设备适配,谁知 ...

  7. HTML5图片旋转并保存,html5图像旋转、缩放并上传

    普通 css 的旋转缩放只是样式发生旋转,图片本质上还是没有旋转缩放的,想要图片本质旋转或者缩放,需要借助 canvas 的图像生成能力 以图像旋转 90 度并且缩放 0.5 倍为例 思路获取图片元素 ...

  8. 将Android布局转成图片,并保存到本地(解决JPEG图片因透明度变黑问题)

    最新碰到个需求,就是将布局转成图片导出,后来想到可以用view.draw(canvas)方法,将布局转为图片. 将布局转为bitmap public Bitmap getBitmap(View vie ...

  9. js html保存word文档,js将页面中指定内容保存到WORD

    在网页WEB中,我们可以借助JS代码,将页面中指定的内容或特定的局部内容,而不是整个页面,导出到WORD文档,进而可以通过WORD保存的方法,生成WORD文件. 通过这种方法,在导出的时候,如果是第一 ...

最新文章

  1. No module named ‘tensorflow.contrib‘
  2. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器
  3. Springmvc文件上传(servlet3.0)/下载(ssm)以及坑点
  4. 2013 Multi-University Training Contest 9 1011 Arc of Dream
  5. MySQL必知必会(使用子查询)
  6. 分享25个新鲜出炉的 Photoshop 高级教程
  7. 官方原版美化修改版完美适配双端海洋cms模板
  8. 详细探究Spark的shuffle实现
  9. 【TensorFlow-windows】(二) 实现一个去噪自编码器
  10. 化学人学python有前途吗-用Python解析化学公式
  11. vue + echarts 实现简单中国地图
  12. Bin Code Editor格式化JSON编辑器
  13. 第三方系统平台如何对接gooflow2.0
  14. UE4.27 Live Link Face无法连接的一种解决办法
  15. 频繁gc是什么意思_CPU飙高,频繁GC,怎么排查?
  16. python深度学习include框架_《用Python实现深度学习框架》上市
  17. 聚苯乙烯/二氧化硅荧光微球/硫化镉-聚苯乙烯微球CdS/PS复合微球的制备方式
  18. 一种基于蓝牙的电视锁实现方案
  19. 浏览器交互导出excel
  20. 【51nod1326】遥远的旅途

热门文章

  1. 一文带你理解如何解决工作中的需求
  2. [html] 说说你对移动优先布局的理解
  3. [js] 对`a == (‘1‘||‘2‘||‘3‘) ? false : true`写法进行改进,写出你优化后的方法
  4. [js] fetch和axios请求的原理都是基于XMLHttpRerequst吗?
  5. 前端学习(1969)vue之电商管理系统电商系统之渲染动态参数和静态参数的表格
  6. 前端学习(1807):前端调试之列表伪类练习三
  7. 前端学习(1178):vue基础
  8. 前端学习(660):比较运算符
  9. mybatis学习(36):动态sql-set
  10. 17. 框架标签及其应用实例