JCrop: Statisches Bild drehen und zuschneiden

Question

Ich benutze JCrop.js für die Bildbearbeitung auf der Client-Seite. Ich muss ein Bild auf HTML-Seite drehen, skalieren, spiegeln und zuschneiden. Ich bin in der Lage, dies zu tun, wenn ich eine Dateiauswahl auf der Seite habe. Meine Anforderung besteht darin, dasselbe für ein Bild zu tun, das von einer anderen URL geladen wurde (ohne das lokale Bild auszuwählen). Hier ist der vollständige Code, der gut mit der "Datei" -Steuerung auf der Seite funktioniert. Ich möchte keine lokale Datei auswählen. Meine Seite wird ein Bild von einer anderen Quelle laden, und dann muss ich diese Operationen auf dem geladenen Bild ausführen.

var cropWidth = 800; 
var cropHeight = 800; 
var crop_max_width = 400; 
var crop_max_height = 400; 
var jcrop_api; 
var canvas; 
var context; 
var image; 

var prefsize; 
$(document).ready(function() { 
    $("#file").change(function() { 
     loadImage(this); 
    }); 
    $("#btnCrop").click(function() {  
     SaveData(); 
    }); 
}); 

function SaveData() { 
    formData = new FormData($(this)[0]); 
    var blob = dataURLtoBlob(canvas.toDataURL('image/jpeg')); 
    formData.append("cropped_image[]", blob, "CroppedImage.jpeg"); 
    $.ajax({ 
     url: urlToSendData 
     type: "POST", 
     data: formData,   
     contentType: false, 
     cache: false, 
     processData: false, 
     success: function (data) { 
      alert("Image cropped!");    
     }, 
     error: function (data) { 
      alert('There was an error'); 
     } 
    }); 
} 

function loadImage(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     canvas = null; 
     reader.onload = function (e) { 
      image = new Image(); 
      image.onload = validateImage; 
      image.src = e.target.result; 
     } 
     reader.readAsDataURL(input.files[0]); 
     applyCrop(); 
    } 
} 

function dataURLtoBlob(dataURL) { 
    var BASE64_MARKER = ';base64,'; 
    if (dataURL.indexOf(BASE64_MARKER) == -1) { 
     var parts = dataURL.split(','); 
     var contentType = parts[0].split(':')[1]; 
     var raw = decodeURIComponent(parts[1]); 

     return new Blob([raw], { 
      type: contentType 
     }); 
    } 
    var parts = dataURL.split(BASE64_MARKER); 
    var contentType = parts[0].split(':')[1]; 
    var raw = window.atob(parts[1]); 
    var rawLength = raw.length; 
    var uInt8Array = new Uint8Array(rawLength); 
    for (var i = 0; i < rawLength; ++i) { 
     uInt8Array[i] = raw.charCodeAt(i); 
    } 

    return new Blob([uInt8Array], { 
     type: contentType 
    }); 
} 

function validateImage() { 
    if (canvas != null) { 
     image = new Image(); 
     image.onload = restartJcrop; 
     image.src = canvas.toDataURL('image/png'); 
    } else restartJcrop(); 
} 

function restartJcrop() { 
    if (jcrop_api != null) { 
     jcrop_api.destroy(); 
    } 
    $("#views").empty(); 
    $("#views").append("<canvas id=\"canvas\">"); 
    canvas = $("#canvas")[0]; 
    context = canvas.getContext("2d"); 
    canvas.width = image.width; 
    canvas.height = image.height; 
    context.drawImage(image, 0, 0); 
    $("#canvas").Jcrop({ 
     onSelect: selectcanvas, 
     onRelease: clearcanvas, 
     boxWidth: crop_max_width, 
     boxHeight: crop_max_height, 
     allowResize: false, 
     allowSelect: false, 
     setSelect: [0, 0, cropWidth, cropHeight], 
     aspectRatio: 1 
    }, function() { 
     jcrop_api = this; 
    }); 
    clearcanvas(); 
} 

function clearcanvas() { 
    prefsize = { 
     x: 0, 
     y: 0, 
     w: canvas.width, 
     h: canvas.height, 
    }; 
} 

function selectcanvas(coords) { 
    prefsize = { 
     x: Math.round(coords.x), 
     y: Math.round(coords.y), 
     w: Math.round(coords.w), 
     h: Math.round(coords.h) 
    }; 
} 

function applyCrop() { 
    canvas.width = prefsize.w; 
    canvas.height = prefsize.h; 
    context.drawImage(image, prefsize.x, prefsize.y, prefsize.w, prefsize.h, 0, 0, canvas.width - 10, canvas.height - 10); 
    validateImage(); 
} 

function applyScale(scale) { 
    if (scale == 1) return; 
    canvas.width = canvas.width * scale; 
    canvas.height = canvas.height * scale; 
    context.drawImage(image, 0, 0, canvas.width, canvas.height); 
    validateImage(); 
} 

function applyRotate() { 
    canvas.width = image.height; 
    canvas.height = image.width; 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.translate(image.height/2, image.width/2); 
    context.rotate(Math.PI/2); 
    context.drawImage(image, -image.width/2, -image.height/2); 
    validateImage(); 
} 

function applyHflip() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.translate(image.width, 0); 
    context.scale(-1, 1); 
    context.drawImage(image, 0, 0); 
    validateImage(); 
} 

function applyVflip() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    context.translate(0, image.height); 
    context.scale(1, -1); 
    context.drawImage(image, 0, 0); 
    validateImage(); 
} 

$("#scalebutton").click(function (e) { 
    var scale = prompt("Scale Factor:", "1"); 
    applyScale(scale); 
}); 
$("#rotatebutton").click(function (e) { 
    applyRotate(); 
}); 
$("#hflipbutton").click(function (e) { 
    applyHflip(); 
}); 
$("#vflipbutton").click(function (e) { 
    applyVflip(); 
}); 

Also auf meiner Seite werde ich nur ein Bild und vier Tasten:

<img scr="externalURL" id="imgMain" alt=""/> 
<input type="button" id="cropbutton" value="Crop" /> 
<input type="button" id="rotatebutton" value="Rotate" /> 
<input type="button" id="hflipbutton" value="Flip Horizontal" /> 
<input type="button" id="vflipbutton" value="Flip Vertical" /> 

Was muss ich ändern?

Answer 1

Sieht aus wie loadImage liest die Datei und setzt die image global. Da auf der Seite bereits ein Bild vorhanden ist, sollten wir diesen Schritt überspringen können. So können wir wahrscheinlich nur das Bild in ready wie folgt setzen:

$(document).ready(function() { 
    // (this code replaces the file selecting) 
    image = $("#imgMain"); // set image from the page 
    canvas = null; // this was done in loadImage 
    applyCrop(); // this was called from loadImage 
    // (this code is the same as before) 
    $("#btnCrop").click(function() {  
     SaveData(); 
    }); 
});