2015-06-15 29 views

回答

4

我解決了這個問題,但我的特殊需求。我只需要一個旋轉按鈕,以90°的步幅旋轉圖像。爲了其他目的,您可以擴展/更改我的修復程序。 它通過動態更改裁剪框的尺寸,以「嚴格」模式工作。

這裏是我調用的函數,當我想旋轉圖像。啊,另外錯位錯誤也被修復了。

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); 
    } 
+1

如果可以的話,我會高興的這10次 - 只是在完全相同的問題上花了幾個小時,然後繞着圈子走,直到我偶然發現這個!完美解決方案 – d3wannabe

1

這是由AlexanderZ我的擴展碼提供,以避免超過容器:)

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); 
+0

嘿:)你能請詳細解釋你改進了什麼,我只是不明白它:) – EscapeNetscape

+0

是的,我檢查圖像(畫布)的寬度是否更寬或不是容器,如果它更寬我設置畫布寬度作爲容器與計算高度並將其顯示在指定的容器中。在你的解決方案中,如果圖像更寬,它將自動剪切(在圖像的左側和右側)。當然,非常感謝你的解決方案:) – plugowski

+0

啊我看到了,我可能沒有這種行爲,因爲我的預覽圖像的css max-width :) – EscapeNetscape

0

沒有直接回答這個問題cuttong更寬的圖像...但我敢打賭,用很多人這個插件會發現這個有用的..

拿起@AlexanderZ代碼旋轉圖像後,做了這個。

所以...... 如果你們要旋轉或翻轉已經定義了一個裁剪框和形象,如果你想要的裁剪框旋轉或與圖像翻轉......使用這些功能:

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); 

} 
0
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); 
    } 
}