base64からBlobへの変換

#目的
base64エンコードされたURIをblobに変換する際に、「base64??blob??」となったので、情報を整理するためにもコードを日本語でアウトプットする。

#環境
Vue.js 2.6
#完成コード

image.vue

<script>
export default{
  data() {
    cropImg: 'data:image/png;base64,iVBORw0KGgo...',
    blob: ''
  },
  methods: {
        cropImage(){
            let bin = atob(this.cropImg.replace(/^.*,/, '')); //①
            let buffer = new Uint8Array(bin.length); //②
            for(let i = 0; i < bin.length; i++){ //③
                buffer[i] = bin.charCodeAt(i);
            }   
            this.blob = new Blob([buffer.buffer], { //④
                type: "image/jpeg"
            });
        },
  }
}
</script>

#解説
##①atob()によってBase64 文字列をデコードしてバイナリー文字列に変換

.js

let bin = atob(this.cropImg.replace(/^.*,/, '')); 

ちなみにバイナリー文字列からBase64にエンコードする場合はbtoa()でできます。

##② 8 ビットの符号なし整数値の配列を生成

.js

let buffer = new Uint8Array(bin.length);

中身を見るには Uint8Array の型にする必要があります

##③UTF-16 文字コードを取得

.js

for(let i = 0; i < bin.length; i++){
    buffer[i] = bin.charCodeAt(i);
}  

blob()はUTF-16の文字列を第一引数にとることで変換することができるので、UTF-16に変換する必要があります。

##④Blobに変換

.js

this.blob = new Blob([buffer.buffer], {
    type: "image/jpeg"
});

第一引数にUTF-16の文字列を、第二引数にtypeを指定して、変換します。