这一半展示了如何捕捉所有各种细节。假设红框是新图像的视口,这将在您进行更改时收集详细信息,以便您可以将其传递给将构建图像的脚本。
我假设可以捕捉以下细节:
如果需要,可以删除文件名,让用户指定名称值。
<form method="post" action="">
<button id="browse-btn">Browse Images</button>
<input name="user_file[]" id="user_file" style="display: none; position: relative;overflow: hidden" multiple="" type="file" />
<div class="new-multiple"></div>
<button id="submit-btn" type="submit">Submit</button>
<div class="meta-details">
<ul>
<li>
<label>Name:</label>
<span></span>
</li>
<li>
<label>Size:</label>
<span></span>
</li>
<li>
<label>Width:</label>
<span></span>
</li>
<li>
<label>Height:</label>
<span></span>
</li>
<li>
<label>Top:</label>
<span></span>
</li>
<li>
<label>Left:</label>
<span></span>
</li>
<li>
<label>Rotation:</label>
<span></span>
</li>
</ul>
</div>
</form>
form button {
margin: 3px;
}
.new-multiple {
width: 400px !important;
height: 400px !important;
background: white;
border: 2px solid #faa;
border-radius: 3px;
overflow: hidden;
}
.img-div {
width: 200px;
height: 200px;
}
.newly-added {
width: 100%;
height: 100%;
}
.img-selected {
box-shadow: 1px 2px 6px 6px rgb(206, 206, 206);
border: 2px solid rgb(145, 44, 94);
}
.ui-resizable-handle {
border: 0;
border-radius: 50%;
background-color: #00CCff;
width: 14px;
height: 14px;
}
.ui-resizable-nw {
top: -7px;
left: -7px;
}
.ui-resizable-ne {
top: -7px;
right: -7px;
}
.ui-resizable-e {
top: calc(50% - 7px);
right: -7px;
}
.ui-resizable-w {
top: calc(50% - 7px);
left: -7px;
}
.ui-resizable-sw {
bottom: -7px;
left: -7px;
}
.ui-resizable-se {
right: -7px;
bottom: -7px;
}
.ui-resizable-se.ui-icon {
display: none;
}
.ui-rotatable-handle {
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
border: 0;
border-radius: 50%;
background-color: #00CCff;
margin-left: calc(50% - 9px);
bottom: -5px;
width: 18px;
height: 18px;
}
.meta-details ul {
padding: 0;
margin: 0;
list-style: none;
font-family: Arial, sans-serif;
font-size: 9px;
}
.meta-details ul li label {
display: inline-block;
width: 45px;
}
JavaScript
$(function() {
var inputLocalFont = $("#user_file");
inputLocalFont.change(previewImages);
function humanFileSize(bytes, si) {
var thresh = si ? 1000 : 1024;
if (Math.abs(bytes) < thresh) {
return bytes + ' B';
}
var units = si ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
var u = -1;
do {
bytes /= thresh;
++u;
} while (Math.abs(bytes) >= thresh && u < units.length - 1);
return bytes.toFixed(1) + ' ' + units[u];
}
function logMeta(d) {
var $m = $(".meta-details ul li span");
$m.eq(0).html(d.name);
$m.eq(1).html(humanFileSize(d.size));
$m.eq(2).html(d.width + " px");
$m.eq(3).html(d.height + " px");
$m.eq(4).html(d.top + " px");
$m.eq(5).html(d.left + " px");
$m.eq(6).html(d.rotateDeg + " °");
}
function previewImages() {
var fileList = this.files;
var fileMeta = [];
$.each(fileList, function(key, val) {
fileMeta[key] = {
name: val.name,
size: val.size,
modified: val.lastModified
};
});
var anyWindow = window.URL || window.webkitURL;
for (var i = 0; i < fileList.length; i++) {
var $list = fileList[i];
var $meta = fileMeta[i];
var objectUrl = anyWindow.createObjectURL(fileList[i]);
var $newDiv = $("<div>", {
class: "img-div"
});
var $newImg = $("<img>", {
src: objectUrl,
class: "newly-added"
}).appendTo($newDiv);
$meta['width'] = $newImg.width();
$meta['height'] = $newImg.height();
$meta['rotateDeg'] = 0.000;
$meta['top'] = $newImg.position().top;
$meta['left'] = $newImg.position().left;
$(".new-multiple").append($newDiv);
$newDiv.draggable({
drag: function(e, ui) {
$meta['top'] = ui.position.top;
$meta['left'] = ui.position.left;
logMeta($meta);
$newImg.data("meta", $meta);
}
});
$newDiv.rotatable({
rotate: function(e, ui) {
$meta['rotateDeg'] = Math.round(ui.angle.degrees * 10000) / 10000;
$meta['rotateRad'] = ui.angle.current;
logMeta($meta);
$newImg.data("meta", $meta);
}
});
$newDiv.resizable({
aspectRatio: true,
handles: "ne, nw, e, se, sw, w",
resize: function(e, ui) {
$meta['width'] = ui.size.width;
$meta['height'] = ui.size.height;
logMeta($meta);
$newImg.data("meta", $meta);
}
});
$newDiv.find(".ui-icon").removeClass("ui-icon ui-icon-gripsmall-diagonal-se");
window.URL.revokeObjectURL(fileList[i]);
console.log($meta);
logMeta($meta);
$newImg.data("meta", $meta);
}
$(".newly-added").on("click", function(e) {
$(".newly-added").removeClass("img-selected");
$(this).addClass("img-selected");
e.stopPropagation();
});
$(document).on("click", function(e) {
if ($(e.target).is(".newly-added") === false) {
$(".newly-added").removeClass("img-selected");
}
});
}
$("button").button();
$("#browse-btn").click(function(e) {
e.preventDefault();
$("#user_file").trigger("click");
});
$("#browse-btn").click(function(e) {
e.preventDefault();
$(this).parent().submit();
});
$("form").submit(function(e) {
e.preventDefault();
console.log("Prepared Meta Data:");
$(".newly-added").each(function() {
console.log($(this).data("meta"));
});
// AJAX Post Code will be entered here
});
});
@mpen
converting file size in bytes to human-readable string
用于文件大小转换函数。
您可以看到,我们创建了一个数组来存储与文件关联的相应细节。当拖动、调整或旋转项目时,该选项会更新。提交表单时,您可以将这些详细信息与原始图像一起提交。所以至少你的用户界面现在已经构建好了。
Image Processing
对于PHP。查看要使用的脚本,然后从后端脚本开始。
