2012-11-06 15 views
6

phonegap 응용 프로그램을 개발하고 navigator.getPicture 메서드를 사용하여 이미지를 가져옵니다.javascript에서 base64 인코딩하는 방법

내가 그림을 얻고있다 방법은 다음과 같습니다 그냥 폰갭 문서의의 예와 같이

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
destinationType: Camera.DestinationType.FILE_URI }); 

function onSuccess(imageURI) { 
    var image = document.getElementById('myImage'); 
    image.src = imageURI; 
} 

.

나중에 업로드하기 위해 imageURI를 사용하여 이미지 데이터로 변환 할 수 있기를 원합니다. 반환하기 전에,

는 지금까지 모두 Get image data in JavaScript?

나는 다음을 시도 How can you encode a string to Base64 in JavaScript?을 시도

function onSuccess(imageURI) { 
    getBase64Image(imageURI); 
} 

function getBase64Image(img) { 
    // Create an empty canvas element 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 

    // Copy the image contents to the canvas 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 

    // Get the data-URL formatted image 
    // Firefox supports PNG and JPEG. You could check img.src to 
    // guess the original format, but be aware the using "image/jpg" 
    // will re-encode the image. 
    var dataURL = canvas.toDataURL("image/png"); 

    console.log(dataURL); //here is where I get 'data:,'  

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
} 

그리고 인쇄 dataURL을 (내가 폰갭의 FileTransfer를 사용하지 않음). 나는 내용으로 data:,을 얻는다.

내가 뭘 잘못하고 있는지에 대한 아이디어가 있습니까?

+0

SQ에 오신 것을 환영합니다. 아주 좋은 첫 번째 질문! +1 – simbabque

답변

0

음 DATA_URL로 사용해 볼 수 있습니다. 이미지가 Base64 문자열로 변환 될 때 메모리 부족 오류가 발생하여 마일리지가 달라질 수 있습니다.

navigator.camera.getPicture(onSuccess, onFail, { quality: 50, 
    destinationType: Camera.DestinationType.DATA_URL }); 

function onSuccess(imageURI) { 
    var image = document.getElementById('myImage'); 
    image.src = imageURI; 
} 

또는 FileReader.readAsDataURL()을 사용할 수 있습니다.

이전 버전의 Android에서는 canvas.toDataURL 메서드가 구현되지 않았습니다.

+0

안녕하세요, Simon, 저는 readAsDataURL을 시도했지만 그걸로 운이 없었습니다. DATA_URL을 사용하고 싶지 않지만 유일한 옵션 일 것 같아요. 감사. – fabian

관련 문제