VUE Base64编码图片展示与转换图片

图片的 base64 编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,使用 base64 传输图片文件可以节省一个 http 请求,图片的 base64 编码可以算是前端优化的一环

VUE Base64编码图片展示

<img :src="icon">

export default {
   data() {
      icon: 'data:image/png;base64,,XXXXX...',
   }
}

图片在线转换Base64:http://imgbase64.duoshitong.com/

Base64编码图片转换图片

base64ImgtoFile(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
},

// base64编码的图片
var base64Img = 'data:image/png;base64,XXXXX...';
//转换图片文件
var imgFile = this.base64ImgtoFile(base64Img); 

更便捷的图片转化Base64编码方式

利用 Chrome 浏览器,在 chrome 下新建一个窗口,然后把要转化的图片直接拖入浏览器,打开控制台,点 Source,如下图所示,点击图片,右侧就会显示该图片的 base64 编码

原文地址:https://www.cnblogs.com/maggieq8324/p/11577697.html

时间: 2024-10-16 21:32:21

VUE Base64编码图片展示与转换图片的相关文章

android Java BASE64编码和解码二:图片的编码和解码

1.准备工作 (1)在项目中集成 Base64 代码,集成方法见第一篇博文:android Java BASE64编码和解码一:基础 (2)添加 ImgHelper 工具类 package com.app21; import java.io.ByteArrayOutputStream; import java.io.FileInputStream; import java.io.IOException; import android.graphics.Bitmap; import android

强大的图片展示插件,JQuery图片预览展示插件

只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js&qu

java中图片文件和base64编码的转换

在线图片转base64编码 import javax.imageio.ImageIO; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.net.URL; import com.sun.org.apache.xerces.internal.impl.dv.util.Base64; /** * 下载图片并转换成base6

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;

简述BASE64编码的作用以及C#中对其的支持

分析问题 和传统的编码不同,BASE64编码的设计致力于混淆那些8位字节的数据流.在网络传输.邮件等系统中,BASE64的编码方式被广泛的应用.BASE64不属于机密机制,但它确实把明码编程了一种很难识别的形式. 注意 BASE64的算法十分简单,BASE64把所有的位分开,并且重新组合成字节,新的字节只包含6位,最后再在每个字节前添加两个0,组成新的字节数组.例如一个字节数组包含3个字节,BASE64编码时将把其分配到4个新的字节中(3*8/6=4),其中每个字节只填充低6位,最后把高2位置0

base64编码加密图片和展示图片

base64是当前网络上最为常见的传输8Bit字节代码的编码方式其中之一.base64主要不是加密,它主要的用途是把某些二进制数转成普通字符用于 网络传输.由于这些二进制字符在传输协议中属于控制字符,不能直接传送,所以需要转换一下.虽然图片可能直接传输,但是我们也可以将它变成字符串直接放在 源码里,而不需要浏览器在读取到源码后再从服务器上下载.如何对图片进行base64编码 <?php $file = "./image/index.png"; $type = getimagesi

C# 字节流通过Base64编码转换成图片代码

C# 字节流通过Base64编码转换成图片代码 // 需载入以下的命名空间 // using System.IO; // using System.Drawing; // using System.Runtime.Serialization.Formatters.Binary; protected void Page_Load(object sender, EventArgs e) { byte[] buffer = ReadFile(Server.MapPath(@"\sex.txt"

图片和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 (*.*)|*.*";