将图片转换成Base64

一时失言乱红尘 2022-07-13 11:09 170阅读 0赞

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            选择图片：  
    <input type="file" id="img">  
    <br/>  
    <button id="start">开始转换</button>  
    <div>  
        预览：<img id="imgShow" src="" alt="">  
    </div>  
    <b>Base64数据：</b>  
    <textarea rows=15 cols=60 id="conte"></textarea>  
    <button id='cpData'>复制</button><span id="succ"></span>  
    <div id="len">数据长度：</div>  
    <script> var img = document.getElementById('img') , imgShow = document.getElementById('imgShow') , conte = document.getElementById('conte') , len = document.getElementById('len') , start = document.getElementById('start') , cpData = document.getElementById('cpData'); cpData.addEventListener('click', cpDataF); start.addEventListener('click', startt); /*转换函数*/ function startt() { var imgFile = new FileReader(); imgFile.readAsDataURL(img.files[0]); imgFile.onload = function () { var imgData = this.result; //base64数据 imgShow.setAttribute('src', imgData); conte.value = imgData; len.innerHTML += imgData.length; } } /*复制数据*/ function cpDataF() { conte.select(); // 选择对象 var cpd=document.execCommand("Copy"); // 执行浏览器复制命令 cpd ? document.getElementById('succ').innerHTML = '复制成功' :　console.warn('复制失败'); window.setTimeout(function () { document.getElementById('succ').innerHTML = ''; }, 1000) } </script>  
        </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关 PHP将网络图片转为base64,PHP将图片转换成base64格式的优缺点

这篇文章主要介绍了关于PHP将图片转换成base64格式的优缺点，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、图片转换成base64格式的优缺点 1.

ゝ一世哀愁。/ 2023年01月13日 04:03/ 0 赞/ 133 阅读

相关将图片转换为Base64编码字符串、解析Base64编码字符串后生成图片

目录代码结果注意代码 public class Test { pu

深碍√TFBOYSˉ_/ 2022年09月10日 06:14/ 0 赞/ 208 阅读

相关将图片转换成Base64

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

一时失言乱红尘/ 2022年07月13日 11:09/ 0 赞/ 171 阅读

相关 base64生成图片——图片转换变成base64

base64生成图片——图片转换变成base64 如题。下面上货。 package com.xueyou.demo; import org

桃扇骨/ 2022年06月15日 05:22/ 0 赞/ 352 阅读

相关将base64数据流文件转换为图片文件

前后端交互处理图片的时候，会出现这样的情况：前端传递给我们后端的是base64的图片数据流，我们需要做的就是将它转为图片并且保存起来，根据需要再决定是否将图片存储路径信息

àì夳堔傛蜴生んèń/ 2022年06月02日 12:23/ 0 赞/ 1324 阅读

相关 android 把图片转换成Base64字符串

import java.io.ByteArrayOutputStream; import java.io.File; import java.io.Fi

柔光的暖阳◎/ 2022年05月13日 00:16/ 0 赞/ 222 阅读

相关将图片转成base64格式

将图片转成base64好处是减少页面的http请求,个人建议用在那种多页面用同一张比较小的图，因为大的图转码生成的字符串编码会很长,写入页面影响页面的可读性，不怎么方面后期的调

偏执的太偏执、/ 2022年03月22日 15:47/ 0 赞/ 324 阅读

相关 MultipartFile转换成base64字符串

MultipartFile转换成base64 import org.springframework.web.multipart.MultipartFile;

深碍√TFBOYSˉ_/ 2021年11月26日 10:06/ 0 赞/ 1327 阅读

相关前端图片在线转换Base64 图片编码Base64

首先讲一下什么是图片Base64编码：简单来说，图片的base64编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址。为什么要用Base64？我们

比眉伴天荒/ 2021年09月14日 03:02/ 0 赞/ 933 阅读

相关将图片转换成base64

data:图片类型;base64,图片二进制Buffer.toString('base64') 图片类型可以使用mime库根据图片后缀进行转换 ba

r囧r小猫/ 2021年07月24日 20:43/ 0 赞/ 646 阅读