자바 스크립트 canvas.toDataURL() 빈 이미지

Question

를 반환 I가 흑백으로 이미지를 변환하는 다음 코드 :

var canvas = document.createElement('canvas'); 
var imgObj="data:image/png;base64,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"; 
var canvasContext = canvas.getContext('2d'); 


var imgW = 300; 

var imgH = 300; 
canvas.width = imgW; 
canvas.height = imgH; 

//canvasContext.drawImage(imgObj, 0, 0); 

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); 


for(var y = 0; y < imgPixels.height; y++){ 
    for(var x = 0; x < imgPixels.width; x++){ 
      var i = (y * 4) * imgPixels.width + x * 4; 
      var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2])/3; 
      imgPixels.data[i] = avg; 
      imgPixels.data[i + 1] = avg; 
      imgPixels.data[i + 2] = avg; 
    } 
} 

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); 

console.log(canvas.toDataURL()); 

출력 : 내가 결과를 열 때 내가 볼 data:image/png;base64,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

빈 이미지 ! 내가이 줄을 주석 때문에

나는 그 해프닝을 의심 :

canvasContext.drawImage(imgObj, 0, 0); 

을하지만 난이 행의 주석을 해제 할 때, 내가 얻을 :

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)' 

어떻게이 문제를 해결하기 위해?

의사 코드

입력 : 화려한 이미지 base64로 문자열 출력

Answer 1

이처럼 수행 검은 색과 흰색 base64로 문자열 :

canvasContext.drawImage(imgObj, 0, 0); 

:

var imgObj = new Image(); 
imgObj.src = "data:image/png;base64,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"; 

그런 다음 이미지를 그릴

마지막으로 코드에서 다음과 같은 회색 음영 이미지를 출력합니다. base64 문자열 형식.

drawImage은 이미지 객체를 첫 번째 인수로 사용하지만 base64 문자열 만 제공합니다 (이미지를 생성 할 수는 있지만).