粘贴图片生成base64或者blob临时地址

前言

之前文章有介绍blob,以及base64和blob的互转，今天这篇文章是上面这些文章的补充吧，主要介绍通过截图或者粘贴图片，直接生成base64的地址或者blob的临时地址，假如要上传服务端，可以通过之前介绍的互转等方式直接传给服务端。

demo案例

下面介绍一下这个demo案例

html代码

<div>
    <kbd>Ctrl</kbd>+<kbd>V</kbd> 粘贴图片
</div>
<div class="container">
    <img id="preview" src="" alt="">
    <textarea placeholder="图片base64"></textarea>
</div>

js代码

// 获取dom
const imgDom = document.getElementById('preview');
const textareaDom = document.querySelector('textarea');
// 监听paste事件
document.addEventListener('paste', function (e) {
    // DataTransferItemList https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransferItemList
    const dataTransferItemList = e.clipboardData.items;
    // 过滤非图片类型
    const items = [].slice.call(dataTransferItemList).filter(function (item) {
        return item.type.indexOf('image') !== -1;
    });
    if (items.length === 0) {
        return;
    }
    // DataTransferItem https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransferItem
    const dataTransferItem = items[0];
    const blob = dataTransferItem.getAsFile();
    // FileReader https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
    const fileReader = new FileReader();
    fileReader.addEventListener('load', function (e) {
        let base64 = e.target.result;
        textareaDom.value = base64;
    });
    fileReader.readAsDataURL(blob);
    // 如果觉得base64太长，也可以生成本地临时链接
    // URL.createObjectURL https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL
    imgDom.src = URL.createObjectURL(blob);
});

小结

URL.createObjectURL(blob); 

这个方式生成blob临时地址，这个之前也有文章介绍。

欢迎关注haorooms博客，前端博客，欢迎交流。