画布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])该数组(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)]

有什么帮助吗？

Answer 1

正如Ravi Jain （ Ravi Jain所说，您无法将图像绘制到画布对象上，而正如robertc说，您可以使用img元素。

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

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之类的为您保留对象的东西。