Javascript 如何在单击链接时将图像加载到画布
我与img src有多个链接。我想在单击每个链接时将每个图像加载到Javascript 如何在单击链接时将图像加载到画布,javascript,jquery,html,canvas,Javascript,Jquery,Html,Canvas,我与img src有多个链接。我想在单击每个链接时将每个图像加载到画布中。但这不是工作。以下是脚本: JS var startX = 0, startY = 0; $('.imgLink').click(function(){ draw($('href')); }); function draw(image){ image = image.get(0); var ctx = document.getElementById('myCanvas').getCont
画布中。但这不是工作。以下是脚本:
JS
var startX = 0,
startY = 0;
$('.imgLink').click(function(){
draw($('href'));
});
function draw(image){
image = image.get(0);
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.drawImage(image,startX,startY,20,20);
startY+=20;
}
HTML
<canvas id="myCanvas"></canvas>
<hr />
<a href="http://www.avatarsdb.com/avatars/blue_eyed_tiger.jpg" class="imgLink">1</a>
<a href="www.tiger-explorer.com/avatars/Tiger%20Theme/tiger006.jpg" class="imgLink">2</a>
<a href="http://www.tiger-explorer.com/avatars_uploaded/avatar_522_1369588658.gif" class="imgLink">3</a>
<a href="www.avatarsdb.com/avatars/angry_tiger.gif" class="imgLink">4</a>
<a href="http://www.teesnthings.com/ProductImages/animal/wildlife-t-shirts/tiger-t-shirts/striking-tiger-t-shirt.jpg" class="imgLink">5</a>
这里有三个问题:
确保所有链接的href中都正确包含“http://”
确保选择器是适当的
您必须将图像加载到javascript对象中才能动态使用它
您必须阻止链接的默认方法,否则,它只会打开指向图像的链接
要更正#2,请更改您的行:
draw($('href')代码>
进入:
draw($(this.attr('href'))代码>
这将根据单击的特定链接正确选择要绘制到画布的href
属性
要更正#3,可以添加以下更改:
var startX = 0,
startY = 0;
$('.imgLink').click(function(e){
e.preventDefault();
draw($(this).attr('href'));
});
function draw(image){
var newImg = new Image;
newImg.onload = function() {
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.drawImage(newImg,startX,startY,20,20);
startY+=20;
}
newImg.src = image;
}
您缺少的是,您需要创建一个图像元素并在画布中绘制它,可以像这样完成:
var startX = 0,
startY = 0;
$('.imgLink').click(function(e){
e.preventDefault();
draw(e.target.href);
});
function draw(src){
var ctx = document.getElementById('myCanvas').getContext('2d');
var img = document.createElement('img');
img.onload = function(){
ctx.drawImage(img,startX,startY,20,20);
startY+=20;
}
img.src = src;
}
首先,$('href')
选择器是错误的。它现在可以工作了,但是我可以问一个问题,为什么单击下一个链接时图像会堆积起来@Wilf,因为您已设置startY+=20
。因此,每次点击链接时,每个新图像的Y坐标都会增加20是的,我删除了startY,它就可以工作了!我还根据图像大小将画布的尺寸更改为100x100。但为什么图像会缩小???您正在使用css调整画布的大小,使其具有本机高度/宽度。而是将height=“100”width=“100”
添加到
标记中