0

ユーザーが画像をアップロードできるエンドユーザー向けのアプリケーションを1つ持っています。ユーザーが重い画像をアップロードすると、アプリケーションが遅くなります。

異なるサイズの画像を生成する 1 つのモジュールでも、Angular JS の遅延読み込み画像を使用しました。https://github.com/afklm/ng-lazy-image

そして、デバイスと画像サイズに基づいて、画像が準備されました。

今、私はプレーンなJavaScriptコード/プロセス/テクニックで同じことをしたいと思っています.

誰でも私を案内できますか？

4

1 に答える 1

0

ちょっと話が逸れるかもしれませんが、画像のサイズを変更したバージョンを提供するほうがよいと思います。これにより、クライアントとサーバーの両方の帯域幅が少なくなります。

画像のサイズを変更したり、ネイティブの php 関数を使用したりするためのライブラリがたくさんあります。

私が好む手順は次のとおりです。->画像のアップロード->画像の保存->画像のサイズ変更と新しいサイズ名での保存->ユーザーの選択に応じて、正確な画像を送信します

例：

アップロード Image1.jpg (1000x1000 ピクセル)

-> gets Saved to '/images/Image1.jpg'
-> User request a (let's say) 200x200 size of that image
-> The script will resize to 200x200 and save it as Image1_200x200.jpg 
(which will have the real file size of 200x200, 
so the server will send the 200x200 image and not the 1000x1000 (original image)

このようにして、多くの画像を保存し、画像をより高速に提供します。それまでに、フォールドの下にある画像を遅延読み込みすることを考えることができます。

私は個人的にWideImageを使用していますが、Zebra_Imageもあります。

私が使用するWideImageのコードは（キャッシュ付き）です

/* Merge, to get full path */ 
    $fullpath = $Path . $Filename;
    if (!file_exists($cache_dir)) {
        $old = umask(0);
        mkdir($cache_dir . DS, 0775);
        umask($old);
    }


    /* cache file */
    $cache = $cache_dir . DS . $Filename;
 /* Create Cache */
       if (!file_exists($cache) || $recreate === true)
        WideImage::load($fullpath)->resize($Width, $Height, 'outside')->crop(
                'center', 'center', $Width, $Height)->saveToFile($cache, $Quality);


    /* Return Cache filepath */
    return $cache;

$cache は、サイズ変更後に保存するファイルです。

それはどういうわけか主題から外れていますが、参考になると思います。

乾杯！

于 2016-04-04T15:25:53.557 に答える