最近实现了这样的一个需求:点击webView中的图片,进入图片预览的模式。为了避免图片的重复下载,需要直接显示网页中已经下好的图片。
因为是webview里面的图片,所以就想到从javascript入手去获取webView里面的图片.
function getImgDataWithID(imgID){
var img = document.getElementById("img");
var c = document.createElement("canvas");
c.width = img.width;
c.height = img.height;
var ctx=c.getContext("2d");
ctx.drawImage(img,0,0,img.width,img.height);
var result = c.toDataURL("image/png");
return result;
}
复制代码
这样就获取到了图片本身的数据,其中c.toDataURL("image/png");
这句话是把canvas
里面的图片数据提取出来并转化成base64的格式。
但是这种方法有2个缺陷:
- 就是无法拉取
跨域
的图片。 如果是加载本地的html到UIWebView的话,跨域
问题是不会出现的,在网站上用这个方法的话就不行了。 - 图片的base64过程是比较消耗性能的。js这边有方法可以获取到图片的原始数据
var imageData = context.getImageData(0,0,img.width,img.height);
复制代码
但是,暂时没有找到方法把这种数据传到iOS这边。
iOS这边实现的代码如下
let jsString = webView.stringByEvaluatingJavaScriptFromString("getImgDataWithID(\"imgID\");")
if let data = NSData(base64EncodedString: sub) {
return UIImage(data: data)
}
复制代码