Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is an alternative version.</p> <p><a href="http://jsfiddle.net/linkabi9/jy54Q/" rel="nofollow">http://jsfiddle.net/linkabi9/jy54Q/</a></p> <p>HTML: </p> <pre><code>&lt;textarea id="textid"&gt; blah blah blah &lt;/textarea&gt; &lt;a id="prev" href="#previous"&gt;Previous&lt;/a&gt; &lt;a id="next" href="#next"&gt;Next&lt;/a&gt; &lt;canvas id="ca1" width="640" height="480"&gt;&lt;/canvas&gt; </code></pre> <p>JAVASCRIPT:</p> <pre><code>$(function() { var $textarea = $("#textid"), $canvas = $("#ca1"); var ctx = $canvas[0].getContext("2d"); var textareahtml = $textarea.val(); var imgsrcarray = []; $(textareahtml).find("img").each(function(i, o) { imgsrcarray.push(this.src); }); var counter = 0; $("#prev").click(function() { if (counter != 0) { loadImg(--counter); } else { alert("Beginning"); } return false; }); $("#next").click(function() { if (counter != imgsrcarray.length - 1) { loadImg(++counter); } else { alert("End"); } return false; }); var loadImg = function(i) { $.getImageData({ url: imgsrcarray[i], success: function(img) { $canvas.attr("width", img.width).attr("height", img.height); ctx.drawImage(img, 0, 0, img.width, img.height); }, error: function(xhr, text_status) {} }); }; loadImg(counter); return; }); </code></pre> <p>I took out the nested <code>ready</code> method. It's not necessary. I switched out how you parse the textarea for image urls. I added some links because your method seemed to be built to dump every image onto one canvas. That wouldn't be very useful. I moved the <code>getImageData</code> call into a method so it's reusable.</p>
    singulars
    1. This table or related slice is empty.
    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. VO
      singulars
      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