Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <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>&lt;canvas id="background" width="800" height="600"&gt;&lt;/canvas&gt; </code></pre> <p><br> <strong>JavaScript:</strong> (using jQuery)</p> <pre><code>function drawBackgroundImage(src) { var image = $("&lt;img/&gt;").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>&lt;?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; ?&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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