JavaScriptを使って画像を保存する方法

Question

私はいくつかのWebフォトギャラリーを作っています。画像をカスタマイズするための基本的なものをいくつか作成しました。width、heightなどです。今の私は私のイメージのwidthとheightを変更するための非常に簡単なJavaScriptのメソッドを持って、このような何か：

function smaller() { 
    var image = document.getElementById('forchange'); 

    var width = image.clientWidth; 
    var height = image.clientHeight; 

    image.height = height - 50; 
    image.width = width - 50; 
} 

function bigger() { 
    var image = document.getElementById('forchange'); 

    var width = image.clientWidth; 
    var height = image.clientHeight; 

    image.height = height + 50; 
    image.width = width + 50; 
} 

HTML

{block content} 
{snippet changePhoto} 
<img src="{$photo}" id="forchange"> 
{/snippet} 
<label>Velkosť </label> 

<button type="submit" onclick="bigger()" value="{$photo}" name="bigger">+</button> 
<button type="submit" onclick="smaller()" value="{$photo}" name="smaller">-</button> 
<form action="{link Gallery:change $photo}" method="post" > 
<input type = "submit" value="ulozit" name="save"> 
</form> 

それは画像を働いては何に応じて小さいか大きいですボタンを押しますが、ページをリフレッシュした後、画像の幅と高さは同じです（論理的に）。

ディスクに保存されている現在のイメージファイルを保存または書き直すにはどうすればいいですか？ページを更新した後、私が望むようにカスタマイズした新しいイメージを見ることができますか？そんなことをすることは可能ですか？

私はウェブで多くを検索しましたが、キャンバスとたくさんのものについて何かを見つけましたが、それは私の必要としているようなものではありませんでした。すべての答えに非常に感謝します。

Answer 1

あなたがインターネット上で見つけたキャンバスは、実装できる2つのソリューションの1つです。もう1つの解決策は、バックエンドでイメージを縮小することです。

あなたは画像の幅と高さにあなたがそれをやっている方法を変更する場合、どのような実際に起こっていることは、あなたはまだあなただけの小さな幅と高さでそれをレンダリングするためにブラウザを言っている、大規模な全体像を持っています。我々は、画像の小さなレンダリングバージョンのブラウザにアクセスする必要はありません、画像を保存しようとすると、画像のより大きなバージョンが保存されます。

ソリューション

A）あなたは、あなたのイメージの小型版を送信するためにサーバーを頼みます。これを直接PHPで行うことができます。あるいは、ほとんどのサーバーでImage Magickでこれを行うことがより簡単にできます。

b）フロントエンドの画像を圧縮してサイズを縮小することができます。 Hereは、フロントエンドで画像を圧縮する例です。ダウンサイジング機能を追加するには、compressCanvas関数に次のコードを追加します。

canvas.width = width; 
canvas.height = height;