자바 스크립트 변수에 이미지 데이터 (JPEG 또는 PNG)가 있습니다. 이미지를 HTML 문서로 어떻게 표시합니까? 이들은 매우 큰 이미지와 URI가 너무 길어서이 작동하지 않습니다 같은 코드입니다 :자바 스크립트 변수의 데이터에서 HTML 이미지 만들기
// doesn't work because the URI is too long
$('img#target').attr('src', 'data:...');
캔버스를 사용하는 것은 아마 대답은하지만 이미지 데이터를로드하는 방법을 알아낼 수 없습니다.
궁금한 점이 있으시면 : 아니오, 이미지 데이터를 직접 img 태그로 다운로드 할 수는 없습니다. 그것은 암호화 된 서버에서 왔으며 Javascript를 사용하여 브라우저 내에서 해독되었습니다.
감사합니다,
- 예술 Z.
캔버스에 그릴 데이터 URL을 사용하려면 : this question/answer 당
var img = new Image;
img.onload = function(){
myCanvasContext.drawImage(img,0,0);
};
img.src = "data:...";
당신이 src 전에 onload을 설정해야합니다.
"URI가 너무 깁니다"라고 말하면이지만 그 의미가 명확하지 않습니다. IE8만이 데이터 URI에 32kB 제한을 가지고 있습니다. 다른 브라우저의 경우 제대로 작동해야합니다. 오류가 발생하면 설명하십시오.
큰 이미지입니다. 예를 들어 데이터가 1MB 이상인 img.src = "data : ..."를 사용할 수 있습니까? (IE8을 지원하지 않는 것은 괜찮습니다.) –
@ArtZ 예, 괜찮습니다. 테스트하기 쉽습니다. – Phrogz
@Phogz 네, 맞습니다. 그것은 IE를 제외하고는 모두 작동합니다. 내가 겪고있는 문제는 이전에 워크 플로우에서 맹 글링 된 데이터에 기인 한 것으로 보입니다. 버그에 대한 다른 곳을 찾아 보도록 권해 주셔서 감사합니다. –
이
$('img#target').attr('src', 'data:...');
모든 IE를 제외한에서 작동합니까 것으로 나타났다. 내 문제는 다른 곳에서 발생했습니다.
데이터 URI와 캔버스 모두 어디서나 완벽하게 지원되지 않습니다. 암호화를 수행하고 정상적인 이미지로 제공하는 서버를 통해 이미지를 프록시 처리하는 것은 어떻습니까? – deceze