iOS与【WEB--图片处理】

作者: NJ_墨 | 来源:发表于2020-05-24 23:15 被阅读0次

iOS与【WEB--图片处理】
iOS 事件处理机制与图像渲染过程
iOS性能优化——图片加载和处理
iOS 图片压缩方法
iOS 图片加载与处理
[iOS] 图像处理：一种高效裁剪图片圆角的算法
imageView的处理
iOS 图片处理
iOS图片处理
iOS 图片处理

-(void)webFinshAddJs {
    
    //拦截网页图片 并修改图片大小
    [_web stringByEvaluatingJavaScriptFromString:
     @"var script = document.createElement('script');"
     "script.type = 'text/javascript';"
     "script.text = \"function ResizeImages() { "
     "var myimg,oldwidth;"
     "var maxwidth=300;" //缩放系数
     "for(i=0;i <document.images.length;i++){"
     "myimg = document.images;"
     "if(myimg.width > maxwidth){"
     "oldwidth = myimg.width;"
     "myimg.width = maxwidth;"
     "myimg.height = myimg.height * (maxwidth/oldwidth);"
     "}"
     "}"
     "}\";"
     "document.getElementsByTagName('head')[0].appendChild(script);"];
    
    [_web stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
}

拦截图片添加事件

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    //调整字号
    NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";
    [webView stringByEvaluatingJavaScriptFromString:str];
    
    //js方法遍历图片添加点击事件 返回图片个数
    static  NSString * const jsGetImages =
    @"function getImages(){\
    var objs = document.getElementsByTagName(\"img\");\
    for(var i=0;i<objs.length;i++){\
    objs[i].onclick=function(){\
    document.location=\"myweb:imageClick:\"+this.src;\
    };\
    };\
    return objs.length;\
    };";
    
    [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
    
    //注入自定义的js方法后别忘了调用
    [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
}


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    //将url转换为string
    NSString *requestString = [[request URL] absoluteString];
    
    //hasPrefix 判断创建的字符串内容是否以pic:字符开始
    if ([requestString hasPrefix:@"myweb:imageClick:"]) {
        NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
        return NO;
    }
    return YES;
}

网页高度调试

//设置内容，这里包装一层div，用来获取内容实际高度（像素），htmlcontent是html格式的字符串
NSString * htmlcontent = [NSString stringWithFormat:@"<div id=\"webview_content_wrapper\">%@</div>",_htmlString];
    
[_web loadHTMLString:htmlcontent baseURL:nil];

//获取页面高度（像素）
NSString * clientheight_str = [webView stringByEvaluatingJavaScriptFromString: @"document.body.offsetHeight"];
    float clientheight = [clientheight_str floatValue];
    //设置到WebView上
    webView.frame = CGRectMake(0, 0, self.view.frame.size.width, clientheight);
    //获取WebView最佳尺寸（点）
    CGSize frame = [webView sizeThatFits:webView.frame.size];
    //获取内容实际高度（像素）
    NSString * height_str= [webView stringByEvaluatingJavaScriptFromString: @"document.getElementById('webview_content_wrapper').offsetHeight + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-top'))  + parseInt(window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('margin-bottom'))"];
    float height = [height_str floatValue];
    //内容实际高度（像素）* 点和像素的比
    height = height * frame.height / clientheight;
    //再次设置WebView高度（点）
    webView.frame = CGRectMake(0, 0, self.view.frame.size.width, height);

-(void)htmlString {
    
    _htmlString = @"<p>Think Defferent</p><p>\
    <img src=\"http://api.map.baidu.com/staticimage?center=121.473704%2C31.230393&zoom=11&width=558&height=360&markers=121.473704%2C31.230393&markerStyles=l%2CA\" width=\"320\" height=\"200\" title=\"img：真好\" alt=\"img：真好\" />\
    <img src=\"http://api.map.baidu.com/staticimage?center=121.473704%2C31.230393&zoom=11&width=558&height=360&markers=121.473704%2C31.230393&markerStyles=l%2CA\" width=\"320\" height=\"200\" title=\"img：真好\" alt=\"img：真好\" />\
    <img src=\"http://api.map.baidu.com/staticimage?center=121.473704%2C31.230393&zoom=11&width=558&height=360&markers=121.473704%2C31.230393&markerStyles=l%2CA\" width=\"200\" height=\"100\" alt=\"\" /></p>";
}

Window.getComputedStyle()方法返回一个对象，
该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。
私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

方法JS调试(html2)

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    [webView stringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"];

}
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:
(UIWebViewNavigationType)navigationType //这个方法是网页中的每一个请求都会被触发的
{
    NSString *path=[[request URL] absoluteString];
    
    NSLog(@"点击内容-----------%@",path);
    return YES;
}

===========================

HTML内容------1

<!DOCTYPE HTML>
<html><head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       
<!--       这样显示的结果网页的最小宽度会是device-width；但有时候不需要这个宽度，就需要修改width=device-width为width=myWidth;-->
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
           
           <title>这就是开始的起点。。。。</title>
           
           <!--第一个是给你的webview里所有图片加上点击事件，第二个方法为点击后返回图片的URL-->
           

           </head
           
           <body>这就是开始的起点。。。。过程之一

           <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1638695478,3359394321&fm=26&gp=0.jpg"/>
           
           <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2066467165,3953601744&fm=26&gp=0.jpg"/>
           
           <div class="album-wrap" style="width:159px;height:220px;">
               <img class="picture" alt="这是什么" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2638175241,146319193&fm=26&gp=0.jpg" style="width:159px;height:220px;"/>
           </div>
           
           <tr><td align="left" valign="top"><div class="para"><b>Call打气</b></div>
               <div class="para">我们不易样，不一样啊，在这混乱的年代<sup>[181]</sup><a class="sup-anchor" name="ref_[181]_1513794">&nbsp;</a>
               </div>
           </td><td align="left" valign="top"><div class="para" style="text-align: center;"><div class="lemma-picture text-pic layout-center" style="width:150px; margin: 0px auto; clear: both; float: none; display: block;">
               <a class="image-link" nslog-type="9317"
                   href="/picture/1513794/1513794/0/8b13632762d0f703975181ae0efa513d2797c5e4.html?fr=lemma&ct=single" target="_blank"
                   title="" style="width:150px;height:126px;">
                   <img  class="lazy-img" src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=c029a987df09b3def4bfe268fcbe6cd3/5366d0160924ab18014cefd83bfae6cd7a890b82.jpg" data-src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=b5c7ca86b14543a9f11bfdce2e168a7b/8b13632762d0f703975181ae0efa513d2797c5e4.jpg"  alt="" style="width:150px;height:126px;"/>
               </a>
           </div></div>
           </td></tr>
           
       </body>

</html>

HTML内容------2

<!DOCTYPE HTML>
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       
<!--       这样显示的结果网页的最小宽度会是device-width；但有时候不需要这个宽度，就需要修改width=device-width为width=myWidth;-->
       <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
           <title>这is js</title>
           
           <!--第一个是给你的webview里所有图片加上点击事件，第二个方法为点击后返回图片的URL-->
           
           <!-- 加载js中的方法 -->
           <script type="text/javascript" src="iphone.js"></script>

           </head
           <body>这is错错错

           <img src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=c6044800ef24b899da3c7e3a5e061d59/6a600c338744ebf8f470063fdff9d72a6059a7a9.jpg"/>
           
           <img src="http://c.hiphotos.baidu.com/baike/s%3D220/sign=0eb57fa6860a19d8cf03830703fa82c9/50da81cb39dbb6fd906cc3310f24ab18972b37f5.jpg"/>
           
           <div class="album-wrap" style="width:159px;height:220px;">
               <img class="picture" alt="什么是什么" src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=c6044800ef24b899da3c7e3a5e061d59/6a600c338744ebf8f470063fdff9d72a6059a7a9.jpg" style="width:159px;height:220px;"/>
           </div>
           
           <tr><td align="left" valign="top"><div class="para"><b>加油打气</b></div>
               <div class="para">4月11日，由。。。。。。。<sup>[181]</sup><a class="sup-anchor" name="ref_[181]_1513794">&nbsp;</a>
               </div>
           </td><td align="left" valign="top"><div class="para" style="text-align: center;"><div class="lemma-picture text-pic layout-center" style="width:150px; margin: 0px auto; clear: both; float: none; display: block;">
               <a class="image-link" nslog-type="9317"
                   href="/picture/1513794/1513794/0/8b13632762d0f703975181ae0efa513d2797c5e4.html?fr=lemma&ct=single" target="_blank"
                   title="" style="width:150px;height:126px;">
                   <img  class="lazy-img" src="https://ss3.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=c029a987df09b3def4bfe268fcbe6cd3/5366d0160924ab18014cefd83bfae6cd7a890b82.jpg" data-src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=b5c7ca86b14543a9f11bfdce2e168a7b/8b13632762d0f703975181ae0efa513d2797c5e4.jpg"  alt="" style="width:150px;height:126px;"/>
               </a>
           </div></div>
           </td></tr>
       </body>

</html>

iphone.js

self.onload = function(){
    var img_template = '<img src="#{img_src}" /><em class="em"></em>',
        img_nodes = document.body.getElementsByTagName('img'),
        imgs = [],
        srcs = [];
    for(var i=0,l=img_nodes.length;i<l;++i){
        imgs.push(img_nodes.item(i));
    }
    
    var imgcheck = function(){
        //大于100的加点击方法
        if(this.width > 100){
            var src = this.src,
                new_img_node = document.createElement('div');
            srcs.push(src);
            this.parentNode.replaceChild(new_img_node,this);
            new_img_node.innerHTML = img_template.replace(/#{img_src}/g,src);
            new_img_node.className = 'img_boxs';
            new_img_node.addEventListener('click', function(){
                location.href = 'click:' + src + ';' + srcs.join(';');
            }, false);
        }
    }
    
    
    for(var i=0,l=imgs.length,img;i<l;++i){
        img = imgs[i];
        img.onload = imgcheck;
        var src = img.src;
        img.src = '';
        img.src = src;
    }
    var video_template = '<a rel="#{video_src}" onclick="self.location=\'click2:\'+this.rel"></a>';
    
    var video_nodes = document.body.getElementsByTagName('video');
    var videos = [];
    for(var i=0,l=video_nodes.length;i<l;++i){
        videos.push(video_nodes.item(i));
        video_nodes[i].pause();
    }
    
    for(var i=0,l=videos.length;i<l;++i){
        var src = videos[i].src;
        var new_video_node = document.createElement('div');
        videos[i].parentNode.replaceChild(new_video_node,videos[i]);
        new_video_node.innerHTML = video_template.replace(/#{video_src}/g,src);
        new_video_node.className = 'video_boxs';
    }
};