画布 HTML 标记

Question

我有一个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 秒后，屏幕方法调用以再次重新获取数据并检查屏幕是否打开，然后删除所有内部 HTML 以重写新画布， 并测试大小是否发生变化。

这段代码工作正常，没有任何错误，但我需要编辑这些代码才能在 Canvas 中获取图像并测试它们具有相同的 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)]

有什么帮助吗？

Answer 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 不在函数中，这意味着如果您单击第一个用户以获取它的屏幕（正如我对你的代码的理解，你的项目做了什么），第一个用户的计时器停止和第二个用户启动。 我写的这段代码解决了这个问题以及您在图像源发生变化时替换图像源的问题。

希望这对你有所帮助，

祝你好运;

Answer 2

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