关闭

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

标签: UIWebViewJavaScriptimg图片canvas获取保存
11697人阅读 评论(40) 收藏 举报
分类:

在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创建,下载地址:

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


转载请注明出处:http://blog.csdn.net/hursing
2
0

猜你在找
深度学习基础与TensorFlow实践
【在线峰会】前端开发重点难点技术剖析与创新实践
【在线峰会】一天掌握物联网全栈开发之道
【在线峰会】如何高质高效的进行Android技术开发
机器学习40天精英计划
Python数据挖掘与分析速成班
微信小程序开发实战
JFinal极速开发企业实战
备战2017软考 系统集成项目管理工程师 学习套餐
Python大型网络爬虫项目开发实战(全套)
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:918363次
    • 积分:9048
    • 等级:
    • 排名:第1929名
    • 原创:123篇
    • 转载:0篇
    • 译文:0篇
    • 评论:407条
    联系方式
    博客专栏
    最新评论