javascript 通过 Jquery 将图像添加到画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29657681/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Image to canvas through Jquery
提问by pr0b
I'm trying to add an image to an Canvas element. Canvas markup:
我正在尝试将图像添加到 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:
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?
我希望图像显示在画布元素内。var 设计包含 url。有人可以帮我吗？
采纳答案by guest271314
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>回答by Nikos M.
You will have to draw each image to its associated canvas through javascript using the canvas.drawImagemethod.
您必须使用canvas.drawImage方法通过 javascript 将每个图像绘制到其关联的画布上。
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 $.readycallback
在$.ready回调中使用类似的东西
回答by markE
...or in pure javascript:
...或纯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>