php - jqueryを使用した画像のトリミング

Question

ユーザーに画像をアップロードしてもらいたいのですが、設定したサイズにトリミングされます。私がしたいのは、基本的に、特定のトリミングサイズとそのボックス内の画像に設定されたdivです。その後、ユーザーは画像をスライドさせることができ、そのdivに表示されているものはすべて、画像のトリミング先になります。

私が遭遇したすべてのjqueryプラグインは、ユーザーが選択ボックスの後ろに画像を移動するのではなく、画像全体の周りで選択ボックスを移動できるようにするだけです。この種のものは存在しますか、そして私はちょうどそのプラグインを逃しましたか？

基本的には、サムネイルサイズのボックス内で画像をドラッグするFacebookのサムネイルエディタのようなものです。

Answer 1

そのためのプラグインは本当に必要ありません。これは、background-position値を設定することにより、vanillajQueryおよびCSSで実行できます。

<div id="CroppedImageDiv"></div>
<script type="text/javascript">
    function cropImage(imgUrl, cropWidth, cropHeight, cropStartX, cropStartY) {
        var bgPos = cropStartX + "px " + cropStartY + "px";
        $('#CroppedImageDiv').width(cropWidth).height(cropheight).css('background-position', bgPos);
        $('#CroppedImageDiv').css('background-url', imgUrl);
    }
</script>

Answer 2

「ギロチン」をお勧めします：http：//github.com/matiasgagliano/guillotine

それはあなたが求めていることを実行するjQueryプラグインであり、回転とズームもスローします。

タッチデバイスをサポートし、応答性があります。

デモをチェックしてください：http：//matiasgagliano.github.io/guillotine

Answer 3

JCropプラグインを使用できます。

Jcropプラグイン