मैंने इस सवाल का जवाब देते हुए कुछ अलग-अलग पोस्ट और यहां तक कि स्टैकओवरफ्लो पर सवाल किए हैं। मैं मूल रूप से इस पोस्ट के रूप में इसी बात को लागू कर रहा हूं ।
तो यहाँ मेरा मुद्दा है। जब मैं फोटो अपलोड करता हूं, तो मुझे बाकी फॉर्म भी जमा करने होते हैं। यहाँ मेरा 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>
पहले, मुझे छवि का आकार बदलने की आवश्यकता नहीं थी, इसलिए मेरी जावास्क्रिप्ट इस तरह दिखती थी:
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...
}
}
});
};
मैंने फ़ाइल इनपुट को फ़ॉर्म से बाहर ले जाने और फॉर्म में छिपे इनपुट के बारे में सोचा है कि मैंने आकार की छवि के मूल्य को निर्धारित किया है ... लेकिन मैं सोच रहा हूँ कि क्या मैं बस उस छवि को बदल सकता हूँ पहले से ही फॉर्म में है।
BufferedImage dest = src.getSubimage(rect.x, rect.y, rect.width, rect.height);