HTML5 canvas使用JCanvasScript加载图像

Question

大家好，我想用JCanvasScript在html5 canvas中加载多个图像，但是我做不到。 我想在每行中并排加载图像。 为此，我有函数loadx（numX，numY）numX-是一行中的图像数，而numY是行数。 例如loadX（5,4）或loadX（10,3）仅给我1张图像。

这是一个代码

    <script>
        function init(){
            loadx(5, 4);
        }

        function loadx(numX, numY){
            var numTotal = numX * numY;
            var imgBMPs = [];
            var sliceImg = new Image();
            sliceImg.src = "abstract.jpg";
            var sliceBmp;
            var imgBmp = [];
            imgBmp['width'] = sliceImg.width / numX;
            imgBmp['height'] = sliceImg.height / numY;
            imgBmp['row'] = 0;
            imgBmp['y'] = 0;

            sliceImg.onload = function(){
                for (i = 0; i < numY; i++){
                imgBmp['y'] = i * imgBmp['height'];
                    for (a = 0; a < numX; a++){
                        jc.start('canvas');
                        imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                        imgBMPs.push(imgBmp);
                        jc.start('canvas');
                    }

                }
            }
        }
    </script>

当我尝试调试代码时，我发现了一些东西：

在这之后

              sliceImg.onload = function(){
                    for (i = 0; i < numY; i++){
                    imgBmp['y'] = i * imgBmp['height'];

我添加了代码

alert (imgBmp['height']);

当我刷新页面时，第一个结果是数字，而其他结果是“未定义”，那么怎么了？

Answer 1

在你内心的for循环你重新分配变量imgBmp到的实例js.image 。 这意味着在循环第二次迭代时，原始对象的属性已丢失。

尝试如下更新代码：

<script>
    function init(){
        loadx(5, 4);
    }

    function loadx(numX, numY){
        var numTotal = numX * numY;
        var imgBMPs = [];
        var sliceImg = new Image();
        sliceImg.src = "abstract.jpg";
        var sliceBmp;


        /*
           // imgBmp is being used as an object not an array 
           // so the following syntax is usually preferred
           var imgBmp = {
               width: sliceImg.width / numx,
               height: sliceImg.height / numy
           }

           // and to retrieve a property:
           console.log(imgBmp.width);
        */

        var imgBmp = [];
        imgBmp['width'] = sliceImg.width / numX;
        imgBmp['height'] = sliceImg.height / numY;
        imgBmp['row'] = 0;
        imgBmp['y'] = 0;

        sliceImg.onload = function(){
            for (i = 0; i < numY; i++){
            imgBmp['y'] = i * imgBmp['height'];
                for (a = 0; a < numX; a++){
                    jc.start('canvas');
                    // create a new variable to hold the instance of jc.image
                    // so the original object reference is preserved 
                    var jcImage = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    imgBMPs.push(jcImage);                        
                    //imgBmp = new jc.image(sliceImg, a * imgBmp['width'], imgBmp['y'], imgBmp['width'], imgBmp['height']);
                    //imgBMPs.push(imgBmp);
                    jc.start('canvas');
                }

            }
        }
    }
</script>