html5截屏（html5截屏功能）

今天给各位分享html5截屏的知识，其中也会对html5截屏功能进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果
• 2、java截屏有哪几种方法
• 3、如何做一个简单的chromeextension用于网页截屏
• 4、App发布 被拒绝 不知道什么原因 请大神指教

如何通过 HTML5 实现 iOS 7 的实时毛玻璃模糊效果

所谓的毛玻璃效果其实是半透明+模糊，可以用CSS filter实现。

时间不多，就抛个砖，题主可以自己找一下文档和更多案例。

filter - CSS

div {

-moz-filter: blur(5px);

-webkit-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

filter: blur(5px);

}

大体思路是，当出现弹出层的时候，对背景层增加blur filter，再给弹出层的一定透明度就可以了。

因为有同学坚持说 CSS filter 只能用于图片，所以录了一个小视频，证明它是可以用于可视的DOM元素的。

在 codepen 上找了一个栗子，是通过CSS filter + JS复制滚动元素实现的毛玻璃 Nav Bar 效果，也可以说明，这个属性真的不是只能作用于图片，也不需要“截屏”啊。

java截屏有哪几种方法

前台方式

1. 利用html2canvas实现前台截屏

html2canvas项目的gitHub地址

html2canvas示例

html2canvas可以将HTML代码块进行截取，并生成快照形式的canvas，然后可以利用html5的下载功能提供图片的下载接口，供用户下载。

优点：前台技术，实现比较容易。

缺点：此项目使用了html5的技术，因此在对IE的兼容上，只可以在IE9+的版本上使用。

使用时，需要引用jQuery.js和html2canvas.js。（html2canvas.js可以在github上下载）

具体JavaScript代码如下:

