图片转换base64
<input id="file" accept="image/png,image/jpeg,image/gif" type="file" />
<textarea id="fileResult"></textarea>
<script type="text/javascript">
file.addEventListener('change', function (ev) {
var file = ev.target.files[0];
if (!file) { return }
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
fileResult.innerHTML = reader.result;
}
reader.onerror = function (e) {
console.log(e);
}
}, false);
</script>
这段代码实现了一个文件上传功能，用户可以选择图片文件上传，上传后会在页面上显示出该图片的 base64 编码。 代码步骤： 1. 首先在 HTML 中定义了一个 input 标签，用于选择文件，设置了 accept 属性为图片类型。 2. 接着定义了一个 textarea 标签，用于显示上传后的图片 base64 编码。 3. 在 JavaScript 中，通过 addEventListener 给 input 标签添加了一个 change 事件监听器。 4. 当用户选择了文件后，事件监听器会调用回调函数，获取到用户选择的文件。 5. 如果文件不存在，则直接返回。 6. 如果文件存在，则创建一个 FileReader 对象，用于读取文件内容。 7. 通过 readAsDataURL 方法将文件内容转换为 base64 编码，并将结果存储在 reader.result 中。 8. 将 reader.result 显示在 textarea 标签中。 9. 如果读取文件出错，则在控制台输出错误信息。
base64转图片
<textarea id="imgBase64"></textarea>
<a id="imgBtn" href="javascript:;">确定</a>
<img id="imgResult" src="" alt="" />
<script type="text/javascript">
imgBtn.addEventListener('click', function () {
imgResult.src = imgBase64.value;
var a = document.createElement('a');
a.download = 'name';
a.href = imgBase64.value;
var ev = document.createEvent('MouseEvents');
ev.initEvent('click', false, true);
a.dispatchEvent(ev);
}, false);
</script>
