यहाँ एक छवि फ़ाइल चुनने का एक शुद्ध जावास्क्रिप्ट उदाहरण है, इसे प्रदर्शित करना, छवि गुणों के माध्यम से लूप करना, और फिर छवि को कैनवास से IMG टैग में पुन: आकार देना और फिर से आकार की छवि प्रकार को jpeg में सेट करना है।
यदि आप कैनवास छवि में शीर्ष छवि पर राइट क्लिक करते हैं, और सेव फ़ाइल अस चुनें, तो यह पीएनजी प्रारूप में डिफ़ॉल्ट होगा। यदि आप दाईं ओर क्लिक करते हैं, और फ़ाइल को निचली छवि के रूप में सहेजते हैं, तो यह JPEG प्रारूप में डिफ़ॉल्ट होगा। चौड़ाई में 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 है:
jsFiddle उठाओ, प्रदर्शन, गुण मिलता है, और एक छवि फ़ाइल को फिर से आकार
JsFiddle में, ऊपर की छवि पर राइट क्लिक करना, जो कि एक कैनवास है, आपको IMG टैग में नीचे की छवि पर राइट क्लिक करने के समान ही विकल्प नहीं देगा।