image-clipboard

English | 中文

🚀 Intro

• get image from clipboard
• upload image from paste event

🦄 Usage

import {useImageClipboard, usePasteUpload} from 'image-clipboard'

useImageClipboard

get image from clipboard

const {isSupported, getImage} = useImageClipboard({
    accepts: ['png', 'jpeg'],
    // success(file) {
    //     console.log(file)
    // }
})
getImage().then(async file => {
    console.log(file)
})

usePasteUpload

The paste operation will trigger the file upload event for the input element with the class .image-upload.

const {addEvent, removeEvent} = usePasteUpload({
    accepts: ['png', 'jpeg'],
    uploadClass: '.image-upload',
    // async success(file) {
    //     console.log(file)
    //     imagePaste.value = await getFileBase64(file?.[0])
    // }
})
onMounted(() => {
    addEvent()
})

onUnmounted(() => {
    removeEvent()
})

📦 Install

pnpm

pnpm install image-clipboard --save

Demos

• Vite + Vue 3

CDN

<script src="https://unpkg.com/image-clipboard"></script>

<script src="https://cdn.jsdelivr.net/npm/image-clipboard"></script>

It will be exposed to global as window.imageClipboard

CHANGELOG