Question

我正在尝试将图像添加到Canvas元素。画布标记：

<?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>

我希望图片显示在canvas元素中。 var design包含url。谁能帮助我？

Answer 1

尝试

$(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>

Answer 2

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

示例代码如下：

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回调

中使用类似的内容

Answer 3

...或纯粹的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>

通过Jquery将图像添加到画布

3 个答案: