fengyuanchen Cropper - Làm thế nào để phù hợp với hình ảnh vào Canvas nếu xoay?

Question

Tôi đã xem tài liệu về cropper by fengyuanchen. Tôi muốn hình ảnh phù hợp theo mặc định thành canvas nếu được xoay. Nhưng tôi không thể tìm ra cách để đạt được điều này. Bất kỳ ý tưởng làm thế nào để đạt được chức năng này?

Tôi muốn nó được như thế này để được mặc định: link

Kiểm tra vấn đề bản demo đây: link

Answer 1

Tôi cố định hành vi này nhưng đối với nhu cầu đặc biệt của tôi. Tôi chỉ cần một nút xoay xoay hình ảnh theo các bước 90 °. Đối với các mục đích khác, bạn có thể mở rộng/thay đổi bản sửa lỗi của mình. Tính năng này hoạt động ở chế độ "nghiêm ngặt" bằng cách tự động thay đổi kích thước hộp canh tác.

Ở đây chức năng của tôi được gọi, khi tôi muốn xoay hình ảnh. Ah và thêm lỗi sai vị trí cũng đã được sửa.

var $image; 

function initCropper() { 
$image = $('.imageUploadPreviewWrap > img').cropper({ 
    autoCrop : true, 
    strict: true, 
    background: true, 
    autoCropArea: 1, 
    crop: function(e) { 
    } 
}); 
} 

function rotateImage() {  
    //get data 
    var data = $image.cropper('getCropBoxData'); 
    var contData = $image.cropper('getContainerData'); 
    var imageData = $image.cropper('getImageData'); 
    //set data of cropbox to avoid unwanted behavior due to strict mode 
    data.width = 2; 
    data.height = 2; 
    data.top = 0; 
    var leftNew = (contData.width/2) - 1; 
    data.left = leftNew; 
    $image.cropper('setCropBoxData',data); 
    //rotate 
    $image.cropper('rotate', 90); 
    //get canvas data 
    var canvData = $image.cropper('getCanvasData'); 
    //calculate new height and width based on the container dimensions 
    var heightOld = canvData.height; 
    var heightNew = contData.height; 
    var koef = heightNew/heightOld; 
    var widthNew = canvData.width * koef; 
    canvData.height = heightNew; 
    canvData.width = widthNew; 
    canvData.top = 0; 
    if (canvData.width >= contData.width) { 
     canvData.left = 0; 
    } 
    else { 
     canvData.left = (contData.width - canvData.width)/2; 
    } 
    $image.cropper('setCanvasData', canvData); 
    //and now set cropper "back" to full crop 
    data.left = 0; 
    data.top = 0; 
    data.width = canvData.width; 
    data.height = canvData.height; 
    $image.cropper('setCropBoxData',data); 
    } 

Answer 2

Đây là mã mở rộng của tôi được cung cấp bởi AlexanderZ để tránh cuttong hình ảnh rộng hơn so với thùng chứa :)

var contData = $image.cropper('getContainerData'); 

$image.cropper('setCropBoxData',{ 
    width: 2, height: 2, top: (contData.height/ 2) - 1, left: (contData.width/2) - 1 
}); 

$image.cropper('rotate', 90); 

var canvData = $image.cropper('getCanvasData'); 
var newWidth = canvData.width * (contData.height/canvData.height); 

if (newWidth >= contData.width) { 
    var newHeight = canvData.height * (contData.width/canvData.width); 
    var newCanvData = { 
     height: newHeight, 
     width: contData.width, 
     top: (contData.height - newHeight)/2, 
     left: 0 
    }; 
} else { 
    var newCanvData = { 
     height: contData.height, 
     width: newWidth, 
     top: 0, 
     left: (contData.width - newWidth)/2 
    }; 
} 

$image.cropper('setCanvasData', newCanvData); 
$image.cropper('setCropBoxData', newCanvData); 

Answer 3

Không phải là một câu trả lời trực tiếp cho câu hỏi ... nhưng tôi đang đặt cược rất nhiều người sử dụng plugin này sẽ tìm thấy điều này hữu ích ..

Thực hiện việc này sau khi chọn mã @AlexanderZ để xoay hình ảnh.

