14

私が知る限り、JCropでは、ユーザーが実際の画像の外側をトリミングして周囲の空白を含めることができるように設定することはできません。それを行う方法はありますか？

私が言いたいことを説明するために、作物を 16:9 の比率に制限しているとしましょう。これは、自然に幅の広い被写体を持つ画像では問題なく機能します。

ここに画像の説明を入力

しかし、ユーザーが使用したいソース画像が希望の比率にうまく収まらない場合があります。

ここに画像の説明を入力

代わりに、トリミング領域を画像自体よりも大きくすることで、画像の外側にスペースを含めることができるようにしたいと考えています。

ここに画像の説明を入力

私はJCropをいじり、しばらくの間マニュアルとGoogleを調べてきましたが、これは可能ではないようです（JCropを変更せずに）。私が間違っている？もしそうなら、どのようにしますか？

FWIW、この場合の実際の画像は製品/組織のロゴ画像で、さまざまなアスペクト比があり、ほとんどの場合、人々が利用できる画像にはテキスト/画像の周りに空白がほとんどありません. つまり、画像の境界に制限された固定アスペクト比のクロップは、ほぼ確実に画像の上下または左右のいずれかを切り落とします。

4

4 に答える 4

5

私の解決策は、画像の最大辺に等しい正方形の寸法の一時的なキャンバスを作成することでした。キャンバスの背景を白にして、中央に画像を追加しました。次に、新しい画像を作成し、キャンバスを画像ソースとして使用しました。次に、その画像をjcropで使用しました。遅くなりますが、うまくいきます！

次に例を示します。

img.onload = function(){ 
    // get the largest side of the image
    // and set the x and y coordinates for where the image will go in the canvas
    if( img.width > img.height ){
        var largestDim = img.width;
        var x = 0;
        var y = (img.width-img.height)/2;
    }
    else{
        var largestDim = img.height;
        var y = 0;
        var x = (img.height-img.width)/2;
    }
    // create a temporary canvas element and set its height and width to largestDim
    canvastemp = document.createElement("canvas");
    canvastemp.width = canvastemp.height = largestDim;
    var ctx = canvastemp.getContext('2d');
    // set the canvas background to white
    ctx.fillStyle="#FFFFFF";
    ctx.fillRect(0, 0, canvastemp.width, canvastemp.height);
    // center the image in the canvas
    ctx.drawImage(img, x, y, img.width, img.height);
    // create a new image and use the canvas as its source
    var squaredImg = document.createElement("img");
    squaredImg.src = canvastemp.toDataURL();
    // add jcrop once the image loads
    squaredImg.onload = function(){
        addJcrop(squaredImg);   
    }
};

function addJcrop(img){
   // your jcrop code
}

このようにして、ユーザーは必要に応じて画像全体をトリミングに含めることを選択できます。

于 2014-08-01T08:53:19.217 に答える
3

php imagickのようなものを使用して写真を写真+透明な大きな背景に変換し、それをJCropに入れることを検討してください。他の方法は考えられません

于 2014-07-01T12:03:43.010 に答える
2

jCrop スクリプトをだますことができます。を表示する代わりにimage.jpg、次のようなことを行いますnot_a_real_image.php?imagename=image.jpg。次に、php ファイルに画像のヘッダーと幅と高さを指定し、実際の画像をその中央に配置します。

後で修正するために、追加したキャンバスの量を覚えておくだけです。

于 2013-11-04T08:41:54.827 に答える