14

(拡張 API chrome.tabs.captureVisibleTab を使用して) Chrome ブラウザーで表示されているタブをキャプチャし、データ URI スキーム (Base64 でエンコードされた文字列) でスナップショットを受信して​​います。

画像を特定のサイズに縮小するために使用できる JavaScript ライブラリはありますか?

現在、CSS を使用してスタイルを設定していますが、ほとんどの場合、画像が必要なサイズの 100 倍大きくなるため、パフォーマンスのペナルティを支払う必要があります。追加の懸念は、スナップショットを保存するために使用する localStorage の負荷です。

このデータURIスキームでフォーマットされた画像を処理し、縮小してサイズを縮小する方法を知っている人はいますか?

参考文献:

4

2 に答える 2

22

これは、必要なことを行う関数です。画像の URL (例: の結果ですchrome.tabs.captureVisibleTabが、任意の URL である可能性があります)、目的のサイズ、およびコールバックを指定します。プロパティを設定したときに画像がすぐに読み込まれるという保証がないため、非同期で実行されsrcます。データ URL を使用すると、何もダウンロードする必要がないため、おそらくそうなるでしょうが、試したことはありません。

コールバックには、結果の画像がデータ URL として渡されます。toDataURLChrome の実装では image/jpeg がサポートされていないため、結果の画像は PNG になることに注意してください。

function resizeImage(url, width, height, callback) {
    var sourceImage = new Image();

    sourceImage.onload = function() {
        // Create a canvas with the desired dimensions
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;

        // Scale and draw the source image to the canvas
        canvas.getContext("2d").drawImage(sourceImage, 0, 0, width, height);

        // Convert the canvas to a data URL in PNG format
        callback(canvas.toDataURL());
    }

    sourceImage.src = url;
}
于 2010-03-26T05:48:35.827 に答える
2

パフォーマンスの問題に関しては、canvas タグが役立つのではないでしょうか? https://developer.mozilla.org/en/Canvas_tutorial/Using_images#drawImage_example_2

画像を読み込んで、drawImage で表示してから破棄しようとすると、成功する場合があります。しかし、サイズ変更されたファイルを保存するためにキャンバスを画像としてシリアル化する方法がわかりません...

于 2010-03-25T16:38:36.713 に答える