0
我修改了圖像裁剪器，以便它允許您在選擇裁剪圖像之前或之後預先選擇要使用的裁剪比率選項。問題是，當我將選定的比率設置到通過API提交的URL中時，如果用戶呈現圖像，它將發生變化，但在提交圖像的比率之前，用戶選擇不同的比率選項來測試，然後再提交之前的渲染。我需要一種方法將原始比率鎖定到正在提交的URL，而不會通過選擇另一個裁剪選項來更改它。圖像比率選項在渲染後更改爲最近比率選擇
這是裁剪後使得最終的圖像，與提交功能沿着代碼：
// As soon as the user clicks the render button...
// Listen for "Render final image" click
renderButton.click(function (event) {
var dataUrl;
$(".result, .share-link").empty();
$(".submit, .remove").remove();
imgly.renderToDataURL("image/jpeg", {
size: "1200"
}, function (err, dataUrl) {
// `dataUrl` now contains a resized rendered image
//Convert DataURL to Blob to send over Ajax
function dataURItoBlob(dataUrl) {
// convert base64 to raw binary data held in a string
var byteString = atob(dataUrl.split(',')[1]);
// separate out the mime component
var mimeString = dataUrl.split(',')[0].split(':')[1].split(';')[0];
// write the bytes of the string to an ArrayBuffer
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
// write the ArrayBuffer to a blob, and you're done
//var bb = new BlobBuilder();
//bb.append(ab);
//return bb.getBlob(mimeString);
return new Blob([ab], {
type: 'image/jpeg'
});
}
var blob = dataURItoBlob(dataUrl);
//console.log("var blob: " + blob);
//var fd = new FormData(document.forms[0]);
var image = $("<img id='result'><br>").attr({
src: dataUrl
});
image.appendTo($(".result"));
$submitButton = $('<div class="btn btn-success submit"></div>')
.text('Submit ' + imageid.value).appendTo($(".submit-well"))
.on('click', function() {
var imageid = $("#imageid").val();
var saveImage = encodeURIComponent(dataUrl);
var bearerToken = localStorage.getItem('Authorization');
//IF TESTING ON LOCALHOST
if (document.domain == 'localhost') {
url = "http://localhost:7777/proxy/staging/rest/v1/cms/story/id/" + imageid + "/image/orientation/" + orientation;
} else {
//IF IN PRODUCTION
url = "/cropper/admin/cropv2/rest/v1/cms/story/id/" + imageid + "/image/orientation/" + orientation;
};
jQuery.ajax({
method: "PUT",
dataType: 'json',
callback: null,
url: url,
headers: {
"Authorization": bearerToken
},
data: saveImage,
success: function (response) {
$("#renderButton").css("display", "hidden");
var obj = response;
$(".search-results").empty();
$(".submit").remove();
for (var property in obj.entity.entries) {
if (obj.entity.entries.hasOwnProperty(property)) {
$(".search-results").append($("<li><a href='" + obj.entity.entries[property].uri + "' target='_blank'><div class='thumbnail'><img width='30' height='30' src='" + obj.entity.entries[property].uri + "'/></img><div class='caption'><p>" + obj.entity.entries[property].orientation + "</p></div></a></li>"));
}
}
$(".share-link").html("<div class='alert alert-success'><p>The asset <b>" + imageid + "</b> now has a <b>" + orientation + "</b> image associated with it.</p></div>");
$("#imageid, .assetid").css("border-color", "#ccc");
},
error: function (data) {
$("#renderButton").hide();
$(".share-link").html("<div class='alert alert-danger'><p>Image submission error. Asset ID missing or invalid. Please check asset ID, re-render and try again.</p></div>");
$("#imageid, .assetid").css("border-color", "red");
}
});
});
});
});
});
這與下拉選擇和開關的情況下控制所述取向選擇功能：
CropOperation.prototype.setSize = function(size) {
//SHOW/HIDE CROP OPTIONS BASED ON SELECTION
$(".imgly-controls-item-square").hide(); // Hide square crop before images are even loaded
$("#renderButton").hide();
$('#crop').on('change', function() {
$(".submit").hide();
//$('.imgly-controls-list-with-buttons').show();
if (this.value == 'now'){
$(".imgly-controls-item-16-9").click();
$(".imgly-canvas-cropping-center").css('background-image', 'url("crop-landscape.png")');
$(".imgly-controls-button-back, .imgly-controls-item-16-9, .imgly-controls-item-9-16, .imgly-controls-button-done").show();
$(".imgly-controls-item-square").hide(); // hide square crop option after user selects livefeeds, then back to now
} else if (this.value == 'livefeeds') {
// SET CROP RATIO TO SQUARE
$(".imgly-controls-item-square").click();
//
$(".imgly-canvas-cropping-center").css('background-image', 'url("crop-square.png")');
$(".imgly-controls-item-square, .imgly-controls-button-back, .imgly-controls-button-done").show();
$(".imgly-controls-item-16-9, .imgly-controls-item-9-16").hide();
} else if(this.value == 'default'){
$(".imgly-controls-item-16-9, .imgly-controls-item-9-16, .imgly-controls-item-square, .imgly-controls-button-back, .imgly-controls-button-done").hide();
}
});
var h, height, w, width, _ref;
_ref = this.app.ui.getCanvas().getImageData(), width = _ref.width, height = _ref.height;
this.options.size = size;
this.options.start.set(0.1, 0.1);
this.options.end.set(0.9, 0.9);
switch (size) {
case "9:16":
this.options.ratio = 9/16;
orientation = "PORTRAIT";
$(".imgly-canvas-cropping-center").css('background-image', 'url("crop-portrait.png")');
break;
case "square":
this.options.ratio = 1;
orientation = "SQUARE";
$(".imgly-canvas-cropping-center").css('background-image', 'url("crop-square.png")');
break;
case "16:9":
this.options.ratio = 16/9;
orientation = "LANDSCAPE";
$(".imgly-canvas-cropping-center").css('background-image', 'url("crop-landscape.png")');
break;
}
if (this.options.ratio) {
if (width/height <= this.options.ratio) {
this.options.start.x = 0.1;
this.options.end.x = 0.9;
h = 1/height * (width/this.options.ratio * 0.8);
this.options.start.y = (1 - h)/2;
this.options.end.y = 1 - this.options.start.y;
} else {
this.options.start.y = 0.1;
this.options.end.y = 0.9;
w = 1/width * (this.options.ratio * height * 0.8);
this.options.start.x = (1 - w)/2;
this.options.end.x = 1 - this.options.start.x;
}
}
return this.emit("updateOptions", this.options);
};