1. 首先，在HTML文件中创建一个拖放区域，利用HTML5的drag and drop API实现拖放功能，将其设置为可接受图片的数据类型。可以采用如下代码实现：
“`
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
Drop image file here
</div>
“`
2. 创建两个JavaScript函数，分别是dragOverHandler和dropHandler。dragOverHandler函数用于让浏览器知道当用户拖拽图像时，需要发生什么操作，它将阻止浏览器对拖放的默认行为，从而允许拖放事件发生。dropHandler函数在用户释放拖拽的图像时被调用，它将获取图像文件并使用FileReader对象读取图像数据。可以采用如下代码实现：
“`
function dragOverHandler(event) {
event.preventDefault();
}
function dropHandler(event) {
event.preventDefault();
var files = event.dataTransfer.files;
var reader = new FileReader();
reader.onload = function(event) {
var imgData = event.target.result;
//处理图像数据…
};
reader.readAsDataURL(files[0]);
}
“`
3. 在dropHandler函数中，使用FileReader对象将图像数据转换成Base64编码的数据。可以使用FileReader的readAsDataURL方法实现。在函数内部，创建一个Image对象，然后将Base64编码的图像数据赋值给其src属性。最后，在load事件中获取图像的实际尺寸，并在控制台中输出Base64编码的图像数据。可以采用如下代码实现：
“`
function dropHandler(event) {
event.preventDefault();
var files = event.dataTransfer.files;
var reader = new FileReader();
reader.onload = function(event) {
var imgData = event.target.result;
var img = new Image();
img.src = imgData;
img.onload = function() {
console.log("图片宽度: " + img.width + "px");
console.log("图片高度: " + img.height + "px");
console.log("Base64编码数据: " + imgData);
};
};
reader.readAsDataURL(files[0]);
}
“`
4. 最后，在浏览器中运行HTML文件，将一个图像文件拖放到拖放区域中，浏览器将输出图像的实际尺寸和Base64编码数据。