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

Question

我是html和javascript的新手。 我试图通过从图库调用图像来将图像添加到画布上。 我在脚本中使用了onclick方法，因此无法正常工作，因此我很挣扎。 我在下面添加了我的代码。 谢谢您的帮助！ 作业问...

实现imgOnClick（elmt）函数，以便将elmt给定的图像绘制到画布的drawImage（）方法上。 elmt将是一个标记对象。 画布的ID为imgresult。

在文档就绪功能中，让每个缩略图图像将其单击事件设置为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 个解决方案

解决方案1
0 2017-07-11 23:22:27

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

问题描述

1 个解决方案

解决方案1 0 2017-07-11 23:22:27

解决方案1
0 2017-07-11 23:22:27