2

我有一个 JavaScript 项目（使用 jquery），在其中我通过代码绘制画布，然后在其上插入图像数组。它代表没有任何错误。

问题： later on, i try to get these images inside from canvas to compare if they have the same src or the same id to don't replace it with the new image

我的职能是： 

var inter;
var screen;

function onClick(id){
    getScreen(id, function(data){
        screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
        if (screen.document.getElementById("screen") != null ){    
            screen.document.getElementById("screen").innerHTML = "";
        }
        screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
                              data.maxX + ' height=' + data.maxY + 
                              ' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
        draw(data);
        inter = setInterval(function(){screen(id); }, 5000);
    });
}

function screen(id){
    getScreen(id, function(data){
        if (screen.closed == true){
            clearInterval(inter);
            return;
        }
        if((screen.document.getElementById('screenCanvas').width != data.maxX) ||
            (data.maxY != screen.document.getElementById('screenCanvas').height)){
            screen.close();
            screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);        
        screen=window.open('',id,'width=' + data.maxX + ',height=' + data.maxY , true);
        if (screen.document.getElementById("screen") != null ){    
            screen.document.getElementById("screen").innerHTML = "";
        }
        screen.document.write('<div id="screen"><canvas id="screenCanvas" width=' +
                              data.maxX + ' height=' + data.maxY + 
                              ' style="border:2px solid #000000;color:#000000;" ></canvas></div>');
        draw(data);
    });
}

function draw(data) {  
    var canvas = screen.document.getElementById('screenCanvas');
    var context = canvas.getContext('2d');  
    var tileY = 0;
    var tileX = 0;
    var counter = 0;
    var tileWidth = data.tileWidth;
    var tileHeight = data.tileHeight;
    for (var i=0;i<(data.maxX/data.tileWidth);i++){  
        for (var j=0;j<(data.maxY/data.tileHeight);j++){  
            var img = new Image();  
            img.onload = (function(img, tileX, tileY, tileWidth, tileHeight){
                return function() {
                    context.drawImage(img,tileX, tileY, tileWidth, tileHeight);
                }
            })(img, tileX, tileY, tileWidth, tileHeight);  
            img.src = "http://myserver:8080/images/screen/tile/" + 
                       data.tiles[counter].imageId; 
            tileX = tileX + parseInt(data.tileWidth); 
            counter ++; 
         } 
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0;
    }  
}

</script>

此代码获取一个数组(data) that contains list of (id, maxX, maxY, tileWidth, tileHeight, tiles[x, y, imageId])并打开新窗口，然后在此窗口中写入画布代码并绘制图像，然后每 5 秒调用一个计时器。每 5 秒后，screen 方法调用以再次重新获取数据并检查屏幕是否打开，然后删除所有内部 html 以重写新画布，并测试大小是否发生变化。

此代码工作正常，没有任何错误，但我需要编辑这些代码以获取画布内的图像并对其进行测试，它们具有相同的 imageId，不要再次下载它。（我不保存图像 ID，以获取图像，我们可以将它存储在 img.id 中，或者通过 src 获取图像，因为 imageId 是图像路径的一部分，使其具有唯一性）。

笔记：

id[unique](is the id of the user), 
maxX(maximum width of the screen), 
maxY(maximum height of the screen), 
tileWidth(width of each image), 
tileHeight(height of each image),
tiles(list of images)
    x(left position of the image)
    y(top postion of the image) 
    imageId[unique](id of each image)
example: data[id:1,maxX:1920,maxY:1080,tileWidth:480,tileHeight:270,tiles:(x:2,y:1,imageId:1a)]

有什么帮助吗？

4

2 回答 2

1

如前所述Ravi Jain，您无法将图像绘制到画布对象上，并且如前所述，robertc您可以使用 img 元素。

尝试这些指定使用 img 元素而不是画布的函数： 

function onClick(id){
    getScreen(id, function(data){
        var inter;
        var screen;
        var width = parseInt(data.maxX) + parseInt(data.tileWidth);
        var height = parseInt(data.maxY) + parseInt(data.tileHeight);
        screen=window.open('',id,'width=' + width + ',height=' + height , true);
        draw(screen, data);
        inter = setInterval(function(){screen(screen, inter, id); }, 5000);
    });
}

function screen(screen, inter, id){
    getScreen(id, function(data){
        if (screen.closed == true){
            clearInterval(inter);
            return;
        }
        if((screen.document.getElementById("screen").style.width != data.maxX + "px") ||
           (screen.document.getElementById("screen").style.height != data.maxY + "px")){
            screen.close();
            var width = parseInt(data.maxX) + parseInt(data.tileWidth);
            var height = parseInt(data.maxY) + parseInt(data.tileHeight);
            screen=window.open('',id,'width=' + width + ',height=' + height , true);
        }
        draw(screen, data);
    });
}

function draw(screen, data) {
    var screenDiv = screen.document.getElementById("screen");
    if (screenDiv == null) screen.document.write('<div id="screen" style="width:' +
                data.maxX + '; height:' + data.maxY + '; " style="margin: 0 auto;" >');
    var tileY = 0; 
    var tileX = 0;
    var counter = 0;
    for (var i=0;i<(data.maxX/data.tileWidth);i++){ 
        for (var j=0;j<(data.maxY/data.tileHeight);j++){  
            var imageSource = screen.document.getElementById("id_" + counter);
            var path = "http://myserver:8080/images/screen/tile/" + 
                       data.tiles[counter].imageId; 
            if (imageSource == null){
                screen.document.write('<img id="id_' + counter + '" src="' + path +
                '" height="' + data.tileHeight + '" width="' + data.tileWidth + '" />');
            }else if(imageSource.src != path){
                imageSource.src = path;
            }
            tileX = tileX + parseInt(data.tileWidth); 
            counter ++; 
        }
        tileY = tileY + parseInt(data.tileHeight); 
        tileX = 0;
    }
    if (screenDiv == null) screen.document.write('</div>');
}

</script>

您的代码工作正常，这是真的，但仅在一个实例中，您在脚本顶部声明 var screen 和 var inter 而不是在函数中，这意味着如果您单击第一个用户以获取它的屏幕（就像我了解您的代码，您的项目做了什么），第一个用户的计时器停止，第二个用户的计时器开始。我写的这段代码解决了这个问题，如果图像发生变化，你的问题是替换图像的源。

希望这对你有帮助

祝你好运;

于 2012-06-15T07:21:28.403 回答
0

一旦你在canvas它的像素上画了一些东西。它不保留用于创建这些像素的对象。如果您想要此类信息，那么您要么需要自己在外部维护它canvas，要么使用为您保留对象的东西，例如 SVG。

于 2012-06-14T12:23:02.920 回答