Permet de récupérer les image en coller du presse appier

ClipboardPasteImgPOC.vue

<template>
  <div class="image-upload">
    <div class="image-preview" v-if="imageData">
      <img :src="imageData" />
      <a @click="downloadImage" class="download-link">Télécharger</a>
    </div>
    <div class="image-drop-zone" @paste="onPaste"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null,
    };
  },
  methods: {
    onPaste(event) {
      const items = (event.clipboardData || event.originalEvent.clipboardData)
        .items;
      for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.type.indexOf("image") === 0) {
          const file = item.getAsFile();
          this.uploadImage(file);
          break;
        }
      }
    },
    uploadImage(file) {
      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageData = event.target.result;
      };
      reader.readAsDataURL(file);
    },
    downloadImage() {
      const a = document.createElement("a");
      a.href = this.imageData;
      a.download = "image.png";
      a.click();
    },
  },
};
</script>

<style>
.image-upload {
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px auto;
}
.image-drop-zone {
  width: 100%;
  height: 100%;
}
.image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.image-preview img {
  max-width: 100%;
  max-height: 80%;
}
.download-link {
  margin-top: 10px;
}