自動的に幅プロパティでイメージのサイズを変更し、コンピュータに保存します。

Question

問題：ウェブサイトを設計するときに、時々幅：xxxを使用しました。画像にそうすれば、私は画像を調整することができました。しかし、それはサイズのオーバーヘッドを作ります。

解決方法：自動的に幅：正味のすべての画像を取得します。大きさを保持してwidthプロパティにリサイズします。ファイルを.gifとしてコンピュータに保存します。

良い解決法を知っている人はいますか？

（あなたはGDやGD2は、PHPのインスタレーションで有効になっている場合）あなたはGDを使用してそれを行うことができます

Answer 1

http://php.net/image

<?php 
    function resizeImage($image,$width=null,$height=null){ 
     if(!$width and !$height) return false; 
     $info = getimagesize($image); 

     if(!$height) $height = $width/$info[0]*$info[1]; 
     if(!$width) $width = $height/$info[1]*$info[0]; 

     $new = newEmptyImage($width, $height); 
     $resource = imagecreatefromgif($image); 

     imagecopyresampled($new,$resource,0,0,0,0,$width,$height,$info[0],$info[1]); 

     return imagegif($new,$image); 
    } 
    function newEmptyImage($width,$height){ 
     $new = imagecreatetruecolor($width,$height); 
     imagealphablending($new, false); 
     imagesavealpha($new, true); 
     $bg = imagecolorallocatealpha($new,0,0,0,127); 
     imagefill($new,0,0,$bg); 

     return $new; 
    } 
?> 

今、あなたは単に私のJavaScriptの作品を書いたresizeImage("example.gif",120);

Answer 2

を呼び出すことができます<canvas>を使用して、ドキュメントのすべてのイメージをサイズ変更されたサイズに置き換えるコード。 フィドル：あなたはキャンバス要素をスクリプトに興味があるならhttp://jsfiddle.net/F2LK2/

function imageToFit(img) { 
    var width = img.width; 
    var height = img.height; 
    var canvas = document.createElement('canvas'); 
    var context = canvas.getContext('2d'); 
    canvas.width = width; 
    canvas.height = height; 
    context.drawImage(img, 0, 0, width, height); 
    img.parentNode.replaceChild(canvas, img); 
} 
window.onload = function(){ 
    var image = document.getElementsByTagName("img"); 
    for(var i=image.length-1; i>=0; i--){ 
     //Backwards, because we replace <img> by <canvas> 
     imageToFit(image[i]); 
    } 
} 

、MozillaのCanvas tuturialを見ています。