Help, How to compress image before uploud?

0

I would greatly appreciate your help. I have tried everything and can not make it work as expected. I have a code and would like to add image compression in it, ie I want to reduce the weight of the image before uploud. Following:

<div class="modal-body">
								
								<div class="alert alert-info" role="alert"> 1º Passo: Carregue sua imagem clicando em escolher arquivo. <br> 2° Passo: Após surgir a confirmação clique em ok. <br> 3° Passo: Clique na imagem para adiciona-la na arte escolhida.</div>
								
            <form id="userForm" method="post" commandName="user" enctype="multipart/form-data" data-ajax="false">
<input id="uploadImage" type="file" accept="image/*" name="myPhoto" onchange="PreviewImage();" />
   <img crossOrigin="anonymous"  id="uploadPreview"  class="btn image1" style="width: 150px;" />
   </form>
<script type="text/javascript">

    function PreviewImage() {
	
        var oFReader = new FileReader();
        oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
	
if (typeof FileReader !== "undefined" && (/image/i).test( document.getElementById("uploadImage").files[0].type)) {
if (document.getElementById("uploadImage").files[0].size > <?php echo $upload_max ;?>){
alert("Arquivo muito grande. Por favor, selecione imagens menores que <?php echo $upload_max ;?> ");
} else if	 (document.getElementById("uploadImage").files[0].size < <?php echo $upload_min ;?>)
{
alert("Arquivo muito pequeno. Para uma melhor qualidade, por favor selecione imagens maiores que <?php echo $upload_min ;?>");
}
else
	oFReader.onload = function (oFREvent) {
		var dataURL = oFREvent.target.result;
         document.getElementById("uploadPreview").src  = oFREvent.target.result;
			alert( document.getElementById("uploadImage").files[0].type);
			$.ajax({
  type: "POST",
  url: "envia.php",
  data: {image: dataURL,tipo:document.getElementById("uploadImage").files[0].type }
}).done(function( respond ) {
  // you will get back the temp file name
  // or "Unable to save this image."
 document.getElementById("uploadPreview").src=respond;
$("#uploadPreview").click();
 });
        };
	} else
	{
	alert("Tipo de arquivo inválido. Selecione apenas imagens.");
	}
       
    };

</script>
                                </div>
    
asked by anonymous 08.12.2016 / 01:54

0 answers