2

我有两个具有不同 src url 的 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>
4

1 回答 1

0

问题是img1andimg2是在内部本地重新声明drawImages()的，因此作用域内的img1andimg2变量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);
    }

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

    var img1, img2;
    var imagesLoaded = 0;

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

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

于 2012-08-29T14:20:59.757 回答