javascript - JavaScriptを使用してBase64でエンコードされたデータURI PNGのサイズを変更するには?

Question

Base64 でエンコードされた PNG を Web ソケットから Web ページに絞り出し、データ URI を使用して表示しています。

    <img src="data:image/png;base64, --base64 png-- ">

指定された画像のサムネイルバージョンを動的に生成するために、受け取った画像のサイズをより小さなbase64データURIに変更するjavascriptまたはそのフレーバーのいくつかに方法はありますか?

あるいは、HTML の Image オブジェクトを複製して、まだわからない jQuery の手品を使って全体を操作することもできます。

これがクライアント側の JavaScript で実行できれば、サーバーデーモンへの別の HTTP リクエストを回避できます。このリクエストでは、再処理してサイズ変更された画像を配信するのに時間がかかります。

score 2 · Accepted Answer

jQueryを使用して画像を複製できます。サイズ変更については、html要素の幅と高さを変更するのは簡単ですか?

$('.somewhere img').clone().appendTo('.elsewhere').width(16).height(16)

score 1 · Accepted Answer

Pixastic ライブラリはそれを行い、モバイルデバイスでも驚くほど高速に動作します。

次のようなものを試してください：

    Pixastic.process(image, "resize", { "width" : 200, "height" : 200 }, function (oCanvas){ //callback code here});

画像を与えるとCanvasが返されるという事実に苦労しましたが、何が起こっているのかを理解するのに数週間かかりました!!! 現在、Web 上のどこかで見つけた Canvas2Image を使用して、画像に戻ります。

score 0 · Accepted Answer

maxImageプラグインは、画像のサイズを変更できると主張しています。TMMV、私はこれを自分で試したことはありません。

3 に答える 3