javascript를 사용하여 이미지를 base64 문자열로 변환하는 방법

제 이미지를 서버로 보내기 위해 제 이미지를 base64 문자열로 변환해야 합니다. JS 파일이 있습니까? 다른 변환 방법

프로그래밍
javascript base64
27일 5월 2011 в 9:26
48 파운드
질문에 대한 의견 (3)

여러 가지 방식 중 하나를 선택할 수 있습니다.

1. 외곽진입: 필레이더

물방울 이미지를 통해 읽어들입니다 스믈하트프리퀘스트 및 필레이더 apiu list. 변환할지 redhat. 다토를:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

function toDataURL(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.onload = function() {
    var reader = new FileReader();
    reader.onloadend = function() {
      callback(reader.result);
    }
    reader.readAsDataURL(xhr.response);
  };
  xhr.open('GET', url);
  xhr.responseType = 'blob';
  xhr.send();
}

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
  console.log('RESULT:', dataUrl)
})

끝 - &lt 스니핏 >;!

이 예제 코드를 사용하여 구현됩니까 WHATWG 페치할 apiu 수도 있다.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

const toDataURL = url => fetch(url)
  .then(response => response.blob())
  .then(blob => new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(blob)
  }))

toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
  .then(dataUrl => {
    console.log('RESULT:', dataUrl)
  })

끝 - &lt 스니핏 >;!

  • 이 approaches:*
  • 갖추지 못한 브라우저 지원 더 나은 압축이란 +
  • 작동합니까 뿐만 아니라 다른 파일 형식
  • 있지만브라우저에 Support:*

성과 = 필레이더 * http://caniuse.com/

2. 외곽진입: 캔바스를

기존 이미지를 로드하는 이미지 객체, 페인트합니다 redhat. 비사양 오염된 캔바스를 및 변환하십시오 캔바스를 다시 다토를.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

function toDataURL(src, callback, outputFormat) {
  var img = new Image();
  img.crossOrigin = 'Anonymous';
  img.onload = function() {
    var canvas = document.createElement('CANVAS');
    var ctx = canvas.getContext('2d');
    var dataURL;
    canvas.height = this.naturalHeight;
    canvas.width = this.naturalWidth;
    ctx.drawImage(this, 0, 0);
    dataURL = canvas.toDataURL(outputFormat);
    callback(dataURL);
  };
  img.src = src;
  if (img.complete || img.complete === undefined) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
  }
}

toDataURL(
  'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
  function(dataUrl) {
    console.log('RESULT:', dataUrl)
  }
)

끝 - &lt 스니핏 >;!

자세히

  • 지원 입력입니다 formats:*

'이미지 / png 이미지 / jpg / jpeg', '', '이미지', 'image/gif image/bmp image/tiff', '', '', '이미지 / x 아이콘이 image/svg+xml image/webp image/xxx' ',' ',' ','

  • 지원 출력입니다 formats:*

'', '이미지 / jpeg 이미지 / png 이미지 / webp' (크롬) ','

  • 있지만브라우저에 Support:*

  • http://caniuse.com/ # 성과 = 캔바스를

  • &gt. IE10 (IE10 그냥 수행됨 어원이 같은 이미지)

3. 외곽진입: 로컬 파일 시스템에서 이미지

스케쳐내 변환하십시오 사용자가 파일 시스템 이미지와 다른 접근 방식을 취할 필요가 있습니다. List. 필레이더 apiu:

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}
<input type="file" onchange="encodeImageFileAsURL(this)" />

끝 - &lt 스니핏 >;!

HaNdTriX
편집된 답변2일 7월 2017 в 9:59
해설 (37)
해결책

HTML5 ''를 사용할 수 있습니다.

캔버스를 만들고 이미지를 캔버스에 로드한 다음 'toDataURL()'을 사용하여 base64 표현(실제로 'data:' URL이지만 base64 인코딩된 이미지가 포함되어 있음)을 가져옵니다.

해설 (7)

이 스니핏을 너회의 문자열을 string 데이터, 영상, 심지어 base64 로 비디오 파일을 변환할 수 있다.

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;


