base 64 & blob & image url

base 64 & blob & image url

base 64 image & e.clipboardData.items[1]

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

// 單聊貼圖發送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
    // log(`e =`, e);
    // log(`e.clipboardData`, e.clipboardData);
    // log(`e.clipboardData.types`, e.clipboardData.types);
    // log(`e.clipboardData.items`, e.clipboardData.items);
    // log(`e.clipboardData.items.length`, e.clipboardData.items.length);
    // log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
    // log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            if (/^image\/\w+$/.test(e.clipboardData.items[1].type)) {
                let blob = e.clipboardData.items[1].getAsFile();
            // if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
            //     let blob = e.clipboardData.items[0].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);
            }
        }
    }
});

blob image & e.clipboardData.items[0]

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

// 單聊貼圖發送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
    // log(`e =`, e);
    // log(`e.clipboardData`, e.clipboardData);
    // log(`e.clipboardData.types`, e.clipboardData.types);
    // log(`e.clipboardData.items`, e.clipboardData.items);
    // log(`e.clipboardData.items.length`, e.clipboardData.items.length);
    // log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
    // log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
                let blob = e.clipboardData.items[0].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);
            }
        }
    }
});

bug

solution

all in one

// 單聊貼圖發送
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
    // log(`e =`, e);
    // log(`e.clipboardData`, e.clipboardData);
    // log(`e.clipboardData.types`, e.clipboardData.types);
    // log(`e.clipboardData.items`, e.clipboardData.items);
    // log(`e.clipboardData.items.length`, e.clipboardData.items.length);
    // log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
    // log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            // if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
            //     let blob = e.clipboardData.items[0].getAsFile();
            // if (/^image\/\w+$/.test(e.clipboardData.items[1].type)) {
            //     let blob = e.clipboardData.items[1].getAsFile();
            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);
            }
        }
    }
});