সার্ভারে আপলোড করার আগে জাভাস্ক্রিপ্টের সাথে চিত্রের পুনরায় আকার দেওয়া ক্লায়েন্ট-সাইড

Question

আমি জাভাস্ক্রিপ্টের সাথে চিত্রের ক্লায়েন্ট-সাইডের আকার পরিবর্তন করার একটি উপায় খুঁজছি (সত্যিকারের আকার পরিবর্তন করুন, কেবল প্রস্থ এবং উচ্চতা পরিবর্তন করবেন না)।
আমি জানি এটি ফ্ল্যাশ করে করা সম্ভব তবে সম্ভব হলে আমি এড়াতে চাই।

ওয়েবে কোথাও কোনও ওপেন সোর্স অ্যালগরিদম আছে?

Comments

আপনার মধ্যে যারা এখনও এর উত্তর জানতে চান, আপনি এটি করতে পারেন তবে চিত্র প্রক্রিয়াকরণের জন্য আপনাকে কিছু অজ্যাক্স কল করতে হবে।

— পলিহেডন

'বানাতে হবে'? ভাল আপনি সর্বোপরি এটি সার্ভারে সমাধান করতে পারেন এবং এজ্যাক্স কলগুলির মাধ্যমে স্বচ্ছভাবে ডেটা পেতে পারেন। তবে পুরো প্রচেষ্টাটি হ'ল এটি ক্লায়েন্টের পক্ষে, এবং জেরেমি উল্লেখ করেছেন যে এটি করা যেতে পারে। আমি মনে করি এটির

— বার্ট

এর সর্বশেষতম সংস্করণ সহ, Dropzone.js আপলোডের আগে ক্লায়েন্ট সাইড ইমেজের আকার পরিবর্তনকে সমর্থন করে।

— ব্যবহারকারী 1666456

Answer 1

এখানে একটি সূচনা যা এটি করে: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(একটি এসআই 6 সংস্করণ এবং একটি জেএস সংস্করণ যা কোনও স্ক্রিপ্ট ট্যাগে অন্তর্ভুক্ত করা যেতে পারে)

আপনি নিম্নলিখিত হিসাবে এটি ব্যবহার করতে পারেন:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

এটি পরিচালনা করতে পারে এমন যতগুলি ব্রাউজারে এটি কাজ করে তা নিশ্চিত করার জন্য এটি একগুচ্ছ সমর্থন সনাক্তকরণ এবং পলিফিল অন্তর্ভুক্ত করে।

(এটি জিআইএফ চিত্রগুলিও উপেক্ষা করে - যদি তারা অ্যানিমেটেড হয়)

Comments

আমার মনে হচ্ছে আপনি এর জন্য প্রায় যথেষ্ট প্রশংসা পান নি - আমি মনে করি এটি দুর্দান্ত কাজ করে এবং খুব সহজ। ভাগ করে নেওয়ার জন্য ধন্যবাদ!

— ম্যাট

হুম..আমি এটির সাথে ভাল সাফল্য পেয়েছি, কিন্তু আমি দেখতে পেয়েছি যে আমার চিত্রগুলি (পুনরায় আকার দেওয়ার পাশাপাশি) মানেরও মারাত্মক ক্ষয়ক্ষতি হয়েছে (গুরুতর পিক্সিলার আকারে), যদিও এটি সঠিক রেজোলিউশনে প্রকাশিত হয়েছিল।

— রুবেন মার্টিনেজ জুনিয়র

হাই, এর মতো ব্যবহারের জন্য আমার একটি স্নিপেট দরকার, এবং আমি মনে করি এটি খুব ভাল তবে .. ফাংশন (ব্লাব, ডিআইটিআরাইজ) did // didItResize সত্য হবে যদি এটি এর আকার পরিবর্তন করতে পরিচালিত হয়, অন্যথায় মিথ্যা (এবং আসলটি ফিরে আসবে) ফাইলটি 'ব্লব') হিসাবে ডকুমেন্ট.সেটমেন্ট বিইআইডি ('পূর্বরূপ') s src = উইন্ডো URL URL re // আপনি এখন এক্সএইচআর ব্যবহার করে এই ব্লবটি আপলোড করতে পারেন। এখানে আমার একটি সমস্যা আছে .. আমি কীভাবে এই ফর্মটি কেবল ফর্ম জমা দিয়ে একটি ফর্মটিতে পাঠাতে পারি। আমি বলতে চাইছি, সাবমিট বাটন দ্বারা চালিত পোস্ট অনুরোধের মতো। আপনি জানেন, স্বাভাবিক উপায়। সংক্ষেপের জন্য আপনাকে ধন্যবাদ!

— iedmrc

গুণমান (পুনরায় মডেলিং) ক্ষতিগ্রস্থ হওয়ার জন্য, ক্যানভাস প্রসঙ্গটি সত্য imageSmoothingEnabledহিসাবে সেট imageSmoothingQualityকরতে এবং এটিকে আপডেট করুন high। টাইপস্ক্রিপ্টে ব্লকটি দেখতে দেখতে: const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; (ctx as any).imageSmoothingQuality = 'high'; ctx.drawImage(image, 0, 0, width, height);

