Question

我有两个带有不同src网址的html img对象。我想组合这两个图像（使用画布），并创建一个合并的img对象。我想让用户从他的位置选择一个图像，第二个图像将是徽标，用户可以更改徽标的位置，当点击发布按钮时，会生成一个图像对象并能够保存在数据库中。我写这个javascript对象类型不匹配时收到一个错误我不知道问题在哪里...

 <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

    </head>
    <body>
    <form name="drawImage" id="drawImage">
    <input type="file" id="filename" name="filename" value="hello" />
    <canvas id="mycanvas" width="400" height="400"></canvas>
    <input type="button" id="mybtn" name="mybtn" value="hello" />
    </form>
    <script>
    $(function(){
        var canvas,ctx,img1,img2;
        var imagesLoaded = 0;
        function main() {
            imagesLoaded += 1;
            var canvas = document.getElementById("mycanvas");
            var ctx = canvas.getContext("2d");
            if(imagesLoaded == 2) {
                // composite now
                console.log(img1);
                ctx.drawImage(img1, 0, 0);
                //ctx.globalAlpha = 1;
                ctx.drawImage(img2, 0,100);
            }
        }
        function loadImage(src, onload) {
            // http://www.thefutureoftheweb.com/blog/image-onload-isnt-being-called
            var img = new Image();
            img.onload = onload;
            img.src = src;
            return img;
        }
        function drawImages(){
            var img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
            var img2 = loadImage('http://blog.carazoo.com/wp-content/uploads/2010/11/skoda_logo-300x300.jpg', main);
        }

        $("#mybtn").click(function(){
            //var getImageInput=$("#filename").val();
            //var img1 = loadImage(getImageInput, main);
            //var img2 = loadImage('play-button.png', main);
            drawImages();   
        });
    });
    </script>
    </body>

    </html>

Answer 1

问题是img1和img2在drawImages()内进行了本地重新声明，因此img1范围内的img2和main()变量指向全局范围中的未定义img1和img2。 canvas和ctx也是如此，尽管这不会引起任何问题，因为它们仅在main()内使用。

简而言之，您可以通过删除var内的drawImages()来“修复”此问题：

    function drawImages(){
        img1 = loadImage('http://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png', main);
        img2 = loadImage('http://blog.carazoo.com/wp-content/uploads/2010/11/skoda_logo-300x300.jpg', main);
    }

此外，您可以从全局范围中删除canvas和ctx，因为它们仅在main()内使用。

    var img1, img2;
    var imagesLoaded = 0;

    function main() {
        imagesLoaded += 1;
        var canvas = document.getElementById("mycanvas");
        var ctx = canvas.getContext("2d");
        // ...
    }

但是，您可能希望对代码进行更彻底的重写，并对变量进行适当的范围调整。您想先加载两个图像，然后在画布上渲染它们。这是两个截然不同的问题，最好将处理它们的代码分开。

我正在尝试编写一个实用程序来在画布上绘制两个图像，并希望保存为一个图像对象

1 个答案: