JCropを使用して実際のイメージより大きな領域をトリミングする方法はありますか？

Question

私が言うことから、JCropは、ユーザがを外に作って、の外に作物を作れるようにしません。実際のイメージと周囲の空白が含まれています。それを行う方法はありますか？

私の言うことを説明するのを助けるために、作物を16：9の比率に制限しているとします。それは自然に広い件名のイメージのために正常に動作します：

しかし、時には、ユーザが使用したいソースイメージが快適に所望の比率に対応していません。

代わり

を、画像 よりも大きく、の外側にの画像を追加することができます。

私はJCropを使いこなしていて、マニュアルとGoogleをしばらく見ていますが、これは可能です（JCropを変更しない）ようには見えません。私が間違っている？もしそうなら、あなたはどうやってそれをしますか？

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

Answer 1

私のソリューションは、正方形の寸法に等しいとの一時的なキャンバスを作成することだったと思ういけないことを入れ、その後写真+透明の大きな背景に写真を変換するために、PHPのimagickのようなものを使用して検討します画像の最大面。私はキャンバスの背景を白にし、中心にイメージを追加しました。次に、新しい画像を作成し、キャンバスを画像ソースとして使用しました。それから私は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 
} 

ユーザーは、彼らが望むなら作物で画像全体を含めるように選択することができますこの方法。

Answer 2

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

あなたがしなければならないことは、後で修正するために追加したキャンバスの量です。

Answer 3

はJCropに、私はその可能性、他の方法が

Answer 4

私はImagickを使用して機能を作った：

function resizeImage($imgSrc, $width, $height, $createBg, $output, $show) { 

    $img = new Imagick($imgSrc); 

    if ($img->getImageWidth()/$img->getImageHeight() < $width/$height) { 
     $img->thumbnailImage(0, $height); 
    } else { 
     $img->thumbnailImage($width, 0); 
    } 

    $canvas = new Imagick(); 
    $canvas->newImage($width, $height, 'white', 'jpg'); 

    /* Creates a background image (good for vertical images in horizontal canvas or vice-versa) */ 
    if ($createBg) { 

     $imgBg = new Imagick($imgSrc); 

     if ($imgBg->getImageWidth()/$imgBg->getImageHeight() < $width/$height) { 
      $imgBg->thumbnailImage($width, 0); 
     } else { 
      $imgBg->thumbnailImage(0, $height); 
     } 

     $imgBg->blurImage(0, 80); 

     $geometryBg = $imgBg->getImageGeometry(); 
     $xBg = ($width - $geometryBg['width'])/2; 
     $yBg = ($height - $geometryBg['height'])/2; 

     $canvas->compositeImage($imgBg, imagick::COMPOSITE_OVER, $xBg, $yBg); 
    } 

    /* Center image */ 
    $geometry = $img->getImageGeometry(); 
    $x = ($width - $geometry['width'])/2; 
    $y = ($height - $geometry['height'])/2; 

    $canvas->compositeImage($img, imagick::COMPOSITE_OVER, $x, $y); 

    /* Save image */ 
    if ($output) { 
     $canvas->writeImage($output); 
    } 

    /* Show the image */ 
    if ($show) { 
     header('Content-Type: image/jpg'); 
     echo $canvas; 
    } 

} 

コメントのお楽しみ、それをすべて説明！