StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You can't stop the loading of images, however it is possible to cancel an ordinary AJAX request (<a href="https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery">see this solution on SO</a>). Usually images aren't loaded via AJAX for good reasons, but you can work around this by sending the image as a base64 encoded string. So you let PHP read the image and convert it to base64. This string can be sent to JS via AJAX and "directly" drawn to your canvas (<a href="https://stackoverflow.com/questions/4773966/drawing-an-image-from-a-data-url-to-a-canvas">solution on SO</a>).</p> <p>I really don't know if this is the best way to do this... Anyways, see if this works for you:</p> <p><strong>HTML:</strong></p> <pre><code><canvas id="background" width="800" height="600"></canvas> </code></pre> <p><br> <strong>JavaScript:</strong> (using jQuery)</p> <pre><code>function drawBackgroundImage(src) { var image = $("<img/>").load(function(){ $("canvas#background")[0].getContext("2d").drawImage(image[0], 0, 0); }).attr("src", src); } function loadImage(highres, lowres) { var t; var xhr = $.ajax({ type: "POST", url: "load_image.php", data: "image=" + highres, success: function(imgbinary){ if (imgbinary != "") { clearTimeout(t); drawBackgroundImage(imgbinary); } } }); t = setTimeout(function(){ xhr.abort(); drawBackgroundImage(lowres); }, 5000); } loadImage("path/to/highres.png", "path/to/low_res.png"); </code></pre> <p><br> <strong>PHP:</strong> (load_image.php)</p> <p>(This uses part of a <a href="http://www.php.net/manual/de/function.base64-encode.php#107705" rel="nofollow noreferrer">function from the PHP manual</a>.)</p> <pre><code><?php $result = ""; @ob_start(); if (isset($_POST["image"])) { $filename = $_POST["image"]; if (file_exists($filename)) { $filetype = pathinfo($filename, PATHINFO_EXTENSION); $imgbinary = fread(fopen($filename, "r"), filesize($filename)); $result = "data:image/".$filetype.";base64,".base64_encode($imgbinary); } } @ob_end_clean(); echo $result; ?> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload