Base 64 & URL & blob & FileReader & createObjectURL

時間 2019-11-10

標籤 base url blob filereader createobjecturl 欄目 HTTP/TCP 简体版

原文原文鏈接

Base 64 & URL & blob & FileReader & createObjectURL

/**
 * let blob = item.getAsFile();
 * let reader = new FileReader();
 * event.target.result ===  reader.result
 * base 64
 * 
 */

// data:image/jpeg;base64,
// data:image/png;base64,

/**
 * let blob = item.getAsFile();
 * let url = window.URL.createObjectURL(blob);
 * blob url
 * 
 */

// blob:null/2bc6b76b-7293-458d-bc8c-9d242e94a18e

let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`);

box.addEventListener("paste", function(event) {
    let items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(`clipboardData items: `, JSON.stringify(items, null, 4));
    // will give you the mime types
    for (const item of items) {
        // let item = items[i];
        if (item.kind === "file") {
            // let blob = item.getAsFile();
            // let url = window.URL.createObjectURL(blob);
            let blob = item.getAsFile();
            let reader = new FileReader();
            reader.onload = function(event) {
                console.log(`event.target.result =`, event.target.result);
                // data:image/png;base64,
                let img = document.createElement(`img`);
                img.src = event.target.result;
                img.setAttribute(`class`, `clearfix`);
                // img.class = ".clearfix";
                // img.class = "clearfix";
                img.style = "width: 30%; height: 30%;";
                // img.style = "width: 200px; height: 100px;";
                // textarea.appendChild(img);
                // textarea.insertAdjacentElement(`beforeend`, img);
                textarea.insertAdjacentElement(`afterend`, img);
            };
            // data url
            reader.readAsDataURL(blob);
        }
    }
});

demos

blob & URLapi

https://codepen.io/xgqfrms/full/OeVQzYapp

let log = console.log;

let blob = item.getAsFile();
log(`blob =`, blob);

let url = window.URL.createObjectURL(blob);
log(`url =`, url);


let img = document.createElement(`img`);
// img.src = event.target.result;
img.src = url;
img.setAttribute(`class`, `clearfix`);
 img.style = "width: 30%; height: 30%;";
log(`img =`, img);
// textarea.insertAdjacentElement(`afterend`, img);

base 64 & URLui

https://codepen.io/xgqfrms/full/EBjQRwurl

let log = console.log;

let blob = item.getAsFile();
log(`blob =`, blob);

let url = window.URL.createObjectURL(blob);
log(`url =`, url);


let img = document.createElement(`img`);
// img.src = url;
// img.src = event.target.result;
img.src = reader.result;
img.setAttribute(`class`, `clearfix`);
 img.style = "width: 30%; height: 30%;";
log(`img =`, img);
// textarea.insertAdjacentElement(`afterend`, img);

js `clipboardData` solution

e.clipboardData.items[0].getAsFile() === blob
e.clipboardData.items[1].getAsFile() === base 64

// 單聊貼圖發送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            if (/^image\/\w+$/.test(e.clipboardData.items[0].type) || /^image\/\w+$/.test(e.clipboardData.items[1].type)) {
                let blob = e.clipboardData.items[0].getAsFile() || e.clipboardData.items[1].getAsFile();
                let url = window.URL.createObjectURL(blob);
                privewImage(url);
                // blob:null/2bc6b76b-7293-458d-bc8c-9d242e94a18e
                let uid = conn.getUniqueId();
                // 生成本地消息id
                let msg = new WebIM.message("img", uid);
                // 建立圖片 img 消息
                msg.set({
                    apiUrl: WebIM.config.apiURL,
                    file: {
                        data: blob,
                        url: url,
                    },
                    to: "test",
                    // to: "root",
                    // 接收消息對象
                    roomType: false,
                    // 單聊
                    onFileUploadError(err) {
                        log("Image Upload Error", err);
                    },
                    onFileUploadComplete(data) {
                        log("Image Upload Complete", data);
                    },
                    success(id) {
                        log("Image Upload Success", id);
                        alert(`圖片發送成功!`);
                    },
                });
                conn.send(msg.body);
            }
        }
    }
});