<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
  function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0) {
      var fileToLoad = filesSelected[0];

      var fileReader = new FileReader();

      fileReader.onload = function(fileLoadedEvent) {
        var srcData = fileLoadedEvent.target.result; //
Carles Alcolea
편집된 답변16일 3월 2019 в 4:24
해설 (3)

기본적으로 경우 이미지가

그러면 마치 변환할 수 있습니다.

var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');

ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();
Paul Clark
편집된 답변28일 1월 2019 в 10:58
해설 (2)

이것은 무엇을 했는지

//Author James Harrington 2014
function base64(file, callback){
  var coolFile = {};
  function readerOnload(e){
    var base64 = btoa(e.target.result);
    coolFile.base64 = base64;
    callback(coolFile)
  };

  var reader = new FileReader();
  reader.onload = readerOnload;

  var file = file[0].files[0];
  coolFile.filetype = file.type;
  coolFile.size = file.size;
  coolFile.filename = file.name;
  reader.readAsBinaryString(file);
}

여기에 it 및 사용 방법

base64( $('input[type="file"]'), function(data){
  console.log(data.base64)
})
해설 (2)

[파일]을 사용할 수 있습니다.API]1 그러나 그것은 거의 지원되지 않는다.

해설 (0)

이 경우 단순 기능에서 파일 객체에는 작동합니까 -

function getBase64 (file,callback) {

    const reader = new FileReader();

    reader.addEventListener('load', () => callback(reader.result));

    reader.readAsDataURL(file);
}

Ex 사용 -

getBase64(fileObjectFromInput, function(base64Data){
    console.log("base 64 of file is",base64Data);//here you can have your code which uses base64 for its operation,//file to base64 by oneshubh
});
Shubham
편집된 답변17일 1월 2019 в 9:07
해설 (0)

내가 할 수 있는 가장 안전하고 신뢰할 수 있는 방법을 사용할 수 있습니다 () ',' 필레이더 &lt br/&gt.

데모: [이미지 base64 로] [1]




    <meta charset="UTF-8">


    <input id="myinput" type="file" onchange="encode();" />
    <div id="dummy">
    </div>
    <div>
      <textarea style="width:100%;height:500px;" id="txt">
       0) {
          var imageFile = selectedfile[0];
          var fileReader = new FileReader();
          fileReader.onload = function(fileLoadedEvent) {
            var srcData = fileLoadedEvent.target.result;
            var newImage = document.createElement('img');
            newImage.src = srcData;
            document.getElementById("dummy").innerHTML = newImage.outerHTML;
            document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
          }
          fileReader.readAsDataURL(imageFile);
        }
      }
    </script>

[1]: https://codverter.com/src/webeditor? query = 51fce789-2fee-46be-ac90-94f8d7797b68

jonathana
편집된 답변17일 5월 2019 в 2:21
해설 (0)

이미지 변환될지 내린 것으로 알고 있습니다 base64 구체화하십시오 방법으로 필레이더 () 또는 저장하기 캔바스를 토다토를 사용 후 afaq 요소 () 이미지. 내가 이 같은 문제를 경식도 사미라 참조할 수 있습니다.

26554277 https://stackoverflow.com/questions/26212792/convert-an-image-to-canvas-that-is-already-loaded/26554277

해설 (0)

이 코드를 시도하시겠습니까

이 기능은 파일 업로드 이벤트 카요 변경

  $("#fileproof").on('change', function () {
                readImage($(this)).done(function (base64Data) { $('#').val(base64Data); });
            });

function readImage(inputElement) {
    var deferred = $.Deferred();

    var files = inputElement.get(0).files;

    if (files && files[0]) {
        var fr = new FileReader();
        fr.onload = function (e) {
            deferred.resolve(e.target.result);
        };
        fr.readAsDataURL(files[0]);
    } else {
        deferred.resolve(undefined);
    }

    return deferred.promise();
}

숨겨진 base64data 작성하든지 파일링된 사용합니다.

ravi polara
편집된 답변23일 1월 2019 в 4:44
해설 (1)

도조를 사용하면 base64로 직접 인코딩하거나 디코딩할 수 있습니다.

이렇게 해보세요.

dojox.encoding.base64를 사용하여 바이트 배열을 인코딩하려면:

var str = dojox.encoding.base64.encode(myByteArray);

base64 인코딩 문자열을 디코딩하려면:

var bytes = dojox.encoding.base64.decode(str);
해설 (1)