美文网首页
iOS与【WEB--图片处理】

iOS与【WEB--图片处理】

作者: NJ_墨 | 来源:发表于2020-05-24 23:15 被阅读0次
    -(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';
    }
};

    相关文章

      网友评论

          本文标题：iOS与【WEB--图片处理】

          本文链接：https://www.haomeiwen.com/subject/ubcjdctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|iOS与【WEB--图片处理】|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！