0

ウェブサイトに画像を表示しながら画像のサイズを変更することはできますか?/画像をアップロードした後に画像のサイズを変更するにはどうすればよいですか?

追加している間、私は元の画像を元のフォルダにアップロードし、1つのサムネイルを作成してthumbフォルダにアップロードしています。しかし、ウェブサイトでは、さまざまなサイズの非常に多くの場所に画像を表示する必要があります。したがって、画像の縮小を避けるために、表示するために必要なサイズに合わせて画像のサイズを変更する必要があります。

または、アップロード中に必要なすべてのサイズの画像を作成する必要がありますか?

4

3 に答える 3

1

高さと幅の比率を取得し、同じ比率で新しい高さと幅を動的に変更すると、縮小せずに画像のサイズを変更できます。ただし、大きな画像をロードし、高さと幅を使用して小さなサイズで表示する場合は、小さな画像が必要になります。ユーザーにとって不要な読み込み時間です。

于 2012-07-13T04:49:45.203 に答える
1

もちろん、それは可能です。その上、それはおそらく最良のアプローチです:要求によって必要なサムネイル画像を作成すること。あなたのウェブサイトが開発段階にある場合、あなたはどの次元が明日デザイナーを作成するかを推測することは決してありません。そして、アップロード機能に何度も戻って、新しいデザインに合わせます。設計とロジックの間の強い依存関係を取り除く価値があります。

codeignitorについてはよくわかりません。とにかく、テンプレートで次のようなものを使用します。

class Image {

    public $filename;
    public $caption;

    /**
     * Return full path to image.
     * @return string path to file to make thumb
     */
    public function fullPath() {
        return "data/files/{$this->filename}";
    }

    /**
     * Renders HTML IMG for thumb of given size.
     * 
     * @param int $width max width, set to -1, if not important
     * @param type $height max height, set to -1, if not important
     * @return string html tag for image with correct width and height attributes
     */
    public function htmlTag($width, $height) {
        $t = $this->getThumb($width, $height);
        return "<img src=\"{$t}\" alt=\"{$this->caption}\" width=\"{$width}\" height=\"{$height}\" />";
    }

    /**
     * Get/create thumb image
     * @param int $width width of the image
     * @param int $height height of the image
     * @return string path to the image
     */
    public function getThumb(&$width, &$height) {
        $currentImage = $this->fullPath();

        $thumbFilename = md5($this->path . $width . $height) . '.png';

        $thumbDir = 'data/thumbs/';
        $thumbFilename = "{$thumbDir}/{$thumbFilename}";

        // thumb already done?
        if (is_file($thumbFilename)) {
            // get real size to create correct html img tag
            if ($width<0 || $height<0) {
                $size = getimagesize($thumbFilename);
                $width = $size[0];
                $height = $size[1];
            }
            return $thumbFilename;
        }

        $ext = strtolower(pathinfo($currentImage, PATHINFO_EXTENSION));
        if ($ext == 'jpeg' || $ext == 'jpg') {
            $source = imagecreatefromjpeg($currentImage);
        } else if ($ext == 'gif') {
            $source = imagecreatefromgif($currentImage);
        } else if ($ext == 'png') {
            $source = imagecreatefrompng($currentImage);
        }

        $currentWidth = imagesx($source);
        $currentHeight = imagesy($source);

        // the sizes which we really will apply (default setup)
        $realWidth = $width;
        $realHeight = $height;
        $realX = 0;
        $realY = 0;

        // decide regarding cutting
        // if all params > 0, cuttin will be done
        $cut = FALSE;
        if ($width > 0 && $height > 0) {
            $cut = TRUE;
        } else if ($width < 0) { // width is not important, set proportion to that
            $width = $realWidth = round($currentWidth * $height / $currentHeight);
        } else if ($height < 0) { // height is not imporant
            $height = $realHeight = round($currentHeight * $width / $currentWidth);
        }

        if ($cut) {
            $kw = $currentWidth / $width;
            $kh = $currentHeight / $height;

            $k = $kw < $kh ? $kw : $kh;

            $realWidth = round($currentWidth / $k);
            $realHeight = round($currentHeight / $k);

            if ($kh < $kw) {
                $realX = round(($realWidth - $width) / 2) * $k;
            } else {
                $realY = round(($realHeight - $height) / 2) * $k;
            }
        }

        $virtual = imagecreatetruecolor($width, $height);
        imagealphablending($virtual, false);
        $col = imagecolorallocatealpha($virtual, 0, 0, 0, 127);
        imagefill($virtual, 0, 0, $col);
        imagesavealpha($virtual, true);

        imagecopyresampled($virtual, $source, 0, 0, $realX, $realY, $realWidth, $realHeight, $currentWidth, $currentHeight);

        // create file
        imagepng($virtual, $thumbFilename);

        return $thumbFilename;
    }
}

使用法:

$image = new Image();
$image->filename = "image.jpeg"; // really stored in 'data/files/image.jpg', let's say 300x400px
$image->caption = "My Image";

// get thumb 50x50: left and right parts of image will be cut off
echo $image->htmlTag(50, 50);

// get thumb of width 100 (height does not matter, keep proportions)
echo $image->htmlTag(100, -1);

// get thumb of height 100 (width does not matter, keep proportions)
echo $image->htmlTag(-1, 100);
于 2012-07-13T05:00:55.757 に答える
1

Arun Jainの回答は、質問の技術的/実用的な側面を便利な方法で解決します。

より一般的には、このようなコンピュータを集中的に使用するタスクを処理する場合、ほとんどの場合、怠惰な方法で実行することをお勧めします。少なくともCPUの観点からは。

その理由は、実際に要求される前に、特定の画像が特定の解像度で読み込まれるかどうかがわからないためです。一度要求されると、ほとんどの場合、後で使用するために保存するよりも、要求ごとに再計算する方がコストがかかります。一般的な設計は、キャッシュでまだ利用できない場合は要求されたときに画像を計算/サイズ変更し、後で使用するために保存することです。

timthumbライブラリは、私が自分で使用したことがないと思って、これらすべての点をうまく処理しているようです。

ライブラリでいくつかの非常に基本的なチェックを行いました。セキュリティを念頭に置いているようですが、ベータ版ソフトウェアとして宣伝されていることを強調したいと思います。

于 2012-07-13T05:01:16.233 に答える