画像からdataURLに変換

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

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

JavaScript only

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

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

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

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

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

1x1サイズのbase64透過画像

DataURI

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

HTML5 Drag&DropAPI FileAPI

UI関連はHTML5で実装

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

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

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

Access-Control-Allow-Origin

HTTP_Access_Control


  view source
  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;
}


#demo input,
#demo a{
  display:block;
  width:100%;
  margin:10px;
}
#demo textarea{
  opacity:0.8;
  display:block;
  width:100%;
  height:400px;
  margin:10px;
}
#demo textarea.tag{
  height:60px;
}
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/img-base64-datauri/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。