আপলোড করার আগে একটি চিত্রের আকার পরিবর্তন করতে এইচটিএমএল 5 ব্যবহার করুন

Question 1

এই প্রশ্নের উত্তর দেওয়ার জন্য আমি স্ট্যাকওভারফ্লোতে কয়েকটি আলাদা পোস্ট এবং এমনকী প্রশ্ন পেয়েছি। আমি মূলত এই পোস্ট হিসাবে একই জিনিস বাস্তবায়ন করছি ।

সুতরাং এখানে আমার সমস্যা। আমি যখন ছবিটি আপলোড করি তখন আমারও বাকি ফর্মটি জমা দিতে হবে। এখানে আমার এইচটিএমএল:

<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...
            }
        }
    });
};

আমি ফর্মটি ফাইলের ইনপুটটি সরিয়ে নিয়ে যাওয়া এবং ফর্মের মধ্যে একটি লুকানো ইনপুট থাকার বিষয়ে ভেবেছি যা আমি পুনরায় আকারিত চিত্রটির মানকে সেট করে দিয়েছি ... তবে আমি ভাবছি যে আমি কেবল সেই চিত্রটি প্রতিস্থাপন করতে পারি কিনা? ইতিমধ্যে ফর্ম আছে।

Question 2

এখানে আমি শেষ করে যা করেছি এবং এটি দুর্দান্ত কাজ করেছে।

প্রথমে আমি ফাইলের ইনপুটটি ফর্মের বাইরে সরিয়ে নিয়েছি যাতে এটি জমা না দেওয়া হয়:

<input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" />
<form id="uploadImageForm" enctype="multipart/form-data">
    <input id="name" value="#{name}" />
    ... a few more inputs ... 
</form>

তারপরে আমি uploadPhotosফাংশনটি পরিবর্তন করে কেবল আকার পরিবর্তন করতেই হ্যান্ডেল করতে পারি:

window.uploadPhotos = function(url){
    // 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 = 544,// TODO : pull max size from a site config
                    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);
                var dataUrl = canvas.toDataURL('image/jpeg');
                var resizedImage = dataURLToBlob(dataUrl);
                $.event.trigger({
                    type: "imageResized",
                    blob: resizedImage,
                    url: dataUrl
                });
            }
            image.src = readerEvent.target.result;
        }
        reader.readAsDataURL(file);
    }
};

আপনি দেখতে পাচ্ছেন যে আমি canvas.toDataURL('image/jpeg');পুনরায় আকারিত চিত্রটি একটি ডেটাআরএল অ্যাডনে রূপান্তর করতে ব্যবহার করছি তখন আমি ফাংশনটি কল dataURLToBlob(dataUrl);করে ডেটাআরআলকে একটি ফোটাতে পরিণত করব যা আমি ফর্মটিতে যুক্ত করতে পারি। যখন ব্লবটি তৈরি হবে, আমি একটি কাস্টম ইভেন্ট ট্রিগার করব। ব্লব তৈরির জন্য এখানে ফাংশনটি দেওয়া হয়েছে:

/* Utility function to convert a canvas to a BLOB */
var dataURLToBlob = function(dataURL) {
    var BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) == -1) {
        var parts = dataURL.split(',');
        var contentType = parts[0].split(':')[1];
        var raw = parts[1];

        return new Blob([raw], {type: contentType});
    }

    var parts = dataURL.split(BASE64_MARKER);
    var contentType = parts[0].split(':')[1];
    var raw = window.atob(parts[1]);
    var rawLength = raw.length;

    var uInt8Array = new Uint8Array(rawLength);

    for (var i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], {type: contentType});
}
/* End Utility function to convert a canvas to a BLOB      */

অবশেষে, এখানে আমার ইভেন্ট হ্যান্ডলারটি কাস্টম ইভেন্ট থেকে ব্লব নেয়, ফর্মটি সংযোজন করে এবং পরে এটি জমা দেয়।

/* Handle image resized events */
$(document).on("imageResized", function (event) {
    var data = new FormData($("form[id*='uploadImageForm']")[0]);
    if (event.blob && event.url) {
        data.append('image_data', event.blob);

        $.ajax({
            url: event.url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',
            success: function(data){
               //handle errors...
            }
        });
    }
});

