1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

便利ページ:データURLを生成する

Last updated at Posted at 2020-01-18

便利ページ:Javascriptでちょっとした便利な機能を作ってみた」のシリーズものです。

HTMLでは、コンテンツ制作者は小さなファイルをインラインで文書に埋め込むことができる「データURL」というのがよく使われています。

こんな感じです。

data:[<mediatype>][;base64],<data>

(参考) データURL : MDN
https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

(たいしたことはやってませんが)便利ページ に追加しておきました。

いつもの通りGitHubにも上げてあります。
 https://github.com/poruruba/utilities

参考までに、以下にデモとしてアクセスできるようにしてあります。「バイナリファイル」のタブを選択してみてください。
 https://poruruba.github.io/utilities/

start.js
        binary_open: function(e){
            var file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = (theFile) =>{
                this.binary_data = new Uint8Array(theFile.target.result);
                this.binary_type = file.type ? file.type: 'application/octet-stream';
                if( this.binary_type.startsWith('text/'))
                    this.binary_text = decoder.decode(this.binary_data);
                this.binary_dataurl = "data:" + this.binary_type + ";base64," + bufferToBase64(this.binary_data);

                this.binary_change();
            };
            reader.readAsArrayBuffer(file);
//            reader.readAsBinaryString(file);
//            reader.readAsDataURL(file);
        },

以下、抜粋です。

this.binary_dataurl = "data:" + this.binary_type + ";base64," + bufferToBase64(this.binary_data);

以上

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?