Question

我是html和javascript的新手。我试图通过从图库中调用图像来点击画布时将图像添加到画布。我在我的脚本中使用onclick方法并且没有工作因此我正在努力。我在下面添加了我的代码。谢谢您的帮助！作业要求......

实现imgOnClick（elmt）函数，以便绘制（对画布＆＃39; drawImage（）方法）elmt给出的图像。 elmt将是一个标签对象。画布上有id imgresult。

在文档就绪功能中，让每个缩略图图像将其click事件设置为imgOnClick（）函数。我建议您在为剩余图像实现之前对一个图像进行测试。确保将图像缩放到可用的大小。

   <pre> <code><!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel=stylesheet type="text/css" href="memeory.css">
        <title>Meme-ory :: Javascript Meme Generator</title>
        <script type="application/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

        <script>
            $( document ).ready(function() {
           $('.thumbnail').click(imgOnClick('img'){ 

           });


       });


        function imgOnClick('img') {
        var canvas = document.getElementById("imgresult");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("closeenough");

        ctx.drawImage(img, 10, 10);

        };

            };

            function buttonOnClick() {

            };



        </script>
    </head>

    <body>
        <header>
            <h1>Meme-ory: Raging on in the Moonlight!</h1>
        </header>

        <main>


            <div id="controls">
                <form>
                    <label for="toptext">Top Text:</label>
                    <input id="toptext" type="text">

                    <label for="bottomtext">Bottom Text:</label>
                    <input id="bottomtext" type="text">

                    <input id="createMemeButton" type="button" value="Give me Meme!">
                </form>
            </div>

            <div id="imagegallery">
                <img class="thumbnail" id="closeenough" src="closeenough.png" alt="close enough">
                <img class="thumbnail" id="cutenessoverload" src="cutenessoverload.png" alt="cuteness overload">
                <img class="thumbnail" id="deskflip" src="deskflip.png" alt="deskflip">
                <img class="thumbnail" id="lol" src="lol.png" alt="LOL">
                <img class="thumbnail" id="trollface" src="trollface.png" alt="troll face">
            </div>

            <div id="memeresult">
                <canvas id="imgresult">
                </canvas>
            </div>
        </main>
    </body>
</html>

Answer 1

如果您尝试在页面中选择元素，则只能在创建元素时执行此操作。你不能在它存在之前选择它。在这种情况下，您尝试在页面的HEAD中选择画布和图像，但这些元素仅在您的身体中稍后定义。

有两个简单的修复方法：

您可以将脚本代码移动到页面末尾（就在</body>之前），或者将代码包含在$( document ).ready(function() {块中，如下所示：

$(document).ready(function() {

    window.onclick = function imgOnClick(e) {
        var canvas = document.getElementById("imgresult");
        var ctx = canvas.getContext("2d");
        var img = document.getElementById("closeenough");
        ctx.drawImage(img, 0, 0);
    };
});

两种方式都可以确保您在创建元素时尝试选择元素。

我无法将图像添加到缩略图库的画布中

1 个答案: