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

 

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

 

流程为：

 

获取img标签，可以用各种方法，ById，ByTags，elementFromPoint等。

创建canvas标签，创建context，把canvas设置成和图片一样大

把img画到context里

返回canvas或context里的数据

前3步是必须的，第4步可以有两种方式，返回context的RGBA数据，或者返回canvas的dataURL（整个图片以base64编码）。

第一种返回方式：

 

function() {  
    var img = document.getElementById("myimg");  
    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");  
    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"]]];

 

 

设置了5分，主要是想知道有多少人用得上这个技术而已。如果没积分，可以直接联系我传给你。欢迎更多同行交流。

运行demo，等网页加载完毕，点击按钮即可，请自己在ViewController里加断点就好，相信你懂的。

 

补充：web前端 , JavaScript ,