2
JavaScript 프로젝트 (jquery 사용)가 있습니다. 그 안에는 코드로 캔버스를 그린 다음 이미지 배열을 삽입합니다. 그것은 오류없이 잘 나타냅니다.캔버스 html 태그
문제 :
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]) 얻고,이 창에서 캔버스 코드를 작성 후, 새 창을 열고 다음 호출 이미지를 그릴 :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
내 함수는 타이머가 5 초마다 작동합니다. 매 5 초 후 화면 메서드 호출을 통해 데이터를 다시 가져오고 화면이 열려 있는지 확인한 다음 내부 HTML을 모두 제거하여 새 캔버스를 다시 작성하고 크기가 변경되는지 테스트합니다.
이 코드는 아무런 오류없이 잘 동작하지만 캔버스 내부의 이미지를 가져 와서 동일한 이미지 ID를 가지고 있는지 테스트해야합니다. 다시 다운로드하지 마십시오. (이미지 ID를 저장하지 않습니다. img.id에 이미지를 저장하거나 imageId가 고유하게 만드는 이미지 경로의 일부이므로 src로 이미지를 가져올 수 있습니다.
참고 :
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)]
어떤 도움?
내가 아는 한 캔버스 객체에 그려진 이미지를 얻을 수 없다는 것을 안다. 당신이 할 수있는 일은 이미지의 ID를 포함하는 배열을 만들고 새로 다운로드 한 이미지의 ID와 비교하는 것이다. –
만약 내가 16 이미지, 그리고 당신이 언급 한 ID를 비교, 그 10 ID가 다르다는 것을 발견, 어떻게 캔버스의 참조에 의해 그 10 이미지를 대체 할 수 있습니다 –
캔버스 대신 HTML에서 이미지를 나타내는 다른 방법은 무엇입니까? –