使用 JCanvasScript 加载图像的 Html5 画布答案

【问题标题】：Html5 canvas loading images with JCanvasScript使用 JCanvasScript 加载图像的 Html5 画布
【发布时间】：2012-08-19 20:56:17
【问题描述】：

大家好，我想在 html5 画布中使用 JCanvasScript 加载多个图像，但我做不到。我想在每一行中并排加载图像。为此，我有函数 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']);

当我刷新页面时，第一个结果是数字，但其他结果是“未定义”，所以出了什么问题？

【问题讨论】：

您进行的任何调试的结果如何？
@Hidde 我更新了我的帖子。请看。

标签： javascript image html canvas load

【解决方案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>

【讨论】：