CODEWITHSUNDEEP
javascriptjquerycanvas
pr0b
pr0b

Reputation: 377

Add Image to canvas through Jquery

I'm trying to add an image to an Canvas element. Canvas markup:

<?php foreach($fdsArray as $key => $value):?>
   <div class="design" id="<?php echo $key;?>" data-design="<?php echo $value['url'];?>">
      <canvas width="200" height="200"></canvas>
      <p class="name"><?php echo $value['name'];?></p>
      <p class="asset"><?php echo $value['asset'];?></p>
   </div>
<?php endforeach;?>

Javascript:

<script type="text/javascript">
    $(document).ready(function() {
       $('.design').each(function() {
            var design = $(this).attr('data-design');
            var id = $(this).attr('id');
       });
    });
</script>

I want the image to show inside the canvas element. var design contains the url. Could anyone help me out?

Upvotes: 6

Views: 17508

Answers (3)

markE
markE

Reputation: 105035

...or in pure javascript:

// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;


// a reference to #theURL
var theDiv = document.getElementById("theURL");

// the url from theDiv's data-design
var theURL = theDiv.getAttribute("data-design");

// new up an image
var img=new Image();

// when its fully loaded, call start()
img.onload=start;

// set the source of the new image to the url from data-design
img.src=theURL;

function start(){
  // draw the new image to the canvas
  ctx.drawImage(img,0,0);
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<div class="design" id=theURL data-design="https://dl.dropboxusercontent.com/u/139992952/multple/sun.png">
  <canvas id="canvas" width=300 height=300></canvas>

Upvotes: 0

Nikos M.
Nikos M.

Reputation: 8355

You will have to draw each image to its associated canvas through javascript using the canvas.drawImage method.

sample code follows:

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "get image source from data- attribute";
image.onload = function() {
    ctx.drawImage(image, 0, 0);
};

Use sth similar inside $.ready callback

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try

$(document).ready(function() {
  $('.design').each(function() {
    var design = $(this).attr('data-design');
    var id = $(this).attr('id');
    var canvas = $(this).find("canvas")[0];
    var ctx = canvas.getContext("2d");
    var img = new Image;
    img.onload = function() {
      ctx.drawImage(this, 0, 0);
    };
    img.src = design;
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="design" id="image" data-design="http://lorempixel.com/technics/200/200/">
  <canvas width="200" height="200"></canvas>
  <p class="name">name</p>
  <p class="asset">asset</p>
</div>

Upvotes: 5

Related Questions