Javascript “图像比率”选项在渲染后更改为最近的比率选择
我修改了一个图像裁剪器，使您可以在选择要裁剪的图像之前或之后，预先选择要使用的裁剪比率选项。问题是，当我将选择的比率设置到通过API提交的URL中时，如果用户渲染图像，则该比率会发生变化，但在提交具有比率的图像之前，用户会选择不同的比率选项进行测试，然后再提交上一次渲染。我需要一种方法来锁定提交的URL的原始比率，而不需要通过选择其他裁剪选项来更改 这是剪切后渲染最终图像的代码，以及提交功能：Javascript “图像比率”选项在渲染后更改为最近的比率选择,javascript,jquery,Javascript,Jquery,我修改了一个图像裁剪器，使您可以在选择要裁剪的图像之前或之后，预先选择要使用的裁剪比率选项。问题是，当我将选择的比率设置到通过API提交的URL中时，如果用户渲染图像，则该比率会发生变化，但在提交具有比率的图像之前，用户会选择不同的比率选项进行测试，然后再提交上一次渲染。我需要一种方法来锁定提交的URL的原始比率，而不需要通过选择其他裁剪选项来更改 这是剪切后渲染最终图像的代码，以及提交功能： // As soon as the user clicks the render button
// 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");
}
});
});
});
});
});
//只要用户单击“渲染”按钮。。。
//侦听“渲染最终图像”并单击
renderButton.单击（函数（事件）{
var-dataUrl；
$（“.result.share link”）.empty（）；
$（“.submit.remove”）.remove（）；
imgly.renderToDataURL（“图像/jpeg”{
尺寸：“1200”
}，函数（错误，数据URL）{
//`dataUrl`现在包含一个已调整大小的渲染图像
//将DataURL转换为Blob以通过Ajax发送
函数dataURItoBlob（dataUrl）{
//将base64转换为字符串中的原始二进制数据
var byteString=atob（dataUrl.split（'，'）[1]）；
//分离出mime组件
var mimeString=dataUrl.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]；
//将字符串的字节写入ArrayBuffer
var ab=新阵列缓冲区（byteString.length）；
var ia=新的UINT8阵列（ab）；
for（var i=0；i”）；
}
}
$（“.share link”）.html（“资产”+imageid+”现在有一个与其关联的“+orientation+”图像。”；
$（“#imageid，.assetid”）.css（“边框颜色”，“#ccc”）；
},
错误：函数（数据）{
$（“#渲染按钮”）.hide（）；
$（“.share link”）.html（“图像提交错误。资产ID丢失或无效。请检查资产ID，重新渲染，然后重试。”；
$（“#imageid，.assetid”）.css（“边框颜色”，“红色”）；
}
});
});
});
});
});
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);
};
cropopOperation.prototype.setSize=函数（大小）{
//根据选择显示/隐藏裁剪选项
$（“.imgly控制项方形”）.hide（）；//甚至在加载图像之前隐藏方形裁剪
$（“#渲染按钮”）.hide（）；
$（'#裁剪'）。在（'change'，function（）{
$（“.submit”）.hide（）；
//$（'.imgly带有按钮的控件列表'）.show（）；
如果（this.value=='now'）{
$（“.imgly-controls-item-16-9”）。单击（）；
$（“.imgly画布裁剪中心”）.css（'background-image'，'url（“crop-scape.png”））；
$（“.imgly控制按钮后退，.imgly-controls-item-16-9，.imgly-controls-item-9-16，.imgly控制按钮完成”）.show（）；
$（“.imgly控制项方形”）.hide（）；//在用户选择LiveFeed后隐藏方形裁剪选项，然后返回到现在
}else if（this.value=='livefeeds'）{
//将裁剪比例设置为平方
$（“.imgly控制项方形”）。单击（）；
//
$（“.imgly画布裁剪中心”）.css（'background-image'，'url（“crop square.png”））；
$（“.imgly控制项方形，.imgly控制按钮后退，.imgly控制按钮完成”）.show（）；
$（“.imgly-controls-item-16-9，.imgly-controls-item-9-16”）.hide（）；
}else if（this.value=='defau