仿照微信朋友縮圖實現
阿新 • • 發佈：2019-01-30
<!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].onload=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.onload=function(){ minPic.appendChild(this); } } getImg(document.getElementsByTagName("img"),150,150); })(window,document) </script> </html>
整個程式碼邏輯都比較簡單，用到Canvas drawImage方法裡面的幾個引數 ，getImg主要是判斷 是寬圖，長圖，還是正方形，然後再利用Canvas 的drawImage設定座標和寬高，最後在輸出，縮圖寬高不能比的話 我們樣式控制會失真，需要一定比例的裁剪，我看了一下朋友圈的縮圖就是通過裁剪比例再變成正方形實現。
需要提醒大家的事 上面的程式碼需要在伺服器上面執行，Canvas的圖片好像不允許跨域。