— সান পারকিনস

এটিকে এনপিএম প্যাকেজ করার কোনও সুযোগ আছে কি? সুপার দুর্দান্ত হবে!

— এর্কস্

Answer 2

এর উত্তর হ্যাঁ - এইচটিএমএল 5 এ আপনি ক্যানভাস উপাদানটি ব্যবহার করে চিত্রের ক্লায়েন্ট-সাইডটি আকার দিতে পারেন। আপনি নতুন ডেটা নিতে এবং এটি একটি সার্ভারে প্রেরণ করতে পারেন। এই টিউটোরিয়ালটি দেখুন:

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

Comments

এটি একটি লিঙ্ক-কেবল উত্তর এবং যেমন একটি মন্তব্য হওয়া উচিত।

— জিম্বো

canvas.mozGetAsFile ( "foo.png");

— হতাশ

Answer 3

আপনি যদি আপলোড করার আগে আকার পরিবর্তন করছিলেন তবে আমি এই http://www.plupload.com/ সন্ধান করেছি just

এটি কোনও কল্পনাযোগ্য পদ্ধতিতে আপনার জন্য সমস্ত যাদু করে।

দুর্ভাগ্যক্রমে এইচটিএমএল 5 রিসাইজটি কেবল মজিলা ব্রাউজারের সাহায্যে সমর্থিত তবে আপনি অন্যান্য ব্রাউজারগুলিকে ফ্ল্যাশ এবং সিলভারলাইটে পুনর্নির্দেশ করতে পারেন।

আমি এটি চেষ্টা করেছি এবং এটি আমার অ্যান্ড্রয়েডের সাথে কাজ করেছে!

আমি ফ্ল্যাশ-এ http://swfupload.org/ ব্যবহার করছিলাম , এটি কাজটি খুব ভাল করে করে তবে আকার পরিবর্তনের আকারটি খুব কম। (সীমাটি মনে করতে পারে না) এবং ফ্ল্যাশ উপলভ্য না হলে html4 এ ফিরে যায় না।

Comments

যখন কোনও ব্যবহারকারী একটি 10 ​​এমবি ফটো আপলোড করার চেষ্টা করবেন যা কেবলমাত্র আরও ছোট ছবি হিসাবে সংরক্ষণ করা হবে তখন ক্লায়েন্ট-সাইড রাইজিং করা ভাল। এটি এভাবে দ্রুত আপলোড করবে।

— কাইল

এখানে একই পরিস্থিতি, আপনার কাছে একটি ফাইল ইনপুট আসার সাথে সাথে ব্যবহারকারী একটি স্মার্টফোনে রয়েছে এবং ক্যামেরাটি ব্যবহার করে একটি চিত্র স্ন্যাপ করে, এটি আধুনিক স্মার্টফোনে প্রায় 10 এমবি হতে চলেছে। আপনি যদি সার্ভারের পক্ষের যাহাই হউক না কেন এটির আকার পরিবর্তন করছেন এবং কেবলমাত্র এর অনেক ছোট সংস্করণ সংরক্ষণ করছেন, আপনি ক্লায়েন্টের পূর্বে পুনরায় আকার দেওয়ার ক্ষেত্রে প্রচুর সেলুলার ডেটা এবং লোডিংয়ের সময় সাশ্রয় করবেন।

— অ্যালেক্স

সাবধান থাকুন কারণ প্লুপলোডটি এজিপিএল।

— অ্যালেক্স

Answer 4

http://nodeca.github.io/pica/demo/

আধুনিক ব্রাউজারে আপনি চিত্রের ডেটা লোড / সেভ করতে ক্যানভাস ব্যবহার করতে পারেন। আপনি যদি ক্লায়েন্টের প্রতিচ্ছবিটি আকার পরিবর্তন করেন তবে আপনার কয়েকটি বিষয় মাথায় রাখা উচিত:

1. আপনার প্রতি চ্যানেলে কেবল 8 বিট থাকবে (জেপিগের আরও ভাল গতিশীল পরিসীমা থাকতে পারে, প্রায় 12 বিট)। আপনি যদি পেশাদার ছবি আপলোড না করেন তবে সমস্যা হওয়া উচিত নয়।
2. পুনরায় আকারের অ্যালগরিদম সম্পর্কে সতর্কতা অবলম্বন করুন। বেশিরভাগ ক্লায়েন্ট সাইড রাইজাইজারগুলি তুচ্ছ গণিত ব্যবহার করে এবং ফলাফল এটির চেয়ে খারাপ।
3. আপনার ডাউনস্কেলড চিত্রটি তীক্ষ্ণ করার দরকার হতে পারে।
4. আপনি যদি মূল থেকে মেটাডেটা (এক্সিফ এবং অন্যান্য) পুনরায় ব্যবহার করতে চান - রঙের প্রোফাইল তথ্যটি ফিরতে ভুলবেন না। কারণ আপনি ক্যানভাসে চিত্র লোড করার সময় এটি প্রয়োগ করা হয়।

