Có cách nào để sử dụng JCrop để cắt một diện tích lớn hơn hình ảnh thực tế không?

Question

Từ những gì tôi có thể biết, JCrop sẽ không cho phép tôi thiết lập mọi thứ để người dùng có thể cắt bên ngoài hình ảnh thực tế và bao gồm khoảng trắng xung quanh. Có cách nào làm được việc này không?

Để giúp giải thích ý tôi là gì, hãy nói rằng chúng tôi đang hạn chế tỷ lệ cây trồng của chúng tôi ở tỷ lệ 16: 9. Đó là hoạt động tốt cho một hình ảnh với một chủ đề rộng một cách tự nhiên:

Nhưng đôi khi hình ảnh nguồn mà người dùng muốn sử dụng không thoải mái thích ứng với tỷ lệ mong muốn:

Thay vào đó , chúng tôi muốn cho phép chúng bao gồm không gian bên ngoài hình ảnh bằng cách làm cho khu vực cắt lớn hơn chính hình ảnh đó:

Tôi đã rối tung với JCrop và xem qua hướng dẫn sử dụng và Google trong một thời gian và dường như không thể thực hiện được (không sửa đổi JCrop). Liệu tôi có sai? Nếu vậy, làm thế nào để bạn làm điều đó?

FWIW, hình ảnh thực tế trong trường hợp này sẽ là hình ảnh biểu trưng của sản phẩm/tổ chức, có nhiều tỷ lệ khung hình khác nhau và hầu như luôn có hình ảnh cho mọi người gần như không có khoảng trắng xung quanh văn bản/hình ảnh. Điều này có nghĩa là bất kỳ cây trồng tỷ lệ khung hình cố định nào bị giới hạn ở các giới hạn của hình ảnh sẽ gần như chắc chắn cắt bỏ phần trên cùng hoặc dưới cùng bên trái của hình ảnh.

Answer 1

Giải pháp của tôi là tạo ra một khung tạm thời với kích thước vuông bằng để mặt lớn nhất của hình ảnh. Tôi làm nền vải trắng và thêm hình ảnh vào giữa. Sau đó, tôi đã tạo một hình ảnh mới và sử dụng canvas làm nguồn hình ảnh. Sau đó, tôi sử dụng hình ảnh đó với jcrop. Nó chậm hơn, nhưng nó hoạt động!

Dưới đây là một ví dụ:

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 
} 

Bằng cách này người dùng có thể chọn để bao gồm các hình ảnh toàn bộ trong vụ nếu họ muốn.

Answer 2

Bạn có thể đánh lừa tập lệnh jCrop. Thay vì hiển thị image.jpg, bạn làm điều gì đó như not_a_real_image.php?imagename=image.jpg. Sau đó cung cấp cho tập tin php một tiêu đề của hình ảnh, và chiều rộng và chiều cao, và căn chỉnh hình ảnh thực tế ở trung tâm đó.

Tất cả những gì bạn phải làm là nhớ số lượng canvas bạn đã thêm để sửa nó sau này.

Answer 3

xem xét sử dụng một cái gì đó giống như php imagick để chuyển đổi ảnh sang ảnh + nền lớn trong suốt và sau đó đưa đến JCrop Tôi không nghĩ theo cách khác có thể của nó

Answer 4

tôi đã thực hiện một chức năng sử dụng 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; 
    } 

} 

của giải thích tất cả bình luận, tận hưởng!