Question 3

যদি কোন আগ্রহী আমি একটি টাইপ স্ক্রিপ্ট সংস্করণ তৈরি করেছি:

interface IResizeImageOptions {
  maxSize: number;
  file: File;
}
const resizeImage = (settings: IResizeImageOptions) => {
  const file = settings.file;
  const maxSize = settings.maxSize;
  const reader = new FileReader();
  const image = new Image();
  const canvas = document.createElement('canvas');
  const dataURItoBlob = (dataURI: string) => {
    const bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
        atob(dataURI.split(',')[1]) :
        unescape(dataURI.split(',')[1]);
    const mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
    const max = bytes.length;
    const ia = new Uint8Array(max);
    for (var i = 0; i < max; i++) ia[i] = bytes.charCodeAt(i);
    return new Blob([ia], {type:mime});
  };
  const resize = () => {
    let width = image.width;
    let height = image.height;

    if (width > height) {
        if (width > maxSize) {
            height *= maxSize / width;
            width = maxSize;
        }
    } else {
        if (height > maxSize) {
            width *= maxSize / height;
            height = maxSize;
        }
    }

    canvas.width = width;
    canvas.height = height;
    canvas.getContext('2d').drawImage(image, 0, 0, width, height);
    let dataUrl = canvas.toDataURL('image/jpeg');
    return dataURItoBlob(dataUrl);
  };

  return new Promise((ok, no) => {
      if (!file.type.match(/image.*/)) {
        no(new Error("Not an image"));
        return;
      }

      reader.onload = (readerEvent: any) => {
        image.onload = () => ok(resize());
        image.src = readerEvent.target.result;
      };
      reader.readAsDataURL(file);
  })    
};

এবং এখানে জাভাস্ক্রিপ্ট ফলাফল:

var resizeImage = function (settings) {
    var file = settings.file;
    var maxSize = settings.maxSize;
    var reader = new FileReader();
    var image = new Image();
    var canvas = document.createElement('canvas');
    var dataURItoBlob = function (dataURI) {
        var bytes = dataURI.split(',')[0].indexOf('base64') >= 0 ?
            atob(dataURI.split(',')[1]) :
            unescape(dataURI.split(',')[1]);
        var mime = dataURI.split(',')[0].split(':')[1].split(';')[0];
        var max = bytes.length;
        var ia = new Uint8Array(max);
        for (var i = 0; i < max; i++)
            ia[i] = bytes.charCodeAt(i);
        return new Blob([ia], { type: mime });
    };
    var resize = function () {
        var width = image.width;
        var height = image.height;
        if (width > height) {
            if (width > maxSize) {
                height *= maxSize / width;
                width = maxSize;
            }
        } else {
            if (height > maxSize) {
                width *= maxSize / height;
                height = maxSize;
            }
        }
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
        var dataUrl = canvas.toDataURL('image/jpeg');
        return dataURItoBlob(dataUrl);
    };
    return new Promise(function (ok, no) {
        if (!file.type.match(/image.*/)) {
            no(new Error("Not an image"));
            return;
        }
        reader.onload = function (readerEvent) {
            image.onload = function () { return ok(resize()); };
            image.src = readerEvent.target.result;
        };
        reader.readAsDataURL(file);
    });
};

ব্যবহারের মত:

resizeImage({
    file: $image.files[0],
    maxSize: 500
}).then(function (resizedImage) {
    console.log("upload resized image")
}).catch(function (err) {
    console.error(err);
});

বা ( async/ await):

const config = {
    file: $image.files[0],
    maxSize: 500
};
const resizedImage = await resizeImage(config)
console.log("upload resized image")

Question 4

আপনার মতো যদি কিছু, আমার মতো মুখোমুখি সমস্যাগুলির সমাধান করে তবে আমি সমাধানগুলি এখানে একটি এক্সিফ ওরিয়েন্টেশন ফিক্সের সাথে একত্রিত করেছি

https://gist.github.com/SagiMedina/f00a57de4e211456225d3114fd10b0d0