[javascript] HTML5 Canvas (readAsBinaryString)에서 바이너리 (base64) 데이터 가져 오기

Program / 글쓴이

HTML Canvas의 내용을 바이너리 데이터로 읽는 방법이 있습니까?

현재 입력 파일과 그 아래에 캔버스를 표시하는 다음 HTML이 있습니다.

<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

그런 다음 제대로 작동하는 캔버스를 올바르게 설정하도록 입력 파일을 설정했습니다.

$('#fileInput').on('change', function() {
    $.each(this.files, function() {
        var image = new Image();
            image.src = window.URL.createObjectURL(this);

        image.onload = function() {
            $("canvas").drawImage({
                source: image,
                x: 50, y: 50,
                width: 100,
                fromCenter: false
            });
        };
    });
});

이제 버튼을 클릭 할 때 Canvas에서 바이너리 데이터 (Base64로 인코딩 됨)를 가져와야하므로 데이터가 서버로 푸시됩니다.

최종 결과는 사용자에게 파일을 선택하고, 자르기 / 크기를 조정할 수있는 기능을 제공해야한다는 것입니다. 그런 다음 편집 된 이미지가 서버에 업로드되는 지점에서 버튼을 클릭해야합니다. 서버 측 제한으로 인해 자르기 / 크기 조정 …)

어떤 도움이라도 좋을 것입니다! 건배

답변

이 canvas요소는 주어진 형식으로 base64로 인코딩 된 이미지 데이터를 포함 toDataURL하는 data:URL을 반환 하는 메서드를 제공합니다. 예를 들면 :

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

반환 값이 아니지만 단지 base64로 이진 데이터를 인코딩, 그것은 계획하고 원하는 데이터 만 얻을 수있는 파일 형식을 손질하는 간단한 문제입니다.

toDataURL브라우저가 다른 출처에서로드 된 데이터를 캔버스에 당신이 그려 한 생각한다면이 방법은 이미지 파일을 스크립트이 수행하는 HTML 페이지와 같은 서버에서만 작업로드한다면, 그래서 방법은 실패합니다 조작.

자세한 내용은 다음을 참조 에 MDN 워드 프로세서 canvasAPI 에 대한 자세한 내용을 포함 toDataURL하고 상의 위키 피 디아 기사 data:URI 방식 이 호출에서받을거야 URI의 형식에 대한 자세한 내용을 포함한다.

답변

짧은 대답:

const base64Canvas = canvas.toDataURL("image/jpeg").split(';base64,')[1];

답변

캔버스를 그리는 방법보기

$("canvas").drawImage();

Caleb Evans의 jQuery Canvas ( jCanvas ) 를 사용하는 것 같습니다 . 나는 실제로 그 플러그인을 사용하며 캔버스 base64 이미지 문자열을 검색하는 간단한 방법이 있습니다.$('canvas').getCanvasImage();

다음은 작동하는 Fiddle입니다. http://jsfiddle.net/e6nqzxpn/

답변