javascript - JavaScript を使用してブラウザーを介してクライアント側で画像をトリミングする

Question

JavaScript を使用してブラウザを介してフロント エンドで画像をトリミングすることは可能ですか?

バックエンドで画像をトリミングするサーバーに、寸法と座標とともに画像を送信できます。

私がやりたいことは、JavaScript を使用してブラウザーを介して画像をトリミングし、必要に応じて、トリミングした画像をサーバーに送信することです。

Answer 1

これを行うには、画像を Canvas 要素にロードしてから、Canvas を操作します。

基本チュートリアルはこちら

http://www.w3schools.com/html/html5_canvas.asp

(他にもたくさんあります)

Answer 2

から試すことができます

http://www.codeforest.net/html5-image-upload-resize-and-crop

function resizeAndUpload(file) {
var reader = new FileReader();
    reader.onloadend = function() {

    var tempImg = new Image();
    tempImg.src = reader.result;
    tempImg.onload = function() {

        var MAX_WIDTH = 400;
        var MAX_HEIGHT = 300;
        var tempW = tempImg.width;
        var tempH = tempImg.height;
        if (tempW > tempH) {
            if (tempW > MAX_WIDTH) {
               tempH *= MAX_WIDTH / tempW;
               tempW = MAX_WIDTH;
            }
        } else {
            if (tempH > MAX_HEIGHT) {
               tempW *= MAX_HEIGHT / tempH;
               tempH = MAX_HEIGHT;
            }
        }

        var canvas = document.createElement('canvas');
        canvas.width = tempW;
        canvas.height = tempH;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0, tempW, tempH);
        var dataURL = canvas.toDataURL("image/jpeg");

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(ev){
            document.getElementById('filesInfo').innerHTML = 'Done!';
        };

        xhr.open('POST', 'uploadResized.php', true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        var data = 'image=' + dataURL;
        xhr.send(data);
      }

   }
   reader.readAsDataURL(file);
}

このコードは、クライアントのサイズ変更専用です。トリミングには、Jcrop などを使用できます。