javascript - 如何在链接单击时将图像加载到 Canvas 中

Question

我有多个与 img src 的链接。我想在单击每个链接时将每个图像加载到 Canvas 中。但这是行不通的。这是脚本:

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>

这里是JSFIDDLE

Answer 1

三个问题:

1. 确保所有链接的 href 中都正确包含“http://”
2. 确保选择器合适
3. 您必须将图像加载到 JavaScript 对象中才能动态使用它
4. 您必须阻止链接的默认方法，否则，它只会打开图像的链接

要更正#2，请更改您的行:

绘制($('href'));

进入:

draw($(this).attr('href'));

这将根据单击的特定链接正确选择您希望绘制到 Canvas 上的 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;


    }