5

ユーザーが画像をアップロードしてトリミングできるフォームを入手しました。すでにその流れを理解しています。

1.ユーザーが画像をアップロードします2.サーバーが画像
を処理してブラウザに
送り返します3.ユーザーが画像を切り抜いてサーバーに送信します4.サーバー
が処理して保存します

これを達成する他の方法はありますか？
おそらく、javascriptを使用して画像をロードし、それをトリミングしてから、サーバーに送信して処理します。
方法はありますか？

それらの画像をサーバーに送信して処理することを避けようとしているImを編集しました。
おそらくFileReaderを使用してファイルをロードします。
グーグルで検索するのはうまくいきません。

4

2 に答える 2

4

FileReader+を使用Canvasしてローカル ファイルを読み取り、サーバーに送信せずに切り抜くことができます。

これを行う方法を示すデモがあります。

<form><input type="file" id=f></form>
<canvas id=c width="600" height="600"></canvas>
<script>
var f = document.getElementById('f');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
f.onchange = function() {
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(evt) {
        var img = new Image();
        img.onload = function() {
          context.drawImage(this, 0, 0, 100, 100, 0, 0, 100, 100);
          var pngUrl = canvas.toDataURL();
          //alert(pngUrl); // send this url to server to save the image
        }
        img.src = evt.target.result;
    }
    reader.readAsDataURL(file);
}
</script>

このデモでは、左上の 100x100 ピクセルのトリミングをハードコーディングしただけなので、ユーザーがトリミング領域を選択できるようにするために、jquery jcrop プラグインを使用する必要があります。

jcrops onSelectイベントを使用して、トリミング領域の原点 + 幅 + 高さを取得し、それらの値をcontext.drawImage

うまくいけば、あなたは残りを処理することができます、頑張ってください

于 2012-12-25T06:32:38.110 に答える
1

このために、私はjCropを使用します。システムでImageMagickやGDにアクセスできることを確認してください。おそらく、処理のためにそれが必要になります。

編集（2021年10月2日）-元のリンク/ライブラリは放棄されたようです。私はまだこれを試していませんが、うまくいくようです：https ://jcrop.com/

于 2012-12-24T21:28:47.633 に答える