I am writing a code in asp.net c# to compress the image first and then upload it using server .. so i am getting a compressed image in a <img id="1.jpg"> tag and directly want to upload this file to server. please help me in solving this issue..below is my code of html i am getting compressed file to object named "result_image" and want this image to directly upload on server..
my html code is:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="" id="source_image" style="height:320px;width:320px;" />
<br /><br />
<img src="" style="height:160px;width:160px;" id="result_image" />
<input type="button" onclick="compress();" value="compress" />
</div>
<input id="uploadInput" type="file" name="myFiles" onchange="readURL(this);" >
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#source_image')
.attr('src', e.target.result)
.width(320)
.height(320);
};
reader.readAsDataURL(input.files[0]);
}
}
function compress() {
var nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(0) ;
}
alert(sOutput);
var compression = (150 / parseInt(sOutput)) * 100;
alert(compression.toFixed(0));
var source_image = document.getElementById('source_image');
var result_image = document.getElementById('result_image');
if (source_image.src == "") {
alert("You must load an image first!");
return false;
}
var quality = parseInt(compression.toFixed(0));
result_image.src = getdata(source_image, quality, "jpg").src;
result_image.onload = function () {
var image_width = $(result_image).width(),
image_height = $(result_image).height();
if (image_width > image_height) {
result_image.style.width = "160px";
} else {
result_image.style.height = "160px";
}
result_image.style.display = "block";
}
}
function getdata(source_img_obj, quality, output_format) {
var mime_type = "image/jpeg";
if (output_format != undefined && output_format == "png") {
mime_type = "image/png";
}
var cvs = document.createElement('canvas');
cvs.width = source_img_obj.naturalWidth;
cvs.height = source_img_obj.naturalHeight;
var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);
var newImageData = cvs.toDataURL(mime_type, quality / 100);
var result_image_obj = new Image();
result_image_obj.src = newImageData;
return result_image_obj;
}
</script>
</form>
</body>
</html>
Submit an article or tip