2

srcURLが異なる2つのhtmlimgオブジェクトがあります。これらの2つの画像を（キャンバスを使用して）結合し、1つのマージされたimgオブジェクトを作成したいと思います。ユーザーが自分の場所から画像を選択できるようにしたいのですが、2番目の画像はロゴになり、ユーザーはロゴの場所を変更できます。投稿ボタンをクリックすると、1つの画像オブジェクトが生成され、データベースに保存できます。このjavascriptオブジェクトタイプの不一致を書き込んでいるときに1つのエラーが発生しますが、どこに問題があるのか​​わかりません...

 <!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

問題は、img1とimg2が内部でローカルに再宣言されdrawImages()ているため、スコープ内の変数img1とimg2変数が未定義のグローバルスコープをmain()指していることです。同じことがとにも当てはまりますが、これらは内部でのみ使用されるため、問題は発生しません。img1img2canvasctxmain()

要するに、あなたは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");
        // ...
    }

ただし、コードをより徹底的に書き直して、変数のスコープを適切に設定することをお勧めします。最初に2つの画像をロードしてから、それらをキャンバスにレンダリングします。これらは2つの明確な問題であり、それらを処理するコードを分離することをお勧めします。

于 2012-08-29T14:20:59.757 に答える