JavaScript를 사용하여 로컬 이미지를 base64로 변환

Iam이 (가) javascript에서만 사용하는 프로젝트입니다. 이미지를 base64로 변환하는 함수가 있습니다. 아래 코드를 참조하십시오.JavaScript를 사용하여 로컬 이미지를 base64로 변환

function getBase64Image() 
{ 
    p = document.getElementById("picField").value; 
    img.setAttribute('src', p); 
    var canvas = document.createElement("canvas"); 
    canvas.width = img.width; 
    canvas.height = img.height; 
    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(img, 0, 0); 
    var dataURL = canvas.toDataURL("image/png"); 
    var r = dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 
    base64 = r; 
    alert(base64); 
}

하지만 문제는 내가 내 웹 사이트를 구축 할 때, 가 나는 그것이 작동하지 않는, IIS 내 HTML 파일을 배치 할 때 의미이며, 그것은 IVB처럼 완전한 기본 64 형식을 보여주는 로컬 파일 시스템에서 의미합니다 .... , 하지만 iis에서는 base64 코드를 "기본"으로 지정합니다. 그래서 iis에서 잘 작동하지 않는 이유는 알고 있습니다. 제게 도와 주시고 iis에서 작동하는 html 파일을 보내주십시오.

출처

2012-03-05 Raja Ramesh

이 클라이언트 측 코드 및 IIS와는 아무 상관이 없을 것이다. 당신은 아마 같은 기원 정책 문제가 있습니다. 어떤 종류의 필드가'document.getElementById ("picField")'이며 URL이 그 안에있는 것처럼 보이는가? –

ofcourse, 동일한 html 파일이 base64 문자열을 명확하게 보여 주지만 iis에 배치 될 때 표시되지 않는 이유는 무엇입니까? –

<입력 유형 = "파일"id = "picField"onchange = "f()"> –

나는 Same Origin Policy 문제가 있음을 확신합니다.

IIS에서 페이지를 실행할 때 페이지가 로컬이 아닌 다른 컨텍스트에서 실행됩니다. file:// URL 대신 http://에서 실행됩니다.

로컬 이미지 파일을 가져 와서 원격 사이트의 캔버스에로드하려고합니다. 보안상의 이유로 전통적인 자바 스크립트를 사용하는 것은 불가능합니다. (비록 이것이 로컬에서도 어떻게 작동하는지 모르겠습니다. 어쨌든.)

로컬 파일에 대한 JavaScript 직접 액세스를 허용하는 HTML 5 file API을 사용해야합니다. 나는 그와 관련된 몇 가지 질문을 파헤쳐 볼 수 있는지 보일 것이다.

업데이트 :이 도움이 될 것입니다

How can I draw an image from the HTML5 File API on Canvas?

출처

2012-03-05 09:35:58

우리의 문제를 어떻게 해결할 수 있습니까? 제발 도와주세요 –

@ 라자 대답의 링크를 참조하십시오. 여기서 약간 다른 개념을 사용해야합니다. –

아니요 작동하지 않습니다. 제발 도와주세요. –

JavaScript를 사용하여 로컬 이미지를 base64로 변환

답변

관련 문제