Javascript JCrop：从外部URL操作图像

我需要在HTML页面上旋转/缩放/翻转/裁剪图像

我在客户端使用JCrop.js进行图像处理。我可以通过一个文件选择器成功地做到这一点，用户可以在本地计算机上选择一个图像文件。我的要求是这样做，但对于从另一个URL加载的图像（不选择本地图像）

下一步需要帮助

以下是适用于本地文件选择的完整代码：

HTML:

<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" />

”；
画布=$（“#画布”）[0]；
context=canvas.getContext（“2d”）；
canvas.width=image.width；
canvas.height=image.height；
drawImage（image，0,0）；
$（“#画布”）.Jcrop({
onSelect:selectcanvas，
onRelease:clearcanvas，
箱宽：裁剪最大宽度，
箱高：作物最大高度，
allowResize:false，
allowSelect:false，
setSelect:[0,0，cropWidth，cropHeight]，
方面：1
}，函数（）{
jcrop_api=这个；
});
clearcanvas（）；
}
函数clearcanvas（）{
预处理大小={
x:0,，
y:0，
w：画布宽度，
h:帆布高度，
};
}
函数selectcanvas（coords）{
预处理大小={
x:Math.round（coords.x），
y：数学圆（coords.y），
w：数学圆（coords.w），
h：数学圆（coords.h）
};
}
函数applyCrop（）{
canvas.width=prefsize.w；
canvas.height=prefsize.h；
drawImage（image，prefsize.x，prefsize.y，prefsize.w，prefsize.h，0，0，canvas.width-10，canvas.height-10）；
validateImage（）；
}
函数applyScale（scale）{
如果（比例==1）返回；
canvas.width=canvas.width*比例；
canvas.height=canvas.height*比例；
context.drawImage（图像，0，0，canvas.width，canvas.height）；
validateImage（）；
}
函数applyRotate（）{
canvas.width=image.height；
canvas.height=image.width；
clearRect（0，0，canvas.width，canvas.height）；
context.translate（image.height/2，image.width/2）；
旋转（Math.PI/2）；
context.drawImage（image，-image.width/2，-image.height/2）；
validateImage（）；
}
函数applyHflip（）{
clearRect（0，0，canvas.width，canvas.height）；
context.translate（image.width，0）；
背景量表（-1,1）；
drawImage（image，0,0）；
validateImage（）；
}
函数applyVflip（）{
clearRect（0，0，canvas.width，canvas.height）；
context.translate（0，image.height）；
上下文。量表（1，-1）；
drawImage（image，0,0）；
validateImage（）；
}
$（“#缩放按钮”）。单击（函数（e）{
var比例=提示（“比例系数：”，“1”）；
applyScale（尺度）；
});
$（“#旋转按钮”）。单击（函数（e）{
苹果酸盐（）；
});
$（“#hflipbutton”）。单击（函数（e）{
applyHflip（）；
});
$（“#vflipbutton”）。单击（函数（e）{
applyVflip（）；
});

看起来像是

loadImage

读取文件并设置

图像

全局。 由于现在页面上已经有一个图像，我们应该能够跳过这一步。 因此，我们可以在

ready

中设置图像，如下所示：

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

$(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();
    });
});