如何在画布上的图像加载从JSON对象的图片？ [英] How to load images from json object on canvas image?

问题描述

需要绘制alphaball.png图像在画布上的图像不同的位置。 位置（X和Y坐标），需要从数据JSON对象传递。 与code提alphaball.png是不可见的。可以做些什么？

// JSON对象

 数据= [{
         ×：[200]，
         Y：200]

     }，{
         ×：[150]，
         Y：150]
     }，{
         ×：[300]，
         Y：300]
     }


 ]。


在window.onload =功能（）{
VAR帆布=的document.getElementById（myCanvas）;
VAR上下文= canvas.getContext（2D）;
VAR dataJSON =数据|| []
        var中的文件= [gkhead.jpg，marker.png]，
        图像= []，
        numOfFiles = files.length，
        数= numOfFiles;

        ///功能加载所有图像一气呵成
        功能loadImages（）{
            ///通过文件名称的数组
            对于（VAR I = 0; I＆LT; numOfFiles;我++）{
                ///创建一个图像元素
                VAR IMG = document.createElement方法（'IMG'）;
                ///使用普通装载机，因为我们需要计算文件
                img.onload = imageLoaded;
                执行console.log（imageLoaded）;
                //img.onerror = ...处理错误
                img.src =文件[I]
                //console.log(img.src）;
                ///推图像投影到阵列中的顺序相同的文件名
                images.push（IMG）;
                //console.log(images）;
            }
        }
        loadImages（）;
        功能imageLoaded（五）{
            ///每一个成功的负荷，我们倒计时
            计数 - ;
            如果（计数=== 0）
            开始（）; //启动没事的时候多到数不清
        }
        函数的start（）{
        context.drawImage（图像[0]，0，0，400 * scaleValue，400 * scaleValue）;
           对于（VAR I = 0，POS机，POS = dataJSON [我];我++）{
               ///我们知道阿尔法球有指数1我们使用这里的图像
               context.drawImage（图像[1]，pos.x，pos.y，40 / scaleValue，40 / scaleValue）;
           }
        }

功能DRAW1（scaleValue，dataJSON）{
        loadImages（）;

        context.save（）;
        context.setTransform（1,0,0,1,0,0）
        context.globalAlpha = 0.5;
        context.clearRect（0，0，canvas.width，canvas.height）;
        context.restore（）;
        context.save（）;
        context.drawImage（图像[0]，0，0，400 * scaleValue，400 * scaleValue）;

        context.scale（scaleValue，scaleValue）;
        开始（）;

        context.restore（）;
    };
    DRAW1（scaleValue，dataJSON）;

        变种scaleValue = 1;
        VAR scaleMultiplier = 0.8;
        变种startDragOffset = {};
        VAR MOUSEDOWN = FALSE;
        //添加按钮事件监听器
        的document.getElementById（加）。的addEventListener（点击，函数（）{
            scaleValue / = scaleMultiplier;
            DRAW1（scaleValue，dataJSON）;
        }， 假）;
         的document.getElementById（减）。的addEventListener（点击，函数（）{
            scaleValue * = scaleMultiplier;
            DRAW1（scaleValue，dataJSON）;
        }， 假）;
        的document.getElementById（original_size）。的addEventListener（点击，函数（）{
            scaleValue = 1;
            DRAW1（scaleValue，dataJSON）;
        }， 假）;
 

解决方案

我不知道你为什么加载阿尔法球几次，但你可以收集文件加载到一个共同的地方：

  ///设置一些变量包含图像和计数
var中的文件= [gkhead.jpg，alphaball.png]，
    图像= []，
    numOfFiles = files.length，
    数= numOfFiles;

///功能加载所有图像一气呵成
功能loadImages（）{

    ///通过文件名称的数组
    对于（VAR I = 0; I＆LT; numOfFiles;我++）{

        ///创建一个图像元素
        VAR IMG = document.createElement方法（'IMG'）;

        ///使用普通装载机，因为我们需要计算文件
        img.onload = imageLoaded;
        //img.onerror = ...处理错误
        img.src =文件[I]

        ///推图像投影到阵列中的顺序相同的文件名
        images.push（IMG）;
    }
}
功能imageLoaded（五）{

    ///每一个成功的负荷，我们倒计时
    计数 - ;
    如果（计数=== 0）启动（）; //启动没事的时候多到数不清
}
 

现在可以得出球：

 函数start（）{
   对于（VAR I = 0，POS机，POS = dataJSON [我];我++）{
       ///我们知道阿尔法球有指数1我们使用这里的图像
       context.drawImage（图像[1]，pos.x，pos.y，40 / scaleValue，40 / scaleValue）;
   }
}
 

Need to plot alphaball.png image on different positions on canvas image. Positions (x and y co-ordinates) need to pass from data json object. with the code mention alphaball.png is not visible. what can be done?

//JSON object

data = [{
         "x": ["200"],
         "y": ["200"]

     }, {
         "x": ["150"],
         "y": ["150"]
     }, {
         "x": ["300"],
         "y": ["300"]
     }


 ];


window.onload = function(){ 
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var dataJSON = data || []
        var files = ["gkhead.jpg", "marker.png"],
        images = [],
        numOfFiles = files.length,
        count = numOfFiles;

        /// function to load all images in one go
        function loadImages() {
            /// go through array of file names
            for(var i = 0; i < numOfFiles; i++) {
                /// create an image element
                var img = document.createElement('img');
                /// use common loader as we need to count files
                img.onload = imageLoaded;
                console.log(imageLoaded);
                //img.onerror = ... handle errors
                img.src = files[i];
                //console.log(img.src);
                /// push image onto array in the same order as file names
                images.push(img);
                //console.log(images);
            }
        }
        loadImages();
        function imageLoaded(e) {
            /// for each successful load we count down
            count--;
            if (count === 0) 
            start(); //start when nothing more to count
        }
        function start() {
        context.drawImage(images[0], 0, 0, 400*scaleValue, 400*scaleValue); 
           for(var i = 0, pos; pos = dataJSON[i]; i++) {
               /// as we know the alpha ball has index 1 we use that here for images
               context.drawImage(images[1], pos.x, pos.y, 40/scaleValue, 40/scaleValue);
           }
        }

function draw1(scaleValue, dataJSON){
        loadImages();

        context.save();     
        context.setTransform(1,0,0,1,0,0)   
        context.globalAlpha = 0.5;                      
        context.clearRect(0, 0, canvas.width, canvas.height);   
        context.restore();          
        context.save(); 
        context.drawImage(images[0], 0, 0, 400*scaleValue, 400*scaleValue); 

        context.scale(scaleValue, scaleValue);
        start();

        context.restore();
    }; 
    draw1(scaleValue, dataJSON);

        var scaleValue = 1;
        var scaleMultiplier = 0.8;
        var startDragOffset = {};
        var mouseDown = false;          
        // add button event listeners
        document.getElementById("plus").addEventListener("click", function(){           
            scaleValue /= scaleMultiplier;              
            draw1(scaleValue, dataJSON);            
        }, false);
         document.getElementById("minus").addEventListener("click", function(){
            scaleValue *= scaleMultiplier;
            draw1(scaleValue, dataJSON);    
        }, false);
        document.getElementById("original_size").addEventListener("click", function(){
            scaleValue = 1;
            draw1(scaleValue, dataJSON);
        }, false);

解决方案

I am not sure why you load the alpha ball several times, but you can collect the file loading into a common place:

/// set up some variables to contain images and count
var files = ["gkhead.jpg", "alphaball.png"],
    images = [],
    numOfFiles = files.length,
    count = numOfFiles;

/// function to load all images in one go
function loadImages() {

    /// go through array of file names
    for(var i = 0; i < numOfFiles; i++) {

        /// create an image element
        var img = document.createElement('img');

        /// use common loader as we need to count files
        img.onload = imageLoaded;
        //img.onerror = ... handle errors
        img.src = files[i];

        /// push image onto array in the same order as file names
        images.push(img);
    }
}
function imageLoaded(e) {

    /// for each successful load we count down
    count--;
    if (count === 0) start(); //start when nothing more to count
}

Now you can draw the balls:

function start() {
   for(var i = 0, pos; pos = dataJSON[i]; i++) {
       /// as we know the alpha ball has index 1 we use that here for images
       context.drawImage(images[1], pos.x, pos.y, 40/scaleValue, 40/scaleValue);
   }
}

这篇关于如何在画布上的图像加载从JSON对象的图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！