javascript - JCrop:从外部 URL 操作图像

Question

我需要在 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" />

JS:

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

Answer 1

看起来 loadImage 读取文件并将 image 设置为全局。 由于页面上现在已经有一张图片，我们应该可以跳过这一步。 所以我们可以像这样在 ready 中设置图像:

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