0

幅と高さのある base 64 画像データを取り込み、JavaScript で指定された幅と高さのサイズ変更された base 64 画像データを返す関数を作成しようとしています。本質的には

function imageResize(img, width, height) {
    var newImg; 
    //PLAN:transform img with new width and height.
    // - change width
    // - change height
    // - convert back to base 64 data
    return newImg;
}

この投稿をたどるのに疲れましたが、うまくいきませんでした。私は現在、js で画像を変換する方法を見つけるための調査を行っており、新しいリードを見つけたら投稿を更新します。私がやろうとしていることをすでに実行している機能はありますか? 疑似コード内の 1 つ以上のコンポーネントでない場合は? どんなアドバイスでも大歓迎です。

これは私が実装しようとした現在の関数ですが、実際の画像が描画されていない空白のキャンバスを返します。

function imageResize(img, width, height) {

            /// create an off-screen canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');

            /// set its dimension to target size
            canvas.width = width;
            canvas.height = height;

            /// draw source image into the off-screen canvas:
            ctx.drawImage(img, 0, 0, width, height);

            /// encode image to data-uri with base64 version of compressed image
            return canvas.toDataURL();
        }

この問題を解決するにはどうすればよいですか?

4

2 に答える 2

0

キャンバスに描画するときに画像が読み込まれますか?

画像がロードされた後に drawImage メソッドを呼び出す必要があるため、次のように、画像の onload イベントのハンドラー関数に呼び出します。

// You create your img
var img = document.createElement('img');

// When the img is loaded you can treat it ;)
img.src = 'your_data_url/your_url';

function imageResize(img, width, height) {

        /// create an off-screen canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        /// set its dimension to target size
        canvas.width = width;
        canvas.height = height;
        img.onload = function() { 
            /// draw source image into the off-screen canvas:
            ctx.drawImage(this, 0, 0, width, height); 
            var dataUrl = ctx.toDataURL();
            // Here you can use and treat your DataURI
        };
    }

JavaScript は非同期言語です。つまり、画像や動画などのオブジェクトが読み込まれたときにコードの実行が中断されることはありません。

その場で、オブジェクトの読み込みが完了すると「load」というイベントがトリガーされ、オブジェクトが読み込まれるとイベント ハンドラー (以前に定義した関数) が呼び出されます。

PS この質問に対する私の回答をご覧ください: https://stackoverflow.com/a/26884245/4034886

そのコードに別の問題がある場合は、遠慮なく私に尋ねてください ;)

私のくだらない英語で申し訳ありません。

于 2014-11-12T13:57:22.847 に答える
0

この実装は私にとって非常にうまく機能します。

function imageToDataURL(image, width, height) {
        var canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        canvas.getContext("2d").drawImage(image, 0, 0, width, height);
        return canvas.toDataURL();
}
于 2014-08-15T23:22:41.283 に答える