vue2:实现微信截图(复制图片)在项目内可粘贴,且图片清晰度无损(代码可直接用)

功能描述:

1.在vue2中实现截图粘贴功能且粘贴的图片宽高自适应容器设置的宽高,只允许在容器内粘贴一张图片,若容器内有图片,粘贴其他图片则自动替代新粘贴的图片.

2.清除容器内图片

3.粘贴的图片预览,且可通过鼠标滚轮缩放预览图

<template><div><div id="container" @paste="onPaste" style="width: 300px; height: 200px; border: 1px solid black;"><input v-if="inputVal" style="height: 100%; width: 100%;" type="text"><img :src="data:imageURL" v-if="imageURL" style="width: 100%; height: 100%; object-fit: cover;"></div><button @click="clearImage">清除图片</button><button @click="openModal">预览原图</button><!-- 预览页面可鼠标滚轮缩放预览图片 --><div v-show="showModal" class="modal" @click="closeModal" @wheel="onMouseWheel"><img :src="data:imageURL" v-if="imageURL" :style="{ transform: `scale(${scale})` }"><button @click="closeModal">关闭</button></div></div>
</template><script>
export default {data() {return {imageURL: null,showModal: false,scale: 1,inputVal: true,};},methods: {// 监听粘贴事件onPaste(e) {this.inputVal = falseconst items = (e.clipboardData || window.clipboardData).items;let blob = null;for (let i = 0; i < items.length; i++) {if (items[i].type.indexOf('image') === 0) {blob = items[i].getAsFile();}}console.log(blob);// 如果粘贴的内容不是图片if (blob == null) {alert('请先截图或复制图片')return}// 如果粘贴的内容是图片if (blob !== null) {const reader = new FileReader();reader.onload = (e) => {// 更新图片URLthis.imageURL = e.target.result;};reader.readAsDataURL(blob);}},clearImage() {this.imageURL = null;this.inputVal = true},openModal() {this.showModal = true;},closeModal() {this.showModal = false;},onMouseWheel(e) {// 检测滚轮方向const delta = Math.sign(e.deltaY);// 根据滚轮方向调整缩放比例if (delta > 0) {this.scale -= 0.1;} else if (delta < 0) {this.scale += 0.1;}// 限制缩放比例的范围if (this.scale < 0.1) {this.scale = 0.1;} else if (this.scale > 3) {this.scale = 3;}}}
};
</script><style>
.modal {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;overflow: hidden;
}.modal img {max-width: 100%;max-height: 100%;transition: transform 0.3s ease;
}.modal button {position: absolute;top: 10px;right: 10px;
}
</style>

vue2:实现微信截图(复制图片)在项目内可粘贴,且图片清晰度无损(代码可直接用)相关推荐

php 获取图片字节,php内置函数获取图片类型-exif_imagetype
在PHP获取图片类型可以使用PHP内置函数中的 exif_imagetype 预定义常量定义有以下常量,并代表了 exif_imagetype() 可能的返回值: 图像类型常量值常量 1 IMA ...
linux用命令下载图片,Linux命令行下快速查看图片
适用目录下图片文件非常多,文件管理器容易卡死,打开时间反应长的情况. 参考 https://www.cnblogs.com/dylancao/p/7894836.html pho 功能特点 pho 非 ...
Java实现鼠标右键快捷保存QQ微信截图和复制的文字
Java实现鼠标右键快捷保存QQ微信截图和复制的文字首先,我们能实现保存剪贴板内容,以下是我的源代码和解释 import java.awt.*; import java.awt.datatransf ...
微信截图无法发送，也发不出电脑上的图片
微信截图无法发送,也发不出电脑上的图片现象今天微信突然出现这个问题,怎么改设置都调不好,卸载重装都不行,最后发现,微信的消息目录中,一些文件无法删除,提示"文件或目录损坏且无法读取&qu ...
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
仿照微信的效果，实现了一个支持多选、选原图和视频的图片选择器，适配了iOS6-10系统，3行代码即可集成....
重要提示: 1. 1.9.0版本已发布,移除了"prefs:root="的调用,这个API已经被列为私有API,请大家尽快升级.其它同样使用了该API的库大家可以检查下,比如著名的 ...
python截图识别文字_用百度ocr+微信截图实现文字识别
作用:将图片中的文字识别出来一.调用微信截图dll控件将微信截图插件复制到项目文件,使用ctypes加载(胶水语言就是给力) def capture(): try: dll = ctypes.cd ...
PC版微信截图的bug
客户报障,微信截图,粘贴到微信中再复制出来后为jpg格式图片,上传系统显示图片格式错误:使用原始图片上传就没问题(也是jpg格式) 查看代码,系统对图片格式的校验规则如下: public functi ...
图片无限放大，不模糊，图片移动，仿微信图片放大
写此程序背景看到微信的图片浏览的强大功能,于是自己写了一个.原则上可以无限放大,但是放大部分像素必须有原图片的1个像素,最小也不能小于1*1像素. 思路: 功能解剖: 缩放:微信的缩放能缩 ...

vue2:实现微信截图(复制图片)在项目内可粘贴,且图片清晰度无损(代码可直接用)

vue2:实现微信截图(复制图片)在项目内可粘贴,且图片清晰度无损(代码可直接用)相关推荐

最新文章

热门文章