Answer 5

সম্ভবত ক্যানভাস ট্যাগ সহ (যদিও এটি পোর্টেবল নয়)। সেখানে কিভাবে ক্যানভাস সঙ্গে একটি চিত্র ঘোরাতে সম্পর্কে একটি ব্লগ এর এখানে , আমি যদি আপনি এটি ঘুরান পারেন, আপনি এটি পুনরায় আকার দিতে পারেন অনুমান করা। হতে পারে এটি একটি সূচনা পয়েন্ট হতে পারে।

এই গ্রন্থাগারটিও দেখুন ।

Comments

খুব দরকারী উদাহরণ। এই লিঙ্কগুলি যদি কখনও ভেঙে যায় তবে আপনি আপনার উত্তরে একটি স্নিপেট বা দুটি যোগ করতে চাইতে পারেন।

— ট্রেভর

Answer 6

সার্ভারে চিত্র আপলোড করার আগে আপনি ক্লায়েন্ট-সাইড ইমেজ প্রসেসিংয়ের জন্য জাভাস্ক্রিপ্ট ইমেজ প্রসেসিং ফ্রেমওয়ার্ক ব্যবহার করতে পারেন।

নীচে আমি নীচের পৃষ্ঠায় উদাহরণের উপর ভিত্তি করে রানভিনেবল কোড তৈরি করতে মার্ভিনজেজে ব্যবহার করেছি : "সার্ভারে আপলোড করার আগে ক্লায়েন্ট-সাইডে চিত্রগুলি প্রসেসিং করা হচ্ছে"

মূলত আমি ইমেজটির আকার পরিবর্তন করতে মারভিন.স্কেল (...) পদ্ধতিটি ব্যবহার করি । তারপরে, আমি ছবিটি একটি ব্লব হিসাবে আপলোড করব ( মেথড ইমেজ । টু ব্লব () ব্যবহার করে )। সার্ভারটি প্রাপ্ত চিত্রটির URL সরবরাহ করে জবাব দেয়।

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
	form = new FormData();
	form.append('name', event.target.files[0].name);
	
	reader = new FileReader();
	reader.readAsDataURL(event.target.files[0]);
	
	reader.onload = function(){
		image.load(reader.result, imageLoaded);
	};
	
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
	$.ajax({
		method: 'POST',
		url: 'https://www.marvinj.org/backoffice/imageUpload.php',
		data: form,
		enctype: 'multipart/form-data',
		contentType: false,
		processData: false,
		
	   
		success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
		},
		error: function (data) {
			console.log("error:"+error);
			console.log(data);
		},
		
	});
};

/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 120);
  form.append("blob", image.toBlob());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
				<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>

Comments

এটিকে ফ্রিকিন দুর্দান্ত লাগছে!

— পিমব্রউভার

Answer 7

হ্যাঁ, আধুনিক ব্রাউজারগুলির সাথে এটি পুরোপুরি কার্যকর। এমনকি কোনও বাইনারি ফাইল হিসাবে বিশেষত কোনও ক্যানভাস পরিবর্তন করার পরেও ফাইল আপলোড করার পয়েন্টে এটি কার্যকর।

http://jsfiddle.net/bo40drmv/

(এই উত্তরটি এখানে গৃহীত উত্তরের একটি উন্নতি )

পিএইচপি-তে ফলাফল জমা দেওয়ার প্রক্রিয়াটি মাথায় রেখে এই জাতীয় কিছু:

//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it's temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);

যদি কেউ ভাইটালির বিষয়টি নিয়ে উদ্বেগ প্রকাশ করে তবে আপনি কার্যনির্বাহী জিফডলটিতে কিছু ফসল কাটা ও পুনরায় আকার দেওয়ার চেষ্টা করতে পারেন।

Answer 8

আমার অভিজ্ঞতায়, এই উদাহরণটি পুনরায় আকারিত ছবি আপলোড করার জন্য সেরা সমাধান হয়েছে: https://zocada.com/compress-resize-images-javascript-browser/

এটি HTML5 ক্যানভাস বৈশিষ্ট্যটি ব্যবহার করে।

কোডটি এর মতো 'সরল':

compress(e) {
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                const width = Math.min(800, img.width);
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;

                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName, {
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 1);
            },
            reader.onerror = error => console.log(error);
    };
}

এই বিকল্পটির সাথে কেবলমাত্র একটি নেতিবাচক প্রভাব রয়েছে এবং এটি এক্সআইএফ ডেটা উপেক্ষা করার কারণে চিত্রের ঘূর্ণনের সাথে সম্পর্কিত। যা আমি এই মুহুর্তে কাজ করছি। আমি এটি সম্পন্ন করার পরে আপডেট হবে।

আরেকটি খারাপ দিক, সমর্থন শত্রু আইই / এজ এর অভাব, যা আমি পাশাপাশি কাজ করছি। যদিও উপরের লিঙ্কে তথ্য রয়েছে। উভয় ইস্যু জন্য।