js實現圖片的等比例縮放
CreateTime--2018年3月6日14:04:18
Author:Marydon
1.代碼展示
/** * 圖片按寬高比例進行自動縮放 * @param ImgObj * 縮放圖片源對象 * @param maxWidth * 允許縮放的最大寬度 * @param maxHeight * 允許縮放的最大高度 * @usage * 調用：<img src="圖片" onload="javascript:DrawImage(this,100,100)"> */ function DrawImage(ImgObj, maxWidth, maxHeight){ var image = new Image(); //原圖片原始地址（用於獲取原圖片的真實寬高，當<img>標簽指定了寬、高時不受影響） image.src = ImgObj.src; // 用於設定圖片的寬度和高度 var tempWidth; var tempHeight; if(image.width > 0 && image.height > 0){ //原圖片寬高比例 大於 指定的寬高比例，這就說明了原圖片的寬度必然 > 高度 if (image.width/image.height >= maxWidth/maxHeight) { if (image.width > maxWidth) { tempWidth = maxWidth; // 按原圖片的比例進行縮放 tempHeight = (image.height * maxWidth) / image.width; } else { // 按原圖片的大小進行縮放 tempWidth = image.width; tempHeight = image.height; } } else {// 原圖片的高度必然 > 寬度 if (image.height > maxHeight) { tempHeight = maxHeight; // 按原圖片的比例進行縮放 tempWidth = (image.width * maxHeight) / image.height; } else { // 按原圖片的大小進行縮放 tempWidth = image.width; tempHeight = image.height; } } // 設置頁面圖片的寬和高 ImgObj.height = tempHeight; ImgObj.width = tempWidth; // 提示圖片的原來大小 ImgObj.alt = image.width + "×" + image.height; } }
2.測試
<body> <h2>原圖片</h2> <img src="6.png" alt="500x3500"/> <h2>按比例縮放后的圖片</h2> <img src="6.png" onload="javascript:DrawImage(this,145,100)"/> </body>
3.效果展示
說明：還有一種最簡單的方法，就是：給圖片只設置寬度或高度，頁面加載的時候，瀏覽器會自動對圖片進行等比縮放或放大。