আপলোড করার আগে ফাইলের আকার, চিত্রের প্রস্থ এবং উচ্চতা পান

Question 1

JQuery বা জাভাস্ক্রিপ্ট সহ আমার ওয়েবসাইটে আপলোড করার আগে আমি ফাইলের আকার, চিত্রের উচ্চতা এবং প্রস্থ কীভাবে পেতে পারি?

Question 2

তথ্য ডেটা পূর্বরূপ সহ একাধিক চিত্র আপলোড

এইচটিএমএল 5 এবং ফাইল এপিআই ব্যবহার করে

URL এপিআই ব্যবহার করে উদাহরণ

চিত্রগুলির উত্সগুলি ব্লব অবজেক্টের প্রতিনিধিত্বকারী একটি URL হবে
<img src="blob:null/026cceb9-edr4-4281-babb-b56cbf759a3d">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage  = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `Unsupported format ${file.type}: ${file.name}<br>`);

  const img = new Image();
  img.addEventListener('load', () => {
    EL_preview.appendChild(img);
    EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB<div>`);
    window.URL.revokeObjectURL(img.src); // Free some memory
  });
  img.src = window.URL.createObjectURL(file);
}

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Remove old images and data
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

#preview img { max-height: 100px; }

<input id="browse" type="file" multiple>
<div id="preview"></div>

স্নিপেট প্রসারিত করুন

ফাইলরেডার এপিআই ব্যবহার করে উদাহরণ

ক্ষেত্রে আপনার যেমন দীর্ঘ 6464 এনকোডড ডাটা স্ট্রিং চিত্রের উত্স প্রয়োজন
<img src="data:image/png;base64,iVBORw0KGg... ...lF/++TkSuQmCC=">

const EL_browse  = document.getElementById('browse');
const EL_preview = document.getElementById('preview');

const readImage = file => {
  if ( !(/^image\/(png|jpe?g|gif)$/).test(file.type) )
    return EL_preview.insertAdjacentHTML('beforeend', `<div>Unsupported format ${file.type}: ${file.name}</div>`);

  const reader = new FileReader();
  reader.addEventListener('load', () => {
    const img  = new Image();
    img.addEventListener('load', () => {
      EL_preview.appendChild(img);
      EL_preview.insertAdjacentHTML('beforeend', `<div>${file.name} ${img.width}×${img.height} ${file.type} ${Math.round(file.size/1024)}KB</div>`);
    });
    img.src = reader.result;
  });
  reader.readAsDataURL(file);  
};

EL_browse.addEventListener('change', ev => {
  EL_preview.innerHTML = ''; // Clear Preview
  const files = ev.target.files;
  if (!files || !files[0]) return alert('File upload not supported');
  [...files].forEach( readImage );
});

#preview img { max-height: 100px; }

<input id="browse" type="file"  multiple>
<div id="preview"></div>

স্নিপেট প্রসারিত করুন

Question 3

আপনি যদি jQuery বৈধতা প্লাগইন ব্যবহার করতে পারেন তবে আপনি এটির মতো এটি করতে পারেন:

এইচটিএমএল:

<input type="file" name="photo" id="photoInput" />

জাভাস্ক্রিপ্ট:

$.validator.addMethod('imagedim', function(value, element, param) {
  var _URL = window.URL;
        var  img;
        if ((element = this.files[0])) {
            img = new Image();
            img.onload = function () {
                console.log("Width:" + this.width + "   Height: " + this.height);//this will give you image width and height and you can easily validate here....

                return this.width >= param
            };
            img.src = _URL.createObjectURL(element);
        }
});

ফাংশনটি অ্যাব ওভারলোড ফাংশন হিসাবে পাস করা হয়েছে।

কোডটি এখান থেকে নেওয়া হয়েছে

Question 4

ডেমো

এটি আপনি যা চান তা নিশ্চিত না, তবে সাধারণ উদাহরণ:

var input = document.getElementById('input');

input.addEventListener("change", function() {
    var file  = this.files[0];
    var img = new Image();

    img.onload = function() {
        var sizes = {
            width:this.width,
            height: this.height
        };
        URL.revokeObjectURL(this.src);

        console.log('onload: sizes', sizes);
        console.log('onload: this', this);
    }

    var objectURL = URL.createObjectURL(file);

    console.log('change: file', file);
    console.log('change: objectURL', objectURL);
    img.src = objectURL;
});

Question 5

এখানে একটি চিত্র ফাইল বাছাই করা, এটি প্রদর্শন করা, চিত্রের বৈশিষ্ট্যগুলির মধ্য দিয়ে লুপিং করা এবং তারপরে ক্যানভাস থেকে চিত্রটিকে একটি আকারের আইএমজি ট্যাগে পুনরায় আকার দেওয়ার এবং পুনরায় আকারের চিত্রের ধরণটি স্পষ্টতই জেপিগে সেট করার একটি খাঁটি জাভাস্ক্রিপ্ট উদাহরণ example

আপনি যদি ক্যানভাস ট্যাগের উপরের চিত্রটি ডানদিকে ক্লিক করেন এবং ফাইল সংরক্ষণ করুন হিসাবে এটি চয়ন করেন তবে এটি পিএনজি ফর্ম্যাটে ডিফল্ট হবে। আপনি যদি ডান ক্লিক করেন, এবং নিম্ন চিত্র হিসাবে ফাইল সংরক্ষণ করুন, এটি একটি জেপিইজি ফর্ম্যাটে ডিফল্ট হবে। প্রস্থের 400px এর বেশি যে কোনও ফাইল প্রস্থে 400px হ্রাস করা হবে, এবং মূল ফাইলের সাথে আনুপাতিক উচ্চতা।

এইচটিএমএল

<form class='frmUpload'>
  <input name="picOneUpload" type="file" accept="image/*" onchange="picUpload(this.files[0])" >
</form>

<canvas id="cnvsForFormat" width="400" height="266" style="border:1px solid #c3c3c3"></canvas>
<div id='allImgProperties' style="display:inline"></div>

<div id='imgTwoForJPG'></div>

লিপি

<script>

window.picUpload = function(frmData) {
  console.log("picUpload ran: " + frmData);

var allObjtProperties = '';
for (objProprty in frmData) {
    console.log(objProprty + " : " + frmData[objProprty]);
    allObjtProperties = allObjtProperties + "<span>" + objProprty + ": " + frmData[objProprty] + ", </span>";
};

document.getElementById('allImgProperties').innerHTML = allObjtProperties;

var cnvs=document.getElementById("cnvsForFormat");
console.log("cnvs: " + cnvs);
var ctx=cnvs.getContext("2d");

var img = new Image;
img.src = URL.createObjectURL(frmData);

console.log('img: ' + img);

img.onload = function() {
  var picWidth = this.width;
  var picHeight = this.height;

  var wdthHghtRatio = picHeight/picWidth;
  console.log('wdthHghtRatio: ' + wdthHghtRatio);

  if (Number(picWidth) > 400) {
    var newHeight = Math.round(Number(400) * wdthHghtRatio);
  } else {
    return false;
  };

    document.getElementById('cnvsForFormat').height = newHeight;
    console.log('width: 400  h: ' + newHeight);
    //You must change the width and height settings in order to decrease the image size, but
    //it needs to be proportional to the original dimensions.
    console.log('This is BEFORE the DRAW IMAGE');
    ctx.drawImage(img,0,0, 400, newHeight);

    console.log('THIS IS AFTER THE DRAW IMAGE!');

    //Even if original image is jpeg, getting data out of the canvas will default to png if not specified
    var canvasToDtaUrl = cnvs.toDataURL("image/jpeg");
    //The type and size of the image in this new IMG tag will be JPEG, and possibly much smaller in size
    document.getElementById('imgTwoForJPG').innerHTML = "<img src='" + canvasToDtaUrl + "'>";
};
};

</script>

এখানে একটি জেএসফিডাল:

jsFiddle চয়ন করুন, প্রদর্শন করুন, বৈশিষ্ট্যগুলি পান এবং একটি চিত্র ফাইল পুনরায় আকার দিন

জেএসফিডেলে উপরের চিত্রটির ডানদিকে ক্লিক করা, যা একটি ক্যানভাস, আপনাকে আইএমজি ট্যাগের নীচের চিত্রটিতে ডান ক্লিক করার মতো একই সংরক্ষণের বিকল্পগুলি দেয় না।

Question 6

আমি যতদূর জানি জাভাস্ক্রিপ্ট / জ্যাকুয়েরিতে স্থানীয় ফাইল সিস্টেমের অ্যাক্সেস না থাকায় এটি করার সহজ উপায় নেই। এইচটিএমএল 5 তে কিছু নতুন বৈশিষ্ট্য রয়েছে যা আপনাকে ফাইলের আকারের মতো নির্দিষ্ট মেটা ডেটা পরীক্ষা করতে দেয় তবে আমি নিশ্চিত নই যে আপনি চিত্রটির মাত্রা পেতে পারেন কিনা।

এখানে এইচটিএমএল 5 বৈশিষ্ট্য এবং আইটিএইচ জন্য একটি কাজ যা একটি অ্যাক্টিভএক্স নিয়ন্ত্রণ ব্যবহার করে জড়িত সে সম্পর্কে আমি এখানে একটি নিবন্ধ পেয়েছি। http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

Question 7

তাই আমি ফাইলরেডার এপিআইয়ের যে বিভিন্ন জিনিস সরবরাহ করতে হয়েছিল তা নিয়ে পরীক্ষা-নিরীক্ষা শুরু করেছিলাম এবং একটি ডেটা URL সহ একটি আইএমজি ট্যাগ তৈরি করতে পারি।

ত্রুটি: এটি মোবাইল ফোনে কাজ করে না, তবে গুগল ক্রোমে এটি দুর্দান্ত কাজ করে।

$('input').change(function() {
    
    var fr = new FileReader;
    
    fr.onload = function() {
        var img = new Image;
        
        img.onload = function() { 
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
            $.ajax({url: img.src, async: false, success: function(result){
            		$("#result").html("READING IMAGE, PLEASE WAIT...")
            		$("#result").html("<img src='" + img.src + "' />");
                console.log("Finished reading Image");
        		}});
        };
        
        img.src = fr.result;
    };
    
    fr.readAsDataURL(this.files[0]);
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>

স্নিপেট প্রসারিত করুন

( http://jsfiddle.net/eD2Ez/530/ এ এটি একটি জসফিডেলে
দেখুন ) (মূল জেএসফিল যা আমি http://jsfiddle.net/eD2Ez/ এ যুক্ত করেছি )

Question 8

একটি কার্যকারী jQuery বৈধতা উদাহরণ:

   $(function () {
        $('input[type=file]').on('change', function() {
            var $el = $(this);
            var files = this.files;
            var image = new Image();
            image.onload = function() {
                $el
                    .attr('data-upload-width', this.naturalWidth)
                    .attr('data-upload-height', this.naturalHeight);
            }

            image.src = URL.createObjectURL(files[0]);
        });

        jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
            var params = {
                imageminwidth: options.params.imageminwidth.split(',')
            };

            options.rules['imageminwidth'] = params;
            if (options.message) {
                options.messages['imageminwidth'] = options.message;
            }
        });

        jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
            var $el = $(element);
            if(!element.files && element.files[0]) return true;
            return parseInt($el.attr('data-upload-width')) >=  parseInt(param["imageminwidth"][0]);
        });

    } (jQuery));