将图片转换成Base64

一时失言乱红尘 2022-07-13 11:09 253阅读 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 条评论，253人围观）

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

相关阅读

相关将URL图片链接转换成base64

使用html2canvas截图的时候，canvas重新渲染的时候，如果资源是URL图片的时候，在请求有个延时可能还没渲染完就完成绘制了，造成图片截图不出来。这时将...

野性酷女/ 2024年04月17日 05:38/ 0 赞/ 84 阅读

相关 python将图片转成base64

import base64 def image_to_base64(image_path): with open(image_path

港控/mmm°/ 2024年03月22日 17:02/ 0 赞/ 79 阅读

相关 java 将base64字符串转换成图片

package kf.ats.gvnsvr.client.taizhou.common; import java.io.OutputStream; im

àì夳堔傛蜴生んèń/ 2024年02月19日 21:59/ 0 赞/ 56 阅读

相关将base64转换为图片

要将Base64编码的字符串转换为图片，您可以使用编程语言中的Base64解码器和适当的图像处理库。以下是Python的示例代码： import base64

今天药忘吃喽~/ 2023年09月29日 22:29/ 0 赞/ 23 阅读

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

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

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

相关将图片转换成Base64

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

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

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

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

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

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

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

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

相关将图片转成base64格式

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

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

相关将图片转换成base64

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

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