Geek Answers Handbook

After resizing the image, it is suggested to download, hide the gif download

I have a small image resizing script that quickly offers the resulting resized image as a download. If this was a normal case when the result content was loaded in a div on the same page, the js code below would work as on my other part of the site. But the scenario here is that the output (resized image) is offered as a load of strength, which appears as a loading prompt bar, so the code below loads load.gif, but cannot hide it. Consequently, load.gif remains visible.

I think that the codes that I need to either change or somehow fix start after line 6 below in the JS code. Prior to this, it functions and works as expected. Please note that my script size is completely in php.

Js

<script type="text/javascript"> jQuery(document).ready(function() { var $pageLoad = jQuery('.page-load'); $pageLoad.hide(); jQuery('#SubmitButton').on('click', function() { $pageLoad.show(100); }); //code till here works fine and triggers gif on submit but dunno after this //what codes should go here to fadeout or hide the loading gif ? //not even sure if this is right approach }); </script>

HTML :

 <form action="http://xxxxxxxxxxx/wp-content/themes/xxxxx/resize/resize.php" id="UploadForm" method="post" enctype="multipart/form-data"> <input type="file" name="image" /> <input type="submit" id="SubmitButton" name="SubmitButton" value="Upload" /> </form>

Just so you know, I use wordpress cms and the script size on another .php page, and the script uses session_start() . I am just learning php and not familiar with JS at all. And Yes, I do my own search, research, and customization. So far, nothing is working. If you need codes from resize.php for a better link, please let me know.

Just for simplicity, here is a simple illustration of the expected sequence.

  • The visitor clicks the submit button.

  • Data is passed to resize.php, as can be seen from the form action tag.

  • The JS script above starts and shows a hidden div class "page-load" that contains a loading gif (so the visitor knows that something is happening).

  • Now the resizing process is running, and visitors get a panel to load and save.

  • QUESTION: the form page reloaded, but the gif is still displayed. Hope this was clear.

Bottomline: How to hide the loading of the gif after the loading / resizing panel appears.

First update : a similar question described here collects votes but remains unresolved.

Second update . I'm still looking for an answer. I thought it would be a walk in the park. Seriously wrong.

0
source share
1 answer

I decided to go through this for you. Below is a step-by-step guide on creating a request using ajax.

What creates the code below can be seen at http://tomsfreelance.com/stackoverflow/imageDownloadLoading/main.php

Files, including PHP, are included in the directory ( http://tomsfreelance.com/stackoverflow/imageDownloadLoading/ )

Step 1: Customize the form. We will keep it simple.

 <form name="resizeImage"> <select id="image" onChange="com.demo.updateImage();"> <option value="img1.jpg">img1.jpg</option> <option value="img2.jpg">img2.jpg</option> <option value="img3.jpg">img3.jpg</option> </select> <input type="text" id="tint" placeholder="Tint" onKeyUp="com.demo.updateTint();"> <input type="button" id="download" value="Download" onClick="com.demo.downloadImage();" /> <br /> <img style="max-width: 400px; max-height: 400px;" src="img1.jpg" id="preview"> <div id="color"></div> </form>

Step 2: add javascript / ajax

 <script> var com = {}; com.demo = {}; com.demo.loading = false; com.demo.loadingBox = null; com.demo.loadingStage = 1; com.demo.updateImage = function() { $('#preview').prop('src', $('#image').val()); com.demo.updateTint(); } com.demo.updateTint = function() { $('#color').css( { 'width': $('#preview').outerWidth() + 'px', 'height': $('#preview').outerHeight() + 'px', 'background-color': $('#tint').val(), 'z-index' : 10, 'position': 'absolute', 'left': $('#preview').position().left, 'top' : $('#preview').position().top, 'opacity' : 0.4 }); } com.demo.doLoading = function() { if (com.demo.loading) { if (com.demo.loadingBox == null) { com.demo.loadingBox = $('<div id="loading">Loading</div>').appendTo('body').css({ "position" : "absolute", "width" : "100px", "left" : "50px", "top" : "50px", "border" : "5px solid #000000", "padding" : "10px", "z-index" : "20", "background-color" : "#FFFFFF" }); } else com.demo.loadingBox.css({ 'display' : 'block' }); com.demo.loadingStage = ++com.demo.loadingStage % 3; var string = "Loading"; for (var x = 0; x < com.demo.loadingStage; x++) { string += "."; } com.demo.loadingBox.text(string); setTimeout(function() { com.demo.doLoading(); }, 1000); } else { com.demo.loadingBox.css({ 'display' : 'none' }); } } com.demo.downloadImage = function() { var data = {}; data.img = $('#image').val(); data.tint = $('#tint').val(); // Show loading box. com.demo.loading = true; com.demo.doLoading(); $.post("convert.php", data) .done(function(d) { com.demo.loading = false; document.location.href = d; }); } </script>

Step 3. Create a PHP page that processes the file.

 <?php function hex2rgb($hex) { $hex = str_replace("#", "", $hex); if(strlen($hex) == 3) { $r = hexdec(substr($hex,0,1).substr($hex,0,1)); $g = hexdec(substr($hex,1,1).substr($hex,1,1)); $b = hexdec(substr($hex,2,1).substr($hex,2,1)); } else { $r = hexdec(substr($hex,0,2)); $g = hexdec(substr($hex,2,2)); $b = hexdec(substr($hex,4,2)); } $rgb = array($r, $g, $b); //return implode(",", $rgb); // returns the rgb values separated by commas return $rgb; // returns an array with the rgb values } if (isset($_POST['img'])) { $im = imagecreatefromjpeg($_POST['img']); $color = (empty($_POST['tint'])) ? hex2rgb("#000000") : hex2rgb($_POST['tint']); if (imagefilter($im, IMG_FILTER_COLORIZE, $color[0], $color[1], $color[2])) { header('Content-Description: File Transfer'); header("Content-type: application/octet-stream"); header("Content-disposition: attachment; filename=download.jpg"); imagejpeg($im, "download.jpg"); echo "download.php"; } }

Step 4: Create a Download Page.

 <?php header('Content-Description: File Transfer'); header("Content-type: application/octet-stream"); header("Content-disposition: attachment; filename=download.jpg"); readfile("download.jpg");
+2
source

More articles:


All Articles