我发现了一些不同的帖子,甚至关于stackoverflow的问题都回答了这个问题。我基本上正在实现与此职位相同的事情。
所以这是我的问题。上传照片时,我还需要提交表单的其余部分。这是我的html:
<form id="uploadImageForm" enctype="multipart/form-data">
<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" />
<input id="name" value="#{name}" />
... a few more inputs ...
</form>
以前,我不需要调整图像大小,因此我的javascript如下所示:
window.uploadPhotos = function(url){
var data = new FormData($("form[id*='uploadImageForm']")[0]);
$.ajax({
url: url,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
... handle error...
}
}
});
};
所有这些都很好用...现在我需要调整图像的大小...如何替换表单中的图像,以便发布调整大小的图像而不是上传的图像?
window.uploadPhotos = function(url){
var resizedImage;
// Read in file
var file = event.target.files[0];
// Ensure it's an image
if(file.type.match(/image.*/)) {
console.log('An image has been loaded');
// Load the image
var reader = new FileReader();
reader.onload = function (readerEvent) {
var image = new Image();
image.onload = function (imageEvent) {
// Resize the image
var canvas = document.createElement('canvas'),
max_size = 1200,
width = image.width,
height = image.height;
if (width > height) {
if (width > max_size) {
height *= max_size / width;
width = max_size;
}
} else {
if (height > max_size) {
width *= max_size / height;
height = max_size;
}
}
canvas.width = width;
canvas.height = height;
canvas.getContext('2d').drawImage(image, 0, 0, width, height);
resizedImage = canvas.toDataURL('image/jpeg');
}
image.src = readerEvent.target.result;
}
reader.readAsDataURL(file);
}
// TODO: Need some logic here to switch out which photo is being posted...
var data = new FormData($("form[id*='uploadImageForm']")[0]);
$.ajax({
url: url,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
... handle error...
}
}
});
};
我曾考虑过将文件输入移出表单,并在表单中有一个隐藏的输入,将其值设置为调整大小后的图像的值...但是我想知道是否可以替换掉已经是表格了。
您使用任何服务器端语言还是仅使用html5和javascript?
—
luke2012
@ luke2012 Java服务器端
—
ferics2
也许使用jCrop之类的东西在客户端裁剪图像,然后将坐标发送到服务器端进行裁剪。即
—
luke2012
BufferedImage dest = src.getSubimage(rect.x, rect.y, rect.width, rect.height);
@ luke2012的重点是减小图像大小,然后再将其发送到服务器。
—
ferics2 2014年
看一看的JS源pandamatak.com/people/anand/test/crop似乎是相似..
—
luke2012