HTML5 캔버스 요소에 표시된 확대/축소 이미지 편집

Question

HTML5 캔버스를 사용하여 확대/축소 기능이있는 이미지를 표시하고 있습니다. 그것은 잘 작동합니다. 그러나, 나는 또한 이미지를 편집해야합니다. 예를 들어 마우스를 클릭 할 때 이미지의 특정 크기의 격자를 대체해야합니다 (크기는 동적이며 항상 고정되어있는 것은 아닙니다). 그래서 context.putImageData(imgData, x, y)을 사용하고 있습니다. 여기에서 imgData은 x, y 위치에서 대체 할 10 * 10의 눈금입니다 (예 :).

잘 작동합니다. 그러나 확대/축소하면 모든 이미지 편집이 사라집니다. 그 이유는 putImageData가 캔버스 요소의 메모리 이미지에서만 바꾸고 원본 이미지 소스를 업데이트하지 않는다고 생각합니다.

이 문제를 어떻게 극복 할 수 있을지 궁금하십니까? 나는 orignal 이미지를 편집 한 다음 context.putImageData()을 직접 사용하는 대신 drawImage()을 사용하여 그릴 것이라고 가정합니다.

하지만 어떻게해야합니까?

// @ 시작 // currentScale = 1.0

var photo = new Image(); 
photo.src = "./Ship1.png"; 
photo.addEventListener('load', eventPhotoLoaded, false); 
function drawImage() 
{ 

this.context.drawImage(photo, 0, 0, photo.width,photo.height, 0, 0, photo.width * currentScale, photo.height* currentScale); 
} 

//이 제대로 이미지를 표시

//

theCanvas.addEventListener('click', function(evt) { 
var rect = this.theCanvas.getBoundingClientRect(); 
x = evt.clientX - rect.left; 
y = evt.clientY - rect.top; 

//newGird is an array of cells containing R,G,B and Alpha values 
context.putImageData(newGird, x, y) 

가 // 위의 코드가 제대로 업데이트 클릭 Onmouse newGrid를 사용하여 x 지점의 캔바스 이미지, y 지금까지 멋져.

// 줌인/​​아웃 버튼이 있습니다. 그리고 버튼 클릭시 currentScale의 값을 변경하고 drawImage() 메서드를 호출합니다. 확대/축소가 제대로 수행되었지만 예상대로 putImageData()가 변경 한 내용은 이미지에 다시 저장되지 않았기 때문에 원래 이미지로 덮어 씁니다.

Answer 1

이 문제는 지금 해결되었습니다. 3 단계에서 drawImage를 다시 호출하는 대신 canvas.style.width 및 canvas.style.height를 변경하여 비율 조정을 수행 할 수 있습니다. 그래서, 그것은 잘 작동합니다. 감사합니다 philipp andsweater