利用javascript和canvas获取UIWebView网页里的图片(不用再下载)

原创 2013年10月19日 09:54:28

在UIWebView网页里要获取img标签的图片,网上的方法都是通过获取到URL然后自己再下载一遍,耗流量、耗时间、不能通过验证。

这里是利用UIWebView的stringByEvaluatingJavaScriptFromString函数,执行一段js,返回图片数据。

流程为:

  1. 获取img标签,可以用各种方法,ById,ByTags,elementFromPoint等。
  2. 创建canvas标签,创建context,把canvas设置成和图片一样大
  3. 把img画到context里
  4. 返回canvas或context里的数据
前3步是必须的,第4步可以有两种方式,返回context的RGBA数据,或者返回canvas的dataURL(整个图片以base64编码)。
第一种返回方式:

function() {
	var img = document.getElementById("myimg");  // 可改成document.getElementsByTagName('img')[0]
	var canvas = document.createElement("canvas");
	var context = canvas.getContext("2d");
	canvas.width = img.width;
	canvas.height = img.height;
	context.drawImage(img,0,0,img.width,img.height);
	var imageData = context.getImageData(0,0,img.width,img.height);
	var dataArray = new Array(imageData.data.length);
	for(var i = 0; i < dataArray.length;i++)
		dataArray[i] = imageData.data[i];
	return dataArray.toString();
}

返回的数据格式是 rrr,ggg,bbb,aaa,rrr,ggg,bbb,aaa,rrr,...  把这些数据传到CGBitmapContext里再转成CGImage就能用了。CGImage和UIImage可以互转。

第二种返回方式:

function() {
    var img=document.getElementById("myimg");  // 可改成document.getElementsByTagName('img')[0]
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");
    canvas.width = img.width;
    canvas.height = img.height;
    context.drawImage(img,0,0,img.width,img.height);
    return canvas.toDataURL("image/png");
}
返回的数据是base64编码的dataURL,利用第三方库解码后,得到的NSData可以直接创建UIImage。顺便普及一个知识,创建UIImage的NSData里是完整的jpg或png图片数据,即经过压缩编码以及有图片信息数据的,不能直接用RGBA数据创建UIImage或CGImage。


一般来说是希望点击网页上的某个图片,然后保存这个图片,可参考http://blog.csdn.net/favormm/article/details/6614441来结合本文做到。

有个特别的问题是,如果img的src是绝对路径表示外域服务器的话,这方法是不行的,浏览器禁止跨域访问。可以把demo里的myimg改成myimg2,那就会失败。demo是访问了测试页面https://code.csdn.net/hursing/pagetest/blob/master/getimage.html

[m_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://code.csdn.net/hursing/pagetest/blob/master/getimage.html"]]];

2014年1月开始,csdn把此链接显示为纯文本了,所以链接已失效,请自行修改demo指向其他网页。例如可以访问http://www.chromium.org,然后把js改成 document.getElementsByTagName('img')[0]


本文没有完整列出所有代码,但demo是完整的,由xcode5创建,下载地址:

http://download.csdn.net/detail/hursing/6421863
设置了5分,主要是想知道有多少人用得上这个技术而已。如果没积分,可以直接联系我传给你。欢迎更多同行交流。
运行demo,等网页加载完毕,点击按钮即可,请自己在ViewController里加断点就好,相信你懂的。
为了做演示,有些冗余代码,但简单修改就能用上了,请记得加上错误判断


转载请注明出处:http://blog.csdn.net/hursing
版权声明:转载请注明出处:http://blog.csdn.net/hursing

UIWebview使用缓存并且保证实时性(iOS web资源缓存解决方案、异步后台更新。离线缓存)

webview缓存策略的介绍 使用webview加载页面的时候,最理想的情况是: 资源文件没有更新,就只加载缓存文件。如果有更新,则第一时间使用新的文件。 UIWebview中提供的缓存策...

[IOS]获取网页上数据(图片、文字、视频)

[IOS]获取网页上数据(图片、文字、视频) Demo地址:http://download.csdn.net/detail/u012881779/8831835 获取网页上所有图片...

ios 11 适配遇到的问题

问题1.自定义UIToolBar,升级到ios 11 之后,点击没有任何反应 原因:iOS11的UIToolbar 增添了有一个UIToolbarContentView的子控件,覆盖在最表层,以至于添...

从零开始学_JavaScript_系列(34)——将canvas获取的图片下载到本地

调用摄像头 + 摄像头图像映射到canvas上 + 将拍摄到的图片下载到本地

UIWebview获取网页中所有图片并加入点击事件,实现浏览图片的效果

- (void)webViewDidFinishLoad:(UIWebView *)aWebView {          //调整字号     NSString *str = @"...

JavaScript利用Canvas识别图片

  • 2013年10月24日 12:52
  • 5KB
  • 下载

UIWebView 本地加载网页和文件(图片素材,js,css)(功能插件化)

技术思想就是先将开发完成的html功能打包压缩(zip)放在服务器上,移动端使用某个功能时就下载对应的压缩文件,然后移动端解压使用对应的网页文件。为了体验效果比较好,所以将这些放在本地。 1.建议将U...
  • Sun5579
  • Sun5579
  • 2017年05月09日 15:52
  • 157

iOS UIWebview加载网页时的图片放大,缩小,保存到相册,文字的拷贝

//---缩放     _webView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexi...

iOS开发UIWebView如何加载本地带有JS和本地图片的网页

本文讲述了,iOS开发中,使用UIWebView加载本地html时,如何让html加载本地的图片。...

iOS之支持https与ssl双向验证(包含:解决UIWebView加载不了https网页的图片,css,js等外部资源)

关于iOS的ATS适配和ssl双向验证,在我的项目中都实现了,但是对于苹果的审核,一定要详细的说明在plist文件你配置的键值是做什么的....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:利用javascript和canvas获取UIWebView网页里的图片(不用再下载)
举报原因:
原因补充:

(最多只允许输入30个字)