仿照微信朋友缩略图实现

最新推荐文章于 2021-07-29 00:28:00 发布

寓言s

最新推荐文章于 2021-07-29 00:28:00 发布

阅读量2.4k

点赞数

分类专栏： javascript canvas

本文链接：https://blog.csdn.net/u011551941/article/details/50408927

版权

javascript canvas 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" />
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
        <meta name="format-detection" content="telephone=no"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            div{
                /*display: inline-block;*/
               
                float: left;
            }
            
            h2{
                width:100%;
                text-align: center;
                margin-top:50px;
            }
            #minPic{
                margin-top:80px;
                text-align: center;
            }
            #maxPic{overflow: hidden;}
            #minPic img{ margin:0 2%;}
        </style>
    </head>
    <body>
        <section id="maxPic">
            <h2>仿照微信朋友圈正方形不失真缩略图</h2>
            <div>
                <h2>宽图</h2>
                <img src="8.png" alt="" />
            </div>
            <div>
                <h2>长图</h2>
                <img src="6.jpg" alt="" />
            </div>
            <div>
                <h2>正方形</h2>
                <img src="11.png" alt="" />
            </div> 
        </section>
        <h2>裁剪缩小后的图</h2>
        <section id="minPic">
            
            
        </section>
    </body>
    <script>
        !(function(win,doc){
            /**
             * *获取所需要缩略的图片
             * @param  {[type]} imgs [description]
             * @param  {[type]} w    [description]
             * @param  {[type]} h    [description]
             * @return {[type]}      [description]
             */
            function getImg(imgs,w,h){
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].οnlοad=function(){
                        var imgW=this.width,
                            imgH=this.height;
                            if(imgW/imgH>1){//宽图
                                var x=Math.floor((imgW-imgH)/2);
                                    imgTocanvas(this,x,0,imgH,imgH,w,h);      
                            }else if(imgH/imgW>1){//长图
                                 var y=Math.floor((imgH-imgW)/2);
                                   imgTocanvas(this,0,y,imgW,imgW,w,h); 
                            }else{//正方形
                                imgTocanvas(this,0,0,imgW,imgW,w,h); 
                            }
                    }
                };
            }
            /**
             * *裁减图片
             * @param  {[type]} img [description]
             * @param  {[type]} x   [description]
             * @param  {[type]} y   [description]
             * @param  {[type]} w   [description]
             * @param  {[type]} h   [description]
             * @param  {[type]} w1  [description]
             * @param  {[type]} h1  [description]
             * @return {[type]}     [description]
             */
            function imgTocanvas(img,x,y,w,h,w1,h1){
                var Mycanvas=doc.createElement("canvas"),
                    cont=Mycanvas.getContext("2d"),
                    minPic=doc.getElementById("minPic"),
                    imger=new Image();
                    Mycanvas.width=w1;
                    Mycanvas.height=h1;
                    cont.drawImage(img, x, y, w, h, 0, 0, w1, h1);
                    imger.setAttribute('crossOrigin', 'anonymous');
                    imger.src=Mycanvas.toDataURL("image/png");
                    imger.οnlοad=function(){
                        minPic.appendChild(this);
                    }
            }
            getImg(document.getElementsByTagName("img"),150,150);
        })(window,document)
    </script>
</html>

整个代码逻辑都比较简单，用到Canvas drawImage方法里面的几个参数，getImg主要是判断是宽图，长图，还是正方形，然后再利用Canvas 的drawImage设置坐标和宽高，最后在输出，缩略图宽高不能比的话我们样式控制会失真，需要一定比例的裁剪，我看了一下朋友圈的缩略图就是通过裁剪比例再变成正方形实现。

需要提醒大家的事上面的代码需要在服务器上面运行，Canvas的图片好像不允许跨域。