javascript에서 imageData에서 이미지를 생성하는 방법은 무엇입니까?

Question

이전에 canvas 요소에서 가져온 imageData에서 새 Image를 만드는 방법이 있는지 알고 싶습니다.

나는 해결책을 찾았지만 결과는 전부 캔버스에 그려지는 것처럼 보입니다. 기본적으로 가능한 경우 ImageData 객체를 Image로 직접 변환하는 방법이 필요합니다. 이 가정

Answer 1

사용할 수 toDataURL 캔버스에 방법. 이미지 데이터를 데이터 URI로 만듭니다.

var canvas = document.createElement("canvas"); 
canvas.width = 100; 
canvas.height = 100; 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "red"; 
ctx.fillRect(0, 0, 100, 100); 

var img = document.createElement("img"); 
img.src = canvas.toDataURL("image/png"); 
document.body.appendChild(img); 

사용자의 브라우저에서 데이터 URI 스키마를 지원하는지 알고 싶다면이 기능을 사용할 수 있습니다. imageData의에서 이미지를 얻기 -이 주제에 제시되었을 때 이전 답변의

function useSafeDataURI(success, fail) { 
    var img = document.createElement("img"); 

    img.onerror = function() { 
     fail(); 
    }; 
    img.onload = function() { 
     success(); 
    }; 

    img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // insert a dot image contains 1px. 
} 

Answer 2

당신은 당신은 다음 넣을 수

var imgData = document.getElementById('mycanvas').toDataURL(); 

사용하여 이미지의 표현을 얻을 수있는 캔버스

<canvas id='mycanvas'></canvas> 

입니다 소스 변경하여 일반 이미지 태그에서

<img id='myimage'/> 

document.getElementById('myimage').src = imgData; 

Answer 3

많은 최신 브라우저가 데이터 URI 스키마를 지원합니다.

이미지 데이터가있는 경우 JavaScript를 사용하여 img 요소의 src 특성을 설정할 수 있습니다. 다음 예에서

봐 : http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 4

없음 질문에 대한 답변을 제공하지 않습니다. 그래서 여기에 해결책이 있습니다.

function imagedata_to_image(imagedata) { 
    var canvas = document.createElement('canvas'); 
    var ctx = canvas.getContext('2d'); 
    canvas.width = imagedata.width; 
    canvas.height = imagedata.height; 
    ctx.putImageData(imagedata, 0, 0); 

    var image = new Image(); 
    image.src = canvas.toDataURL(); 
    return image; 
}