画像からdataURLに変換

画像のURLを入力 or ローカルの画像をドラッグ&ドロップ

画像をdataURL(MIME Type + base64文字列)に変換する。

JavaScript only

入力はpng, jpg, gif などの画像形式の他、text形式やfontも変換可能

サーバー側で一切データ受け取らないし、こちらのサーバー負荷にもならないので、お好きにどうぞ。

ファイルが大きすぎる場合は先に縮小したり、https://tinypng.com/ とかで圧縮するといいよ。

PC内の画像から画像取得する場合:

ここにローカルの画像ファイルをドラッグ&ドロップ

↓ 出力されたbase64文字列:

size:XxY

1x1サイズのbase64透過画像

DataURI

以下のようにMIME TYPE + base64文字列をIMGタグから参照して利用する

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D" />
- -

HTML5 Drag&DropAPI FileAPI

UI関連はHTML5で実装

JavaScriptでバイナリデータ取得&変換

XMLHttpRequestでURLから取得するパターン

参照先のサイト(サーバー側の設定)がクロスドメインに対応していないと取得できない

Access-Control-Allow-Origin

HTTP_Access_Control

JavaScript

(function(){
  'use strict';

  var Base64Converter = function(){
    // URLからファイルを取得
    this.loadBinaryResource = function(url) {
      var req = new XMLHttpRequest();
      req.open('GET', url, false);
      req.overrideMimeType('text/plain; charset=x-user-defined');
      req.send(null);
      if (req.status != 200) return '';
      return req.responseText;
    }

    // バイナリデータを文字列に変換
    this.convertBinaryFile = function(url) {
      var filestream = this.loadBinaryResource(url);
      var bytes = [];
      for (var i = 0; i < filestream.length; i++){
        bytes[i] = filestream.charCodeAt(i) & 0xff;
      }
      return String.fromCharCode.apply(String, bytes);
    }

    // バイト文字列をbase64文字列に変換
    this.convertImgDataURL = function(url){
      var binary_file = this.convertBinaryFile(url);
      var base64 = btoa(binary_file);
      var head = binary_file.substring(0,9);
      var exe = this.checkExe(head);
      console.log(head);
      console.log(exe);
      //console.log(base64);
      return 'data:image/' + exe + ';base64,' + base64;
    }

    // バイナリの拡張子をチェック
    this.checkExe = function(head){
      if (head.match(/^\x89PNG/)) {
        return 'png';
      } else if (head.match(/^BM/)){
        return 'bmp';
      } else if (head.match(/^GIF87a/) || head.match(/^GIF89a/)) {
        return 'gif';
      } else if (head.match(/^\xff\xd8/)) {
        return 'jpeg';
      } else {
        return false;
      }
    }
  }


  $(function(){
    var bc = new Base64Converter();

    $('#urlForm').on('submit', function(){
      var url = $('#img_url').val();
      url = encodeURI(url);
      var src = bc.convertImgDataURL(url);
      $('#base64').val(src);
      $('#link').attr('href', url).text(url);
      $('#img').attr('src', src);
      return false;
    });



    /*リンク切れ画像の青い枠線を消す (ダミーの透過画像に置き換える) */
    $('img').on('error', function(){
      $(this)[0].src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D';
    });
  });
})();






// HTML5 ドラッグ&ドロップで取得
(function(){
  'use strict';
  var ele = document.getElementById('dragArea');
  ele.classList.add('ready');
  ele.ondragstart = function(event){
    event.dataTranfer.addElement(container);
  }
  ele.ondragover = function(event){
    event.preventDefault();
    this.classList.add('drag');
  }
  ele.ondragleave = function(event){
    event.preventDefault();
    this.classList.remove('drag');
  }
  ele.ondrop = function(event){
    event.preventDefault();
    this.classList.remove('drag');
    console.log(event.dataTransfer.files);
    if(!event.dataTransfer.files.length){
      return;
    }
    var file = event.dataTransfer.files[0];
    console.log(file);

    var reader = new FileReader();
    reader.readAsDataURL(file)

    reader.onload = function(){
      var dataURL = reader.result;
      console.log(dataURL);
      document.getElementById('base64').textContent = dataURL;
      document.getElementById('img_url').setAttribute('value', file.name);
      document.getElementById('img').setAttribute('src', dataURL);
      var w = document.getElementById('img').naturalWidth;
      var h = document.getElementById('img').naturalHeight;
      document.getElementById('size').textContent = w  +'x' + h;
    }
  }
})();


CSS

#demo{
  width:90%;
  margin:0 auto;
}
#demo > * {
  box-sizing:border-box;
}

.info{
  margin:20px;
}

#dragArea{
  background-color:#dddddd;
  width:100%;
  height:200px;
  display:flex;
  justify-content: center;
  align-items: center;
  border:8px dashed #000;
  margin:10px;
}
#dragArea.drag{
  background-color:#ffaaaa;
}


input,
a{
  display:block;
  width:100%;
  margin:10px;
}
textarea{
  opacity:0.8;
  display:block;
  width:100%;
  height:400px;
  margin:10px;
}