将拖拽的img转换成获取64位base码（附原码）
程序员文章站
2022-07-03 19:49:09
灵感前几天在浏览器的一个网站上想转换照片变成视频，发现拖进去的图片转换成了64位的base码，所以想着自己写一下思路基本框架
灵感
前几天在浏览器的一个网站上想转换照片变成视频，发现拖进去的图片转换成了64位的base码，所以想着自己写一下
思路
- 基本框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
font-size: 30px;
text-align: center;
}
.box {
position: relative;
margin: 0 auto;
border: 1px solid #000;
width: 500px;
height: 500px;
line-height: 500px;
font-size: 100px;
font-weight: bolder;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
/* 设置溢出隐藏 */
overflow: hidden;
}
.text {
margin: 30px auto;
width: 500px;
height: 100px;
border: 1px solid #000;
/* 换行处理 */
word-wrap: break-word;
/* 自动，内容溢出出现滚动条，不溢出不出现 */
overflow: auto;
/* 溢出出现滚动条，不管什么形态都会出现滚动条 */
/* overflow: scroll; */
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p>img转64位</p>
<div class="box">
+
</div>
<div class="text">
</div>
</body>
</html>
首先有一个div用来装照片，一个盒子用来装转好的base码
2. 阻止图片拖入页面的打开事件
// 取消网页自动打开图片的事件
document.ondragover = function(e) {
// 阻止dragover的默认行为，触发drop
e.preventDefault();
}
document.ondrop = function(e) {
// 取消打开事件
e.preventDefault();
}
- 获取目标元素，取消目标元素上的默认事件，触发drop事件
var box = document.getElementsByClassName('box')[0];
var text = document.querySelector('.text');
box.ondragover = function(e) {
e.preventDefault(); //让目标元素有drop事件
}
- 拖拽事件开始
这里要介绍几个 概念
DataTransfer 对象用于保存拖动并放下（drag and drop）过程中的数据。
常用的一些属性
- DataTransfer.dropEffect 获取当前选定的拖放操作类型或者设置的为一个新的类型
- DataTransfer.effectAllowed 提供所有可用的操作类型
- DataTransfer.files 包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。
- DataTransfer.items 只读提供一个包含所有拖动数据列表的 DataTransferItemList 对象。
- DataTransfer.types 一个提供 dragstart 事件中设置的格式的 strings 数组。
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
这里用到的属性和方法
- FileReader.error 只读 一个DOMException，表示在读取文件时发生的错误
- FileReader.readyState 只读 表示当前读取的状态 0表示还未加载 1表示加载中 2表示加载完成
- FileReader.result 只读 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
- FileReader.readAsDataURL() 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
开始正题：
box.ondrop = function(e) {
//清除box
if (box.children.length > 0) {
box.children[0].remove()
}
// console.log(e.dataTransfer)
// 获取拖入的文件列表
var list = e.dataTransfer.files;
var f0 = list[0]; //获取拖入的图片的文件信息
var reader = new FileReader();
reader.readAsDataURL(f0);
// console.log(reader)
reader.onload = function(e) {
var img = new Image();
img.src = reader.result; //获取64位的base码
//将图片显示在盒子中
box.append(img)
//将base码传入盒子中
text.innerHTML = reader.result;
}
}
效果展示
结束
以上就是全部解释，这里放上一份完整的代码，可以自取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
font-size: 30px;
text-align: center;
}
.box {
position: relative;
margin: 0 auto;
border: 1px solid #000;
width: 500px;
height: 500px;
line-height: 500px;
font-size: 100px;
font-weight: bolder;
text-align: center;
color: #fff;
text-shadow: 1px 1px 2px #fff, -1px -1px 2px #000;
overflow: hidden;
}
.text {
margin: 30px auto;
width: 500px;
height: 100px;
border: 1px solid #000;
word-wrap: break-word;
overflow: auto;
}
img {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<p>img转64位</p>
<div class="box">
+
</div>
<div class="text">
</div>
<script>
document.ondragover = function(e) {
e.preventDefault();
}
document.ondrop = function(e) {
e.preventDefault();
}
var box = document.getElementsByClassName('box')[0];
var text = document.querySelector('.text');
box.ondragover = function(e) {
e.preventDefault();
}
box.ondrop = function(e) {
//清除box
if (box.children.length > 0) {
box.children[0].remove()
}
// 获取拖入的文件列表
var list = e.dataTransfer.files;
var f0 = list[0];
var reader = new FileReader();
reader.readAsDataURL(f0);
reader.onload = function(e) {
var img = new Image();
img.src = reader.result; //获取64位的base码
box.append(img)
text.innerHTML = reader.result;
}
}
</script>
</body>
</html>
本文地址：https://blog.csdn.net/Yannnnnm/article/details/109188895