0

とで作業しようとしていjCropますcanvas。

画像をサーバーに送信して、トリミングされた画像で再度返すのではなく、キャンバスを使用して直接トリミングしようとしています。その結果、base64画像のトリミングを変換してサーバーに送信するためです。

drawImageキャンバスから使用した結果。

しかし、問題は次のとおりです。

画像を400x400に設定しましたが、元の画像はそれよりもはるかに大きく、キャンバスは元の画像から直接サイズを取得していると思います。私が決定したサイズではないため、結果はトリミングのようにはなりません。

私は正確な問題で例を作りました。

デモ

画像を切り抜いて、[切り抜き]をクリックするだけです。

私が欠けているものは何ですか？

編集：320x320の画像に変更すると、切り抜きは正常に機能するように見えますが、正方形ではない他の画像では何も機能しません。

4

1 に答える 1

5

画像の元の寸法をページ上の現在のサイズで割り、切り取り四角形の座標にこの比率を掛けることで、元の画像の座標を見つけることができます。

var img = document.getElementById("canvasToThumb"),
    $img = $(img),
    imgW = img.width,
    imgH = img.height;

var ratioY = imgH / $img.height(),
    ratioX = imgW / $img.width();

var getX = $('#x').val() * ratioX,
    getY = $('#y').val() * ratioY,
    getWidth = $('#w').val() * ratioX,
    getHeight = $('#h').val() * ratioY;

jsFiddle - http://jsfiddle.net/s39P3/

于 2013-02-25T21:19:27.177 に答える