通过Jquery将图像添加到canvas
我正在尝试将图像添加到Canvas元素。 canvas标记:
$value):?> <div class="design" id="" data-design="">
我正在尝试将图像添加到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;}