Vậy ... Nếu các bạn muốn xoay hoặc lật một hình ảnh mà có đã là một hộp cây trồng được xác định và nếu bạn muốn cropbox đó để xoay hoặc lật với hình ảnh ... sử dụng các chức năng:

function flipImage(r, data) { 

    var old_cbox = $image.cropper('getCropBoxData'); 
    var new_cbox = $image.cropper('getCropBoxData'); 
    var canv  = $image.cropper('getCanvasData'); 

    if (data.method == "scaleX") { 
     if (old_cbox.left == canv.left) { 
      new_cbox.left = canv.left + canv.width - old_cbox.width; 
     } else { 
      new_cbox.left = 2 * canv.left + canv.width - old_cbox.left - old_cbox.width; 
     } 

    } else { 
     new_cbox.top = canv.height - old_cbox.top - old_cbox.height; 
    } 

    $image.cropper('setCropBoxData', new_cbox); 

    /* BUG: When rotated to a perpendicular position of the original position , the user perceived axis are now inverted. 
    Try it yourself: GO to the demo page, rotate 90 degrees then try to flip X axis, you'll notice the image flippped vertically ... but still ... it fliped in relation to its original axis*/ 

    if (r == 90 || r == 270 || r == -90 || r == -270) { 

     if (data.method == "scaleX") { 

      $image.cropper("scaleY", data.option); 

     } else { 

      $image.cropper("scaleX", data.option); 

     } 

    } else { 

     $image.cropper(data.method, data.option); 

    } 

    $image.cropper(data.method, data.option); 

} 





function rotateImage(rotate) { 

    /* var img = $image.cropper('getImageData'); */ 

    var old_cbox = $image.cropper('getCropBoxData'); 
    var new_cbox = $image.cropper('getCropBoxData'); 
    var old_canv = $image.cropper('getCanvasData'); 
    var old_cont = $image.cropper('getContainerData'); 

    $image.cropper('rotate', rotate); 

    var new_canv = $image.cropper('getCanvasData'); 

    //calculate new height and width based on the container dimensions 
    var heightOld = new_canv.height; 
    var widthOld = new_canv.width; 
    var heightNew = old_cont.height; 
    var racio = heightNew/heightOld; 
    var widthNew = new_canv.width * racio; 
    new_canv.height = Math.round(heightNew); 
    new_canv.width = Math.round(widthNew); 
    new_canv.top = 0; 

    if (new_canv.width >= old_cont.width) { 
     new_canv.left = 0; 
    } else { 
     new_canv.left = Math.round((old_cont.width - new_canv.width)/2); 
    } 

    $image.cropper('setCanvasData', new_canv); 

    if (rotate == 90) { 
     new_cbox.height = racio * old_cbox.width; 
     new_cbox.width = racio * old_cbox.height; 

     new_cbox.top  = new_canv.top + racio * (old_cbox.left - old_canv.left); 
     new_cbox.left = new_canv.left + racio * (old_canv.height - old_cbox.height - old_cbox.top); 
    } 

    new_cbox.width = Math.round(new_cbox.width); 
    new_cbox.height = Math.round(new_cbox.height); 
    new_cbox.top = Math.round(new_cbox.top); 
    new_cbox.left = Math.round(new_cbox.left); 

    $image.cropper('setCropBoxData', new_cbox); 

} 

Answer 4

var photoToEdit = $('.photo_container img'); 
$(photoToEdit).cropper({ 
    autoCrop : true, 
    crop: function(e) {} 
}); 
$("#rotate_left_btn").click(function() { 
    $(photoToEdit).cropper('rotate', -90); 
    var containerHeightFactor = $(".photo_container").height()/$(photoToEdit).cropper('getCanvasData').height; 
    if (containerHeightFactor < 1) { // if canvas height is greater than the photo container height, then scale (on both x and y 
     // axes to maintain aspect ratio) to make canvas height fit container height 
     $(photoToEdit).cropper('scale', containerHeightFactor, containerHeightFactor); 
    } else if ($(photoToEdit).cropper('getData').scaleX != 1 || $(photoToEdit).cropper('getData').scaleY != 1) { // if canvas height 
     // is NOT greater than container height but image is already scaled, then revert the scaling cuz the current rotation will bring 
     // the image back to its original orientation (landscape/portrait) 
     $(photoToEdit).cropper('scale', 1, 1); 
    } 
}