将图片转换为Base64编码的字符串

图片以文件的形式存在,可以在表单中使用。

也可以转换成Base64编码的字符串,从而在css、js中以字符串的形式使用图片。例如,在css中设置背景图片、在js中用ajax上传图片。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>
<body>
    <h2>图片转Base64</h2>
    <input type="file" id="uploadFile" onchange="getDataUrl(event);"/>
    <img id="myImg" width="16" height="16"/>
    <script>
        let getDataUrl = (e)=>{

            // 获取图片
            let file = document.getElementById(‘uploadFile‘).files[0];

            // 检测图片
            if(!/image\/w+/.test(file.type)){
                alert(‘请上传图片‘);
                return;
            }

            // 转换图片
            let fileReader = new FileReader();
            fileReader.onload = ()=>{
                console.log(fileReader.result);
                document.querySelector(‘#myImg‘).src = fileReader.result;
            }
            fileReader.readAsDataURL();

        }
    </script>
</body>
</html>

各种图片在线转换Base64的网站,就是使用这种方法来转换jpg、png、ico等图片。

原文地址:https://www.cnblogs.com/sea-breeze/p/8798385.html

时间: 2024-10-12 13:12:10

将图片转换为Base64编码的字符串的相关文章

C#中图片转换为Base64编码,Base64编码转换为图片

#region 图片转为base64编码的字符串 public string ImgToBase64String(string Imagefilename) { try { Bitmap bmp = new Bitmap(Imagefilename); MemoryStream ms = new MemoryStream(); bmp.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg); byte[] arr = new byte[ms.Lengt

JAVA 将图片转换为Base64编码

这里使用的jar包是commons-codec-1.10.jar; 示例代码 1 import java.io.FileInputStream; 2 import java.io.FileOutputStream; 3 import java.io.IOException; 4 import java.io.InputStream; 5 import java.io.OutputStream; 6 7 import org.apache.commons.codec.binary.Base64;

python 将图片转换为base64编码转储进数据库

# _*_ coding: utf-8 _*_#中间件:拓展工具遍历文件夹,对文件夹图片进行base64编码,写入数据库,并且读取查找方法__author__ = 'wf15038'__date__ = "2018/8/28 18:38" import pymysqlimport sysfrom datetime import datetimeimport base64import os now = datetime.now().strftime('%Y-%m-%d %H:%M:%S'

nodejs抓取网络图片转换为base64编码的图片

抓取网络图片需要加载http模块 //假定这是index.js文件 var http = require('http'); var url = 'http://p0.meituan.net/tuanpic/3df525af5a3f7fe04077567d2a6caf794904.png';  //一张网络图片 http.get(url,function(res){ var chunks = []; //用于保存网络请求不断加载传输的缓冲数据 var size = 0; //保存缓冲数据的总长度

Javascript 将图片的绝对路径转换为base64编码

Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg"; 我们如下编写代码: function getBase64Image(img) { var canvas = document.create

图片和base64编码字符串 互相转换,图片和byte数组互相转换

图片和base64编码字符串 互相转换 import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; /** * @author lishupeng * @create 2017-05-06 下午 2:56 **/ public class Base64Test { public static void main(String[] args) { String strImg = GetImageSt

字符串与图片的Base64编码转换操作

//图片 转为 base64编码的文本 private void button1_Click(object sender, EventArgs e) { OpenFileDialog dlg = new OpenFileDialog(); dlg.Title = "选择要转换的图片"; dlg.Filter = "Image files (*.jpg;*.bmp;*.gif)|*.jpg*.jpeg;*.gif;*.bmp|AllFiles (*.*)|*.*";

Base64编码 图片与base64编码互转

package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import java.io.*; /** * Created by jn-dinggao on 2016/2/4. */ public class Base64Util { // 将图片文件转化为字节数组字符串,并对其进行Base64编码处理 public static String GetImageStr(Stri

图片的base64编码的利与弊?

什么是图片的base64编码? 图片的base64编码,就是将一张图片的数据进行base64编码成字符串,用这个字符串代替图片的地址.这样的话下载图片,就不用发起http请求了,而可以随着html的下载一起将图片下载到本地. 图片的base64编码的利处: 将一些小图片数据编码成base64,可以减少http请求,避免造成浏览器请求阻塞. 图片的base64编码的弊处: 使用图片的base64编码,虽然可以减少http请求,但是如果在处理过程中,将大图片数据也进行了base64编码,这样在很大的