精华内容
下载资源
问答
  • img src 使用 base64 图片数据 在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.url.com/te.png"> 但是如果我们有图片base64数据;也可以...

    img src 使用 base64 图片数据

    在网页上显示一张图片通常是 <img src="xxx.png" > 或 <img src="www.url.com/te.png">

    但是如果我们有图片base64数据;也可以使用 base64数据来在网页上显示一张图片;

    格式:

    <img src="data:image/bmp;base64,Qk32egAAAAAAADYE...(图片base数据)>

    上面一个是 注意 图片格式: image/bmp, 这里可以使用主流的图片格式jpg,png等

    后面的 Qk32 为该图片的 base64数据;

    Base64格式
    data:[][;charset=][;base64],
    Base64 在CSS中的使用
    .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
    Base64 在HTML中的使用
    <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />
    

      

     

    图片在线转base64数据http://imgbase64.duoshitong.com/

    展开全文
  • 图片使用base64图片数据格式上传(后台使用springMVC)
                   

    一、前台JSP页面

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %><c:set var="ctx" value="${pageContext.request.contextPath}" /><!DOCTYPE html><html>    <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>文件上传</title> <script type="text/javascript"  src="${ctx}/js/jquery-2.1.4/jquery-2.1.4.js"></script>  <script type="text/javascript">    //通过FileReader.readAsDataURL获取base64数据    function uploadFile(file){        var f = document.getElementById("myImage").files[0];        var reader = new FileReader(); //新建一个FileReader        reader.readAsDataURL(f);  // 读取文件base64数据        reader.onload = function(e){ //数据读取完成产生onload事件            var data = e.target.result; //获取数据            if (data.lastIndexOf('data:base64') != -1) {                  data = data.replace('data:base64', 'data:image/jpeg;base64');            } else if (data.lastIndexOf('data:,') != -1) {                  data = data.replace('data:,', 'data:image/jpeg;base64,');            }            if(isCanvasSupported()){                 ajaxUploadBase64File(data);            }else{                 alert("您的浏览器不支持");            }        };        reader.onerror = function(){            console.log("上传失败了 ");        }            }    //ajax异步上传    function ajaxUploadBase64File(base64Data){        var url = "${ctx}/upload/uploadBase64";        $.ajax({            url:url,            type:"post",            data:{base64Data:base64Data},            success:function(data){                if(data == "success"){                   alert("上传成功");                }else{                    alert("上传失败");                }            },            error:function(){                alert("上传失败");            }        });    };     //是否支持canvas    function isCanvasSupported(){        var elem = document.createElement('canvas');        return !!(elem.getContext && elem.getContext('2d'));    };     </script></head><body>    <input type="file" id="myImage" name="myImage"/>     <input type="button" onclick="uploadFile();" value="上传"></body></html>



    二、后台Controller

    package org.nercita.bcp.upload;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.UUID;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.commons.io.FileUtils;import org.springframework.stereotype.Controller;import org.springframework.util.Base64Utils;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import org.springframework.web.bind.annotation.RequestParam;import org.springframework.web.bind.annotation.ResponseBody;import org.springframework.web.multipart.commons.CommonsMultipartFile;@Controllerpublic class UploadController {     @RequestMapping("/upload/uploadImage")    public String uploadImagePage(){ return "/upload/uploadImage";    }      @RequestMapping(value="/upload/uploadBase64",method=RequestMethod.POST)    @ResponseBody    public String base64UpLoad(@RequestParam String base64Data, HttpServletRequest request, HttpServletResponse response){                  try{                          String dataPrix = "";            String data = "";                    if(base64Data == null || "".equals(base64Data)){                throw new Exception("上传失败,上传图片数据为空");            }else{                String [] d = base64Data.split("base64,");                if(d != null && d.length == 2){                    dataPrix = d[0];                    data = d[1];                }else{                    throw new Exception("上传失败,数据不合法");                }            }                       String suffix = "";            if("data:image/jpeg;".equalsIgnoreCase(dataPrix)){//data:image/jpeg;base64,base64编码的jpeg图片数据                suffix = ".jpg";            } else if("data:image/x-icon;".equalsIgnoreCase(dataPrix)){//data:image/x-icon;base64,base64编码的icon图片数据                suffix = ".ico";            } else if("data:image/gif;".equalsIgnoreCase(dataPrix)){//data:image/gif;base64,base64编码的gif图片数据                suffix = ".gif";            } else if("data:image/png;".equalsIgnoreCase(dataPrix)){//data:image/png;base64,base64编码的png图片数据                suffix = ".png";            }else{                throw new Exception("上传图片格式不合法");            }            String tempFileName = UUID.randomUUID().toString() + suffix;                         //因为BASE64Decoder的jar问题,此处使用spring框架提供的工具包            byte[] bs = Base64Utils.decodeFromString(data);            try{                //使用apache提供的工具类操作流                          System.out.println(request.getServletContext().getRealPath("/upload"));                FileUtils.writeByteArrayToFile(new File(request.getServletContext().getRealPath("/upload"), tempFileName), bs);              }catch(Exception ee){                throw new Exception("上传失败,写入文件失败,"+ee.getMessage());            }                                   return "success";                    }catch (Exception e) {                         return "error";        }            } }

            本文使用的是FileRead的readAsDataURL获取base64的图片编码数据,通常我们 使用canvas画布在html的dom元素中所绘的图行,也可以使用 canvas的toDataUrl转换成base64编码的图片数据进行上传,具体获取方式如下:

     var mycanvas = document.getElementById("mycanvas");   var imageBase64Data  = mycanvas.toDataURL("image/png");  




               
    展开全文
  • 图片base64数据互转

    2019-04-10 10:42:46
    图片base64数据: import base64 with open(r'c:\users\administrator\desktop\wh.jpg', 'rb') as f: b64str = base64.b64encode(f.read()) #将图片编码成base64数据 with open(r'c:\users\administrator\...

    图片转base64数据:

    import base64
    
    with open(r'c:\users\administrator\desktop\wh.jpg', 'rb') as f:
    	b64str = base64.b64encode(f.read())			#将图片编码成base64数据
    			
    with open(r'c:\users\administrator\desktop\img.txt', 'w+') as f:		
    	f.write(b64str.decode())					#用decode()将bytes转换成str
    

    base64数据转图片:

    import base64
    
    with open(r'c:\users\administrator\desktop\img.txt', 'r') as f:
    	data = base64.b64decode(f.read())
    
    with open(r'c:\users\administrator\desktop\base64.jpg', 'wb') as f:
    	f.write(data)
    
    展开全文
  • 图片Base64编码三. 图片在线Base64编解码四. Unity中如何显示Base64图片 一. 关于Base64 目前Base64已经成为网络上常见的传输8Bit字节代码的编码方式之一。 Base64到底起到什么作用呢? 在参数传输的过程中经常...

    一. 关于Base64

    目前Base64已经成为网络上常见的传输8Bit字节代码的编码方式之一。
    Base64到底起到什么作用呢?
    在参数传输的过程中经常遇到的一种情况:使用全英文的没问题,但一旦涉及到中文就会出现乱码情况。与此类似,网络上传输的字符并不全是可打印的字符,比如二进制文件、图片等。Base64的出现就是为了解决此问题,它是基于64个可打印的字符来表示二进制的数据的一种方法。

    二. 图片的Base64编码

    Created with Raphaël 2.2.0 图片的二进制流 每3个8位二进制转成4个6位二进制 6位二进制转十进制 根据十进制数值从The Base64 Alphabet表中获取字符 转换后的字符串

    其中The Base 64 Alphabet表如下

    The Base 64 Alphabet
         Value Encoding  Value Encoding  Value Encoding  Value Encoding
             0 A            17 R            34 i            51 z
             1 B            18 S            35 j            52 0
             2 C            19 T            36 k            53 1
             3 D            20 U            37 l            54 2
             4 E            21 V            38 m            55 3
             5 F            22 W            39 n            56 4
             6 G            23 X            40 o            57 5
             7 H            24 Y            41 p            58 6
             8 I            25 Z            42 q            59 7
             9 J            26 a            43 r            60 8
            10 K            27 b            44 s            61 9
            11 L            28 c            45 t            62 +
            12 M            29 d            46 u            63 /
            13 N            30 e            47 v
            14 O            31 f            48 w         (pad) =
            15 P            32 g            49 x
            16 Q            33 h            50 y
    

    三. 图片在线Base64编解码

    http://tool.chinaz.com/tools/imgtobase
    在这里插入图片描述
    左边的识别码图片,经过Base64编码后,变成一个长长的字符串

    四. Unity中如何显示Base64图片

    通过Base64图片的字符串,转成Texture2D,即可用于显示

        public Texture2D Base64StringToTexture(string base64Str)
        {
            try
            {
                //将base64头部信息替换
                base64Str = base64Str.Replace("data:image/png;base64,", "").Replace("data:image/jgp;base64,", "")
                    .Replace("data:image/jpg;base64,", "").Replace("data:image/jpeg;base64,", "");
                byte[] bytes = Convert.FromBase64String(base64Str);
                Texture2D texture = new Texture2D(10, 10);
                texture.LoadImage(bytes);
                return texture;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
    

    如果想把图片的二进制流转成Base64字符串

    string base64Str = Convert.ToBase64String(bytes);
    
    展开全文
  • base64格式图片数据转为图片格式

    千次阅读 2020-07-18 16:23:40
    import { pathToBase64, base64ToPath } from 'image-tools' 3、调用方法 pathToBase64 pathToBase64(path) .then(base64 => { console.log(base64) }) .catch(error => { console.error(error) ...
  • 文章目录base64编码规则ASCII转base64编码三个ASCII字符转换不足三个ASCII字符转换base64应用Java实现图像数据base64的编解码C++实现图像数据base64的编解码 base64编码规则 base64中6个bit为一个单元,对应某个...
  • package com.nc.test; import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream;...import java.io.OutputStream;...import sun.misc.BASE64Deco...
  • 通过base64编码原理我们知道,base64图片字符流中的每8个字符就有两个是用0补充,而且字符流的末尾还可能存在‘=’号,我们可以通过这个原理计算图片的文件流大小。 getImgByteSize(data) { if (data....
  • C# 将图片转换成base64 数据

    千次阅读 2018-08-23 21:55:25
    //将图片转换成base64 数据  FileStream fs = File.OpenRead("C:\\20180822\\161940.jpg"); //OpenRead  int filelength = 0;  filelength = (int)fs.Length; //获得文件长度   Byte...
  • 图片Base64数据转换存储

    千次阅读 2017-08-16 10:21:21
    public static void main(String[] args) { // 测试从Base64编码转换为图片文件 String strImg = "iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAFMQAABTEBt+0oUgAAABl0RVh0U
  • C语言base64编解码图片

    千次阅读 2018-09-21 17:26:11
    打印编码后base64编码字符串 解码字符串 写入文件验证 测试可修改图片路径既可。 编解码code来自: https://blog.csdn.net/jingda3100/article/details/78296740 本文仅为方便以后使用,收集记录。 #inclu...
  • js html java servlet 前台接收base64数据后台转图片保存上传 全套代码 直接可以用
  • 图片Base64编码 base64编码转图片

    千次阅读 2017-09-23 21:36:37
    这两天给手机写了几个服务(接口形式),其他数据还好,图片实在没处理过,这里记录下使用base64编码遇到的坑。。。。 1、图片base64编码: public static String getImageStr(String imgUrl) {//将图片文件...
  • base64格式的图片数据如何转成图片

    千次阅读 2018-09-04 20:29:00
    base64格式的图片数据如何转成图片 一、总结 一句话总结:不仅要去掉前面的格式串,还需要base64_decode()解码才行。 1 // $base_img是获取到前端传递的值 2 $base_img = str_replace('data:image/jpg;...
  • Base64图片

    2020-08-26 15:44:00
    编码与解码演进史早期版本Apache Commons Codec做法Java8总结Java8的Base64编码解码的3种方式:Basic、Mine、UrlBase64与MD5的相同点与不同点图片Base64什么是图片Base64为什么使用Base64编码应用场景Java的图片...
  • 引入base64格式数据 显示图片 >

    万次阅读 2017-05-22 17:45:23
    看到公司项目里用 base64 传输数据到页面!  其中 jsp这么写的:        抱歉,没有图片可以显示。           学到一种 新的方式呵呵 ,下面还有注解:   image/png是数据类型名称,base...
  • html页面2种 设置控件值的方式http uri scheme , data uri scheme 如下面 浏览器会缓存http资源,多个标签使用同一个地址,直接读缓存的数据数据不会缓存,多个标签使用同一个数据,会解析,增加页面解析时间 ...
  • C# Base64图片编码和解码

    千次阅读 2019-03-12 09:28:37
    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。可查看RFC2045~RFC2049,上面有MIME的详细规范。 Base64编码是从二进制到字符的过程,可...
  • Base64图片

    千次阅读 2019-02-28 12:57:23
    Base64编码与图片互转 /** * * 版权所有:2016 项目名称:ImgeBase64 * * 类描述:将图片转化为Base64字符串 类名称:cn.sanishan.util.Base64Img * * @version V1.0 */ public class Base64Img { // 将图片...
  • Base64编码解码C语言实现

    千次阅读 2014-06-28 15:52:19
    Base64编码基本上理解为:将二进制数据转变为可见的ASCII码字符串(反之亦然)。这个很有用,比如向数据库里面写东西,如果是二进制(如图片)的话,转变成字符串就会很方便的存入。 该编码的好处是:速度快,...
  • 解码Base64并展示图片

    万次阅读 2017-10-17 14:23:18
    Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法。 Base64编码是从二进制到字符的过程,可用于在HTTP环境下传递较长的标识信息。 例如,在Java ...
  • 1.base64图片并保存在路径目录下 public static String base64ToImg(String img, String operateId){ BASE64Decoder decoder = new BASE64Decoder(); //Base64解码 byte[] b = new byte[0]; ...
  • base64生成图片——图片转换变成base64 如题。 下面上货。 package com.xueyou.demo; import org.apache.commons.lang3.StringUtils; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import ...
  • C++ Base64图片&&图片Base64

    千次阅读 热门讨论 2019-05-20 11:06:42
    Base64的由来 目前Base64已经成为网络上常见的传输8Bit字节代码的编码方式之一。在做支付系统时,系统之间的报文交互都需要使用Base64对明文进行转码,然后再进行签名或加密,之后再进行(或再次Base64)传输。那么...
  • qt 将图片转换为base64格式数据

    千次阅读 2018-12-12 15:08:33
     QImage image(QString::fromLocal8Bit(iter-&...filePath.c_str()));  QByteArray ba;  QBuffer buf(&amp;ba);  image.save(&amp;buf, "jpg");  QByteArray hexed = ...
  • base64-图片传输

    万次阅读 多人点赞 2018-09-09 23:42:44
    大家看标题就知道,但是我也只是作为一个新人的视角去认识这个base64,大概了解了一下,没有太深入,因为前段有很好的base64工具,java也有BASE64Decoder包,所以我就以一个如何使用的角度来总结一下。 说来惭愧,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 77,955
精华内容 31,182
关键字:

base64图片数据c