1，html5的Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。
2，除了原先的DOM接口，HTML5增加了更多API，如：
用于即时2D绘图的Canvas标签
定时媒体回放
离线数据库存储
文档编辑
拖拽控制
浏览历史管理
3，每一种新技术都会带来新的安全问题，新的HTML 5功能也不会例外。
……》如能帮您解决，请随手采纳；
HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。1、 视频流
HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia （请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。
<video id=”video” autoplay=”"></video>
<script>
var video_element=document.getElementById(‘video’)
if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow
navigator.getUserMedia(‘video’,success,error) //success是回调函数,当然你也可以直接在此写一个匿名函数
}
function success(stream){
video_element.src=stream
}
</script>
此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。
2、 拍照
拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：
var canvas=document.createElement(‘canvas’)//动态创建画布对象
var ctx=canvas.getContext(’2d’)
var cw=vw,ch=vh
ctx.fillStyle=”#ffffff”
ctx.fillRect(0,0,cw,ch)
ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh)//将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。
document.body.append(canvas)
3、 图片获取
从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/pngbase64,xxxxx”的格式。
var imgData=canvas.toDataURL(“image/png”)
这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。
第一种：是在前端截取22位以后的字符串作为图像数据，例如：
var data=imgData.substr(22)
如果要在上传前获取图片的大小，可以使用：
var length=atob(data).length//atob 可解码用base-64解码的字串
第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：
$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)
4、 图片上传
在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：
$.post(‘upload.php’,{‘data’:data})
在后台我们用PHP脚本接收数据并存储为图片。
function convert_data($data){
$image=base64_decode(str_replace(‘data:image/jpegbase64,’,”,$data)
save_to_file($image)
}
function save_to_file($image){
$fp=fopen($filename,’w')
fwrite($fp,$image)
fclose($fp)
}
以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。
在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。
相对于需要专业移动开发人员的原生应用（Native APP），基于HTML5/CSS/JavaScript的WebAPP凭借开发者门槛低、迭代迅速、支持跨平台发布等特点，成为电商、银行等网络服务、浏览类应用的首选，然而由于页面渲染导致的性能差距是WebAPP与原生应用无法抗衡的最大原因，因此针对WebView组件的性能优化就显得至关重要。为什么是WebView
WebAPP所显示的Web页面都是由一个叫做WebView的组件渲染出来的，每个网页都有一个链接即URL，首先将URL转换成NSURLRequest，然后用加载网页的类WebView加载Request，使用 - (void)loadRequest:(NSURLRequest *)request这个方法，就能将网页加载显示出来。
目前iOS中有两个加载网页的类，分别是UIWebView和WKWebView，UIWebView是UIKit框架中的一个类，而WKWebView是WebKit框架中的类，从性能上来说WKWebView的性能高、稳定性好、占用内存小，完全优于UIWebView。但由于WKWebView是iOS8提供的组件，因此系统版本低于iOS 8.0的iPhone/iPad用户就无法正常使用WKWebView组件开发出来的APP。所以目前大部分开发人员还在使用性能、稳定性并不理想的UIWebView进行WebAPP开发，而本文所说的云智慧透视宝WebView性能监控也是以UIWebView为主要优化目标。
要进行性能监控必须获得WebAPP页面加载全过程的性能数据，透视宝是通过向当前加载链接的html5、jsp、php网页代码中注入获取数据的JS代码，然后通过OC与JS交互，将数据传递给OC，然后再将数据整理发送到透视宝后端。
监控哪些WebView性能数据
透视宝能监控四大类数据：
行为数据：抓取用户在移动端网页点的行为 *** 作，也就是点击网页的内容，分析用户的行为
时间相应数据：分解一个链接从加载开始到完成这段时间内，每个阶段的耗时
Ajax请求数据：抓取终端用户响应时间，响应数据下载时间，数据响应成功的callback执行时间和ajax错误数据
JS错误数据：抓取加载链接的代码错误信息
① 时间响应数据及数据计算公式
（图片来源：51cto技术博客）
参见上图，JS传给透视宝的时间响应数据就是这些字段，其中navigationStart是起点，所有的计算都需要依赖于它。分析移动端H5性能数据，其实就是测算HTML5、JSP、PHP等网页元素在iOS上加载的时间长短，通过这些性能数据前段开发人员能够准确发现性能问题并及时解决，下表是透视宝定义的响应时间分解数据及计算方案：
② 资源时序数据
每一个网页都是有很多资源组成的，包括.js、.png、.jpg、.css、script等，每一个元素的加载都需要加载时间，资源时序数据就是准确记录每一个元素的加载时间及类型，并把这些数据通过JS的performance接口直接获得并传给OC，不需要计算。
③ JS错误及ajax请求数据
JS错误指的是抓取网页代码的错误，包括错误类型及堆栈信息，直接定位错误。ajax请求的数据有请求的链接、uri、 终端用户响应时间，响应数据下载时间，数据响应成功的callback执行时间和ajax错误数据。JS错误和ajax请求数据都是有JS代码直接获取到，不需要处理。
JS代码注入
想要准确监测网页性能就需要进行代码注入，而只有拿到网页的代码才能注入， UIWebView这个类里面除了三个加载链接的方法和4个代理方法，就没有其他内容了，而这些方法并不能获取到内容，所以我们就需要考虑其他方法。UIWebView在加载拦截的时候会进入NSURLProtocol这个类，而恰好这个类能拿到当前加载链接NSURLRequest，而且会走进这个类的 - (void)startLoading方法，这个方法在页面load完成之前，页面刚加载之后，所以就是我们所需要的。
创建一个类，继承NSURLProtocol这个类，重写startLoading方法，由于能拿到链接的request，所以我们就对这个链接发送请求，用原生态的NSURLConnection或者NSURLSession都可以，我们用的NSURLConnection这个类发送请求并设置代理，方法是这个 - (nullableinstancetype)initWithRequest:(NSURLRequest*)request delegate:(nullableid)delegate startImmediately:(BOOL)startImmediately，
NSURLConnection的代理方法中有一个能接受请求链接数据的方法， - (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data，得到的NSData是16进制的字节流数据，通过utf8转码将字节流转换成字符串，然后发现这个字符串正好是这个当前加载网页的代码，
网页代码都是由标签组成，都会有<head>这个标签，我们就把JS代码注入到<head>标签之下，放在自己添加的<script>标签中代码实现就是获取字符串中<head>这个字符的位置，然后在其下面插入用<script>包装的js代码，然后转回成新的NSData的字节流数据。
由于页面还没有加载，我们已经改动代码了，就需要把注入JS代码的重新记载一次，需要用NSURLProtocol的代理属性NSURLProtocolClient，用NSURLProtocolClient这个中的这个方法- (void)URLProtocol:(NSURLProtocol*)protocol didLoadData:(NSData*)data，将新的NSData加载一次，转回成NSData是因为这个方法需要的是NSData数据。
当然上面只是介绍主要实现的一些方法，还需要用到NSURLConnection的其他代理方法，只是这些方法不需要添加什么，按照常规处理就行了，就不一一介绍了。
性能数据获取
加载链接过程中JS代码就会通过performance接口获取数据，然后获取的这些数据需要传给移动端，如何传递数据呢，传递数据的过程也叫OC与JS交互的过程。
获取数据的时机：
由于不清楚什么时候JS能拿到数据，所以从最开始就需要进行交互的监控，也就是加载链接的时候，因为透视宝SDK用来监控的所以我们不能直接使用这个方法，需要用到OC的运行时，动态加载机制，又叫hook。首先通过添加UIWebView的类目，添加类目是将UIWebView类的实现分散出来，每个类都是由NSbject继承下去，所以每个类都有 (void)load方法，而且这个方法的执行是最早的，我们就在这个方法中使用OC的运行时runtime，使用一个方法交换UIWebView加载链接的三个方法的指针，这样就会在执行加载方法之前执行我们交换出来的方法，在这个方法里面我们传递一个与JS匹配的标识，通过标识相同来获取数据，这样做的目的就是能从最开始就监控数据的传递。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）