将图像添加到画布上通过jquery

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

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

我想要的图像到画布元素内显示。 var设计包含网址。任何人都可以帮我吗？

来源

2015-04-15 pr0b

什么'$值['url']'设置在'data-design'？，一个'url'到一个图像文件？ – guest271314

是的。 ''design'元素'data-design'属性中预计会设置什么_value_，可以描述_“所需的信息”_？ – guest271314

所以是的，它需要来自XML文档的图像的URL。 – pr0b

尝试

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

来源

2015-04-15 18:21:38 guest271314

这工作实际上很好，谢谢:) – pr0b

@ pr0b欢迎:) – guest271314

你将不得不通过JavaScript使用canvas.drawImage方法每个图像绘制到其相关的画布。

示例代码如下：

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

来源

2015-04-15 18:22:08

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

来源

2015-04-15 18:23:18 markE

将图像添加到画布上通过jquery

回答

相关问题