画像情報の取得方法

inputタグから画像の情報を取得したい.以下の2点の情報のどちらかを取得したいです.

画像のRGB情報(出来れば配列で取得したいです)
bsae64でエンコードされた画像情報(document.getElementById("image").srcに入力可能な形式)

下記の様に画像の情報がthis.$refs.preview.files[0]の中に画像情報が格納されているのは分かったのですが,個人的に欲しいのは上記二点の情報です.どなたかご教授頂けると嬉しいです.よろしくお願い致します.

html
1<div id="app">
2        <h1>{{message}}</h1>
3        <img id="image" width="500" height="500">
4        <input type="file" ref="preview" @change="uploadFile">
5        <div v-if="url">
6            <im id="pp" :src="url">
7        </div>
8    </div>

javascript
1const app = Vue.createApp({
2    data(){
3        return {
4            message: "Try Preview!",
5        }
6    },
7    methods: {
8        uploadFile(){ 
9            const file = this.$refs.preview.files[0];
10            this.url = URL.createObjectURL(file);
11
12            base64_image = なんらかの処理
13
14            document.getElementById("image").src = base64_image;
15        },
16    },
17}).mount("#app")