一文彻底解决HTML5页面中长按保存图片功能_html5教程技巧

来源:脚本之家  责任编辑:小易  

从HTML4.0、XHTML到HTML5,从某种意义上讲,这是HTML描述性标记语言的一种更加规范的过程。因此,HTML5并没有给开发者带来多大的冲击。但HTML5增加了很多非常实用的新功能和新特性,下面具体介绍HTML5的一些优势。解决了跨浏览器问题在HTML5之前,各大浏览器厂商为了争夺市场占有率,会在各自的浏览器中增加各种各样的功能,并且不具有统一的标准。使用不同的浏览器,常常看到不同的页面效果。在HTML5中,纳入了所有合理的扩展功能,具备良好的跨平台性能。针对不支持新标签的老式IE浏览器,只需简单地添加JavaScript代码就可以使用新的元素。2.新增了多个新特性HTML语言从1.0到5.0经历了巨大的变化,从单一的文本显示功能到图文并茂的多媒体显示功能,许多特性经过多年的完善,已经发展成为一种非常重要的标记语言。HTML5新增的特性如下。新的特殊内容元素,比如header、nav、section、article、footer。新的表单控件,比如calendar、date、time、email、url、search。用于绘画的canvas元素。用于媒介回放的video和audio元素。对本地离线存储的更好支持。地理位置、拖曳、摄像头等API。3.用户优先的原则HTML5标准的制定是以用户优先为原则的,一636f7079e799bee5baa631333433626465旦遇到无法解决的冲突时,规范会把用户放在第一位。另外,为了增强HTML5的使用体验,还加强了以下两方面的设计。安全机制的设计为确保HTML5的安全,在设计HTML5时做了很多针对安全的设计。HTML5引入了一种新的基于来源的安全模型,该模型不仅易用,而且对不同的API(Application Programming Interface,应用程序编程接口)都通用。使用这个安全模型,不需要借助于任何不安全的hack就能跨域进行安全对话。表现和内容分离表现和内容分离是HTML5设计中的另一个重要内容。实际上,表现和内容的分离早在HTML4.0中就有设计,但是分离的并不彻底。为了避免可访问性差、代码高复杂度、文件过大等问题,HTML5规范中更细致、清晰地分离了表现和内容。但是考虑到HTML5的兼容性问题,一些陈旧的表现和内容的代码还是可以兼容使用的。4.化繁为简的优势作为当下流行的通用标记语言,HTML5尽可能地简化,严格遵循了“简单至上”的原则,主要体现在这几个方面:新的简化的字符集声明;新的简化的DOCTYPE;简单而强大的HTML5 API;以浏览器原生能力替代复杂的JavaScript代码。为了实现这些简化操作,HTML5规范需要比以前更加细致、精确。为了避免造成误解,HTML5对每一个细节都有着非常明确的规范说明,不允许有任何的歧义和模糊出现。最近在看黑马程序员的html5+css3的视频教程,介绍的很详细,感兴趣的话你可以看看www.zgxue.com防采集请勿采集本网。

本文详细介绍了如何在H5中实现长按保存图片的功能。

5、然后就能解决这个问题了。扩展资料: PPT在外链音频视频文件时,会出现“Microsoft Office 已确认了一个潜在的安全问题”的提示框。这是微软的一项安全措施。微软并未提供排除的办法。其实这个问题的

长按保存图片是现在一些宣传页H5中很常见的需求,但是js没有这样的能力,所以要么借助android或ios的原生能力,要么用canvas自己画一个(截屏),相比较原生成本太高,且必须依赖于app,相对于流传性很广且跨平台的H5来说不合时宜,所以 canvas 成为我们常用的手段。

其实汽车异响主要来源是内饰异响和车身异响,自己就可以解决。像发动机异响刹车异响等问题就不建议DIY了,百以免小毛病酿成大毛病。汽车行驶时长期颠簸,再加上烈日暴晒,导致塑料内饰板度老化

下面是详细的步骤:

1、以 Windows7 系统为例,先请点击系统的开始按钮,再点击“控制面板”选项。2、接下来在控制面板里,点击“程序卸载”选项 3、随后在程序卸载窗口里,点击左侧的“打开或关闭 Windows 功能”

1. html2canvas截屏

问题要彻底解决 “彻底”是形容词,在文中作状语。“问题”是主语,名词;“解决”是谓语,动词。

保存的图片节点最好是img标签: 想要截屏的节点最好是img标签的图片,经测试如果是 background-image 会有点模糊,需要特别注意下。

如果您之前已经备份过数据,或者目前手机中没有需要备份的数据,建议您可以尝试一下进入Recovery(关机,按住音量上+开机键进入recovery模式)清空所有数据,开机之后暂时不要还原数据,看看是否可以解决

npm i html2canvas --saveimport html2canvas from 'html2canvas';// 想要保存的图片节点const dom = document.querySelector('img');// 创建一个新的canvasconst 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); }}// 添加生成的图片到bodyconst 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页面中长按保存图片功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

这个是处于安全性考虑的,比如文件路径会暴露你的用户名或者其他内容,而通过fakepath直接代替了其中的路径名,保护隐私和安全。解决办法:工具->Internet选项->安全->自定义级别->找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html5 canvas实现的鼠标点击长按粒子动画特效源码
  • 移动端html5模拟长按事件的实现方法
  • 详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
  • html5对手机页面长按会粘贴复制禁用的解决方法
  • 如何彻底解决fakepath路径问题
  • HTML5与之前版本相比有什么优势?
  • 怎样彻底解决WORD模版错误的问题!!!
  • 电脑显示配额不足,怎么彻底解决?
  • Microsoft Office已确认了一个潜在的安全问题,如何彻底解决
  • 彻底解决塑料内饰异响
  • 如何彻底解决ie已停止工作问题
  • 问题要彻底解决中的彻底是什么词类
  • 小米老是自动返回桌面,自动进入一键清理状态,求解答求彻底解决问题!
  • 问题要彻底解决里的彻底是什么词性
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5html5长按保存移动端html5模拟长按事件的实现方法详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案 html5对手机页面长按会粘贴复制禁用的解决方法html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved