剪贴板中图片转为BASE64格式
需求
将图片复制到剪贴板后，希望将图片快捷地转换为BASE64格式。
各种在线工具往往需要先将图片保存到本地，然后将本地文件上传。现在考虑将图片保存到本地这一步去掉，直接将图片从剪贴板粘贴到网页的某个元素中，网页触发粘贴事件并获取文件，然后转换并显示。
触发粘贴并转换
首先准备一个<textarea>用于粘贴图片以及显示结果。
<textarea id="result"></textarea>
然后为其添加paste事件：
document.getElementById('result').addEventListener('paste', function(e) {// 阻止粘贴e.stopPropagation();e.preventDefault(); // 获取剪贴板信息var clipboardData = e.clipboardData || window.clipboardData;var items = clipboardData.items;for(var i=0; i<items.length; i++) {var item = items[i];if (item.kind == 'file') {var pasteFile = item.getAsFile();var reader = new FileReader();reader.onload = function(event) {// 将结果显示在<textarea>中document.getElementById('result').value = event.target.result;}// 将文件读取为BASE64格式字符串reader.readAsDataURL(pasteFile);break;}}
})
这样，当复制一张图片到剪贴板后，选中<textarea>并按Ctrl+V粘贴，即可将剪贴板中的图片转换为BASE64格式字符串并显示在<textarea>中。
将字符串复制到剪贴板中
现在字符串已经显示在了<textarea>中，于是希望增加一个按钮，点击后会自动选中<textarea>中的所有内容并复制到剪贴板中。
首先准备一个<button>:
<button id="copy-button">结果复制到剪贴板</button>
然后为其添加onclick事件：
document.getElementById('copy-button').onclick = function() {var resultTextArea = document.getElementById('result');//获取对象resultTextArea.select();//选择document.execCommand("Copy");//执行复制
};
点击后即可自动选中<textarea>中的所有内容并复制到剪贴板中。
清空<textarea>
首先准备一个<button>:
<button id="clear-button">清空</button>
然后为其添加onclick事件：
document.getElementById('clear-button').onclick = function() {document.getElementById('result').value = '';
};
点击后即可清空<textarea>中的所有内容。
其他
选择
<textarea>组件有多个原因：- 可触发
focus和paste事件。 - 可显示大量内容。
- 可进行选择和复制。
- 可触发
常规截图以及微信截图都可直接粘贴，但QQ截图不行。
剪贴板中图片转为BASE64格式相关推荐
- 为什么要将图片转为base64格式
图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址; 1. 提升性能: 网页上的每一个图片,都是需要消耗一个 http 请求下载而来的, 图片的下载始终都要向服 ...
- 使用canvas.toDataURL把图片转为base64格式
使用canvas.toDataURL把图片转为base64格式 function getBase64(url) {//通过构造函数来创建的 img 实例,在赋予 src 值后就会立刻下载图片,相比 c ...
- tex排版，论文中图片转为eps格式,（pdf，visio转pes）eps图显示不完全
今天!!!突然发现adobe可以将pdf另存为eps.想我之前是在淘宝上花钱转的,气的差点跳楼(假的 转入正题 论文中,无论是visio画的还是拍照,复制粘贴到word,一张图一个word,然后另存为 ...
- vue项目，把图片文件流转为base64格式以图片形式展示在前端
问题描述 前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...
- base64和普通字符串互转---window.btoa window.atob；图片的base64格式
目录 一.作用 二.使用方法 一.作用 将非ASCLL码数据转换为ASCLL码数据,便于网络传输(某些系统仅支持ASCLL编码): 二.使用方法 1)测试代码: //window.btoa(" ...
- Nodejs 使用 Buffer 将图片转为 base64
一直以为图片转为 base64 很复杂,结果今天看了下 Docusaurus 的 plugin-ideal-image 插件源码,居然只要一行代码就完事了: const toBase64 = (ext ...
- Java将图片转为Base64
Java将图片转为Base64 import net.coobird.thumbnailator.Thumbnails; import org.apache.commons.codec.binary. ...
- 使用 Learner Lab - 使用 Lambda 转换图片为 base64 格式
使用 Learner Lab - 使用 Lambda 转换图片为 base64 格式 AWS Academy Learner Lab 是提供一个帐号让学生可以自行使用 AWS 的服务,让学生可以在 1 ...
- 如何将图片转换base64格式？data:image/png;base64又是什么？
一.我们在看代码时经常在img或css背景图片中看到: src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAA ...
最新文章
- 人工智能医疗的商业化困局
- python经典好书-新手Python入门经典书籍推荐
- D3js（一）: d3js和DOM
- C/C++中对链表操作的理解实例分析
- Named Volume 在 MySQL 数据持久化上的基本应用
- C++语言打印汉字表
- python wait_Python的等效Java函数wait(),notify(),synchronized
- android放在上个元素的左边代码,控件悬浮在某个控件之上 Android五大布局方式——相对布局（RelativeLayout）属性详解...
- 前端Cookie处理
- 计算机基础知识(面试),新人面试计算机基础知识试题
- VUE3+TS脚手架安装+目录文件规范
- 计算机操做系统(十二)：进程同步和互斥
- java 省市县数据_使用Jsoup抓取全国地区数据（省市县镇村）
- 2022.02.23_HTML+CSS学习总结_CSS初识、选择器与标签的分类
- python实现12306全自动抢票
- unity3d学习路线选哪家？unity3d培训哪家专业？
- redis-Java集成Redis
- 我在深圳面试汇总(--持续更新中）
- ubuntu 18.04 三五分钟即可一键安装ROS系统（亲测有效）
- linux把没有执行权限的文件变为可执行