通过Jquery将图像添加到canvas

我正在尝试将图像添加到Canvas元素。 canvas标记:

 $value):?> <div class="design" id="" data-design="">  

使用Javascript:

  $(document).ready(function() { $('.design').each(function() { var design = $(this).attr('data-design'); var id = $(this).attr('id'); }); });  

我希望图像显示在canvas元素中。 var design包含url。 任何人都可以帮我吗?

尝试

 $(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; }); }); 
  

name

asset

您必须使用canvas.drawImage方法通过javascript将每个图像绘制到其关联的canvas。

示例代码如下:

 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); }; 

$.ready回调中使用类似的东西

…或纯粹的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;}