Автоматически изменяйте размеры изображений с помощью свойства width и сохраняйте их на компьютере

Question

Проблема: при разработке сайта я иногда использовал width: xxx; на изображениях. Таким образом, я смог настроить изображения. Тем не менее, это создает накладные расходы в размере.

Решение: Автоматически извлекать все изображения, которые имеют ширину: правильно. Измените их размер так: свойство width сохраняет размеры. Сохраните файл в формате .gif на компьютере.

Кто-нибудь знает хорошее решение?

Answer 1

Вы можете сделать это с помощью GD (если у вас включен GD или GD2 в вашей установке PHP) 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;
    }
?>

теперь вы можете просто позвонить resizeImage("example.gif",120);

Answer 2

Я написал фрагмент кода JavaScript, чтобы заменить все изображения в документе версией с измененным размером, чтобы использовать <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]);
    }
}

Если вы заинтересованы в написании скриптов для элемента Canvas, взгляните на Mozilla Canvas tuturial .