var canvas = function () {

html2canvas($("#chart"), {

onrendered: function (canvas) {

$("#class11").html(canvas);//将id为“class11”部分的代码转换为canvas

var type = 'png';//图片类型为png

var imgData = canvas.toDataURL('png');//将图片转换为png类型的流

var _fixType = function (type) {

type = type.toLowerCase().replace(/jpg/i, 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;

}; var saveFile = function (data, filename) {

var save_link = document.createElementNS('', 'a');

save_link.href = data;

save_link.download = filename; var event = document.createEvent('MouseEvents');

event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);

save_link.dispatchEvent(event);

}; //下载时的文件名

var filename = 'baidufe_' + (new Date()).getTime() + '.' + type; // 下载文件

saveFile(imgData, filename);

}

});

后台方式（java）

1. 利用html2image实现

html2image的地址（google）

html2image是可以识别html标签并将html转换成图片的java项目。

优点：后台转换，故对浏览器的版本基本没有要求。

缺点：对样式的识别不是很好，转换出来的图片比较简单，基本没有可以兼容的样式。

使用方式：maven中引用如下依赖：

dependency

groupIdcom.github.xuwei-k/groupId

artifactIdhtml2image/artifactId

version0.1.0/version/dependency12345

2. 利用DJNativeSwing项目实现

纯java代码实现。使用DJNativeSwing这个项目，构建一个swing浏览器，打开网址，之后截取图片。（需要eclipse的swt库支持）

优点：纯java实现。

缺点：需要多线程的支持，只在控制台方式实现过（由于本人对于多线程的掌握较弱，目前没有在spring项目中实现这个方法，求大神指导~~）

3. 利用phantomJs实现

phantomJs的GitHub地址

phantomJs官网

phantom利用的是webKit内核，全面支持web而不需浏览器支持，快速，原生支持各种Web标准。

优点：速度快，使用简单。

缺点：需要在项目的服务器端引用exe文件进行截图，并发性能有待考证。

如何做一个简单的chromeextension用于网页截屏

这篇文章介绍如何通过几行简单的代码，创建一个用于网页截屏的Chrome extension。 chrome extension HTML5 JavaScript 目录[-] Chrome Extension开发指南 如何实现网页截屏功能 安装运行Chrome Extension Chrome extension是一个文件包，里面包含了一个配置文件manifest.json，以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等)。 Chrome Extension开发指南 Chrome Extension Overview Chrome Extension Debugging Chrome Extension Samples 如何实现网页截屏功能 看一下manifest文件： { "name": "Screenshot Extension", "version": "1.0", "description": "A simple screenshot extension", "background": { "persistent": false, "scripts": ["background.js"] }, "content_scripts": [ { "matches" : ["all_urls"], "js": ["content.js"] } ], "browser_action": { "default_icon": "camera.png", "default_title": "Screenshot" }, "permissions": ["tabs", "all_urls", "activeTab"], "manifest_version": 2 } 注意： background.js是用于extension的，而content.js是用于和网页交互的。这两个文件之间要交互，需要通过消息传递机制。 permission的权限配置很重要，如果要让extension作用于所有的网页站点，就必须申明为all_urls。具体的各种权限可以参考 Google提供了一个API用于捕捉网页的可见区域： chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.captureVisibleTab(null, { format : "png", quality : 100 }, function(data) { screenshot.data = data; }); }); 如果要实现全网页的截图，就必须要触发滚动，然后把所有的数据拼接起来。这里的data就是获取的图片数据。 为了让用户做出截屏的选择，创建一个content.js来和网页交互。从background.js发送消息到content.js询问是否需要做截屏操作。如果用户点击确认，把消息回传到background.js。 background.js chrome.tabs.query({ active : true, currentWindow : true }, function(tabs) { chrome.tabs.sendMessage(tabs[0].id, {ready : "ready"}, function(response) { if (response.download === "download") { } }); }); content.js chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) { if (msg.ready === "ready") { if (confirm('Do you want to capture the screen?')) { sendResponse({download : "download"}); } } }); 保存下载图片： saveScreenshot : function() { var image = new Image(); image.onload = function() { var canvas = screenshot.content; canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext("2d"); context.drawImage(image, 0, 0); // save the image var link = document.createElement('a'); link.download = "download.png"; link.href = screenshot.content.toDataURL(); link.click(); screenshot.data = ''; }; image.src = screenshot.data; }, 安装运行Chrome Extension 在Chrome设置中勾上Developer mode 点击Load unpacked extension 打开一个网页，点击工具栏中的按钮 确认保存截屏

App发布 被拒绝 不知道什么原因 请大神指教

1、程序有重大bug，程序不能启动，或者中途退出。

2、绕过苹果的付费渠道，我们之前游戏里的用兑换码兑换金币。

3、游戏里有实物奖励的话，一定要说清楚，奖励由本公司负责，和苹果没有关系。

4、用到苹果的标志。（应用的设计和Apple的Logo风格太像了也会被拒）

5、网络功能不能正常访问。

6、图标不能点击，不能点击的图标要置灰，或者直接隐藏。

7、没有设置default页，启动画面为黑屏，有一定概率被拒绝。

8、一个应用在线，但你想在发一个豪华版之类的，再开一个应用也会被拒绝。

9、用了著名游戏的关键字，比如说“愤怒的小鸟”之类的。

10、iPhone版不支持480*320分辨率被决绝。

11、娱乐分类App，拒绝理由：我们认为你的App不具有娱乐性。

12、你的软件不符合中国法律，还打电话来跟我说。（奶奶的，中国哪个法律说不可以FQ。）

13、技术支持地址写的微博地址，于是被拒绝了。原因是：不能将需要登陆才能访问的网址作为技术支持地址。

14、说我们的应用不该用App开发，应该用HTML5。（而且还很热心的给出了参考链接哦）

15、调用截屏功能,当时没注意,是私有API,被拒.改成非私有API实现截屏功能就通过了.

16、开放了文件document分享功能(Application supports iTunes file sharing),被退回,理由:不需要分享,为何开放了.回复邮件说明理由后上线.

17、年龄设置太低,说是有成人内容,被拒.修改内容后上线.

18、同一软件多个版本只是针对不同的国家和内置的语言不同.前面几个上线,后面几个被拒.让改成一个程序做程序内下载资源.

19、程序有crash被拒.修改bug后上线.

20、原因是我们的一个软件只允许联通用户验证真实身份并发布信息。apple要求要么放弃验证，要么允许移动和电信用户验证。

21、APP中出现了某本以乔布斯为封面的本集团出版物图片，遭拒。回复曰：Thank you for submitting your app commemorating Steve Jobs.

We appreciate your efforts honoring Steve. However, we’ve decided to honor his life in other ways and we are not accepting these types of apps.

22、原来做过一个显示假电池的App, 就是显示一个假的的电量, 这样别人找你借手机就可以以没电了为理由不借给他. 结果App Store说会迷惑用户, 让我改简介. 改为简介后苹果中国给我打电话说这个App不用再提交了, 不可能过, 会迷惑用户… 我了个去的 于是这个App就一直存在在我的iTunes Connect里.

23、忘记提供测试账号。（如果你的APP有登录功能）

24、软件有个vip功能，涉嫌应用内收费。

25、拨打电话，涉嫌扣费。

26、图片如果比较清凉的话需要设置软件级别。

27、平板应用要支持最少2个翻转方向。

28、程序内按钮设计成标准的iOS icon。

29、内置付费的内容要明确告诉需要购买，购买前不能摆出来（这个属于运气不好，同样这么做的app很多）

30、提交旗下一款新应用，为统一旗下各个产品的品牌识别，采取了与上一款产品相似的色调和logo结构。苹果拒绝理由是不知道这两款产品有什么区别（其实区别点进去就很明显，连UI布局都大相径庭）。

31、应用内涉及到抽奖的运营活动，未声明与苹果官方无关。

33、自认为第一版产品还不够完善，于是过度谦虚地在启动画面加上了“beta”字样。苹果的反馈是，不允许测试版产品上架。囧，后来翻了一下 Review Guideline 似乎是有提到这点的。

34、链接堆砌，苹果建议用HTML5来做

35、UIWebView 嵌页面片，苹果建议让用户通过浏览器访问，比如爱知乎，开始几个版本通过了，后面的更新一直没提交上去

屏幕坏点检测应用，苹果说会误导用户，未上架

36、登陆账号有两个字母写反了，改正后通过

37、因远程服务器反应慢，苹果的人估计没耐心等，就说有bug给拒了，重新提交一份通过

38、应用标题加了几个描述语句，苹果让在描述中写明达到此目的的操作流程，改正后通过

39、一个第三方的应用，描述文字中有该网站的链接，进去网站后能找到付费链接，苹果说该网站有自己的支付方式，去除网址后通过

40、应用请求使用地理位置的权限，但相关功能藏得比较深，Apple说没找到相关的功能。 — 回信说明后通过

41、应用描述中提到了是全平台应用，可以和其他系统同步数据。因为提到了“Android”的字眼被拒。 — 修改描述后通过

42、 App 的User Agreement中出现了 Beta、Preliminary 等字样。因为是发布第一个版本，产品带有一定的beta性质，但是确实是可发布产品了。按照公司LEGAL部门（外企，对User Agreement要求严格）的要求，必须有类似Beta的说明告知用户，而 Apple 是明确不允许有 Beta 性质的字样的。

43、App 是一个机遇小区的社区工具，顺便做了房产广告，但是 apple 审核说是广告app，不允许发布。

44、应用里有个去给我们打分的功能，被拒了。。（这是不是史上最坑爹的拒绝理由）

45、网络工具软件，要求支持国外的电信运营商网络。

46、曾经做一个 Chinajoy 美女图片 show 的，被认为不适合放在 App Store。

47、iOS 5 的数据存储问题…网络下载的资源不能直接搞在Documents目录下。这个反复整了5次左右才通过审核。

48、忘记提供测试账号……（审核的大爷们你们就不能自己弄个或者注册个账号么）

49、还有一次被拒，我回复说你们所说的问题不存在……后来……通过审核了。-.-

50、菜单中有一个文字包含测试，被打回，说不能上测试版本。

51、app名字包含pad，被打回，说容易名字不能有pad，会被误解为苹果自己的应用，不过同名的iphone版本就通过了…

52、upport地址在safari（仅仅是safari）下由于适配性问题打不开，结果就收到了apple的来信。

53、app里做了次抽奖，奖品是iphone4s，结果他们必须要我们将奖品改成别的，同时申明此活动与苹果公司无关，才可以上架。。。

54、app里做了次抽奖，奖品是iphone4s，结果他们必须要我们将奖品改成别的，同时申明此活动与苹果公司无关，才可以上架。。。

55、在程序的说明信息中有“越狱”俩字，被拒，后来把这俩字去了，PASS。但是：如果我在程序运行中检测出手机越狱了，这结果报出来让不让过？

56、使用GPS常驻后台服务，要我给出一个合适的理由，否则不往下审核，还好，解释一翻过去了。

57、出现“给我们五星好评”之类的文字。

58、应用内提到付费项目但木有通过苹果付费渠道（妄图不让苹果老大赚钱）

59、问我服务是不是只在IOS平台，还是同时支持多平台（我当然拥护苹果老大的领导，木有其他平台，iPhone专属）

关于html5截屏和html5截屏功能的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。