크기가 조정 된 캔버스 요소에 putImageData를 사용하여 이미지 데이터 업데이트

Question

drawImage을 사용하여 캔버스 요소에 드로잉 할 정적 이미지 (a png)가 있습니다.

I

var _canvas = null; 
var _context = null; 
var _curImageData; 

function copyImageToCanvas(aImg) 
{ 
    _canvas = document.getElementById("canvas"); 
    var w = aImg.naturalWidth; 
    var h = aImg.naturalHeight; 
    _canvas.width = w; 
    _canvas.height = h; 

    _context = _canvas.getContext("2d"); 
    _context.clearRect(0, 0, w, h); 
    _context.drawImage(aImg, 0, 0); 

    _curImageData = _context.getImageData(0, 0, w, h); 
} 

다음 화소에 의해 화상 데이터의 화소를 사용 putImageData 캔버스를 업데이트 한 후 및 (화소 값에 따라 0 또는 255로 불투명도를 설정) 조작

.

function updateImage(maxPixelValToShow) 
{ 
    for (var x = 0; x < _curImageData.width; x++) 
    for (var y = 0; y < _curImageData.height; y++) 
    { 
     var offset = (y * _curImageData.width + x) * 4; 
     var r = _curImageData.data[offset]; 
     var g = _curImageData.data[offset + 1]; 
     var b = _curImageData.data[offset + 2]; 
     var a = _curImageData.data[offset + 3]; 
     var pixelNum = ((g * 255) + b); 

     //if greater than max or black/no data 
     if (pixelNum > maxPixelValToShow || (!r && !g && !b)) { 
      _curImageData.data[offset + 3] = 0; 
     } else { 
      _curImageData.data[offset + 3] = 255; 
     } 

    } 
    _context.putImageData(_curImageData, 0, 0); 
} 

그리고이 모든 것이 완벽하게 작동합니다. 내가 겪고있는 문제는 캔버스를 내 이미지 크기의 두 배 (또는 그 크기의 절반 크기) 만들고 캔버스 크기에 맞게 이미지를 그릴 때입니다. 내 updateImage 함수를 호출 할 때

function copyImageToCanvas(aImg) 
{ 
    _canvas = document.getElementById("canvas"); 
    var w = aImg.naturalWidth * 2; //double the size! 
    var h = aImg.naturalHeight * 2; //double the size! 

    _canvas.width = w; 
    _canvas.height = h; 

    _context = _canvas.getContext("2d"); 
    _context.clearRect(0, 0, w, h); 
    _context.drawImage(aImg, 0, 0, w, h); 

    _curImageData = _context.getImageData(0, 0, w, h); 
} 

나는 내 이미지의 가장자리 주위에 이상한 유물을 많이 받고 있어요. 누구나) 왜 이런 일이 벌어지고 있는지, b) 내가 그것에 대해 무엇을 할 수 있는지 알고 있습니까?

The original image

The original image after my updateImage function call

The resized image

The resized image after my updateImage function call

[해결책],536,913,632 : 여기

생성되고 있는지 표시하는 일부 이미지들이다 10 감사합니다 아담과 sunetos, 그게 문제였습니다. 하나의 캔버스가 원본 파일 데이터를 저장하고 픽셀 조작을 수행하고 또 다른 캔버스 만 표시하도록 설정하면 제대로 작동합니다. 코드 아래 :

function updateImage(maxPixelValToShow) { 
    //manipulate the _workingContext data 

    _workingContext.putImageData(_curImageData, 0, 0); 
    _displayContext.clearRect(0, 0, _workingCanvas.width*_scale, _workingCanvas.height*_scale); 
    _displayContext.drawImage(_workingCanvas, 0, 0, _workingCanvas.width*_scale, _workingCanvas.height*_scale); 
} 

Answer 1

그것의 drawImage에서 이미지를 (최대 확장시 이미지가 브라우저에서 사용되는 스무딩처럼 보이는이)에 의해 처리되지 않는 가장자리의 주위에 새로운 중간 색상 값을 일으키는 원인이 당신의 모양의 가장자리를 앤티 앨리어싱 귀하의 updateImage() 함수. Adam이 설명한 것처럼 수정되지 않은 원본 픽셀에 대해 updateImage() 논리를 적용하고 을 입력 한 다음 크기를 조정해야합니다.