Base64转图片与图片转Base64

最新推荐文章于 2024-05-31 09:05:13 发布

好诡异

最新推荐文章于 2024-05-31 09:05:13 发布

阅读量6.5k

点赞数 5

本文链接：https://blog.csdn.net/lovely960823/article/details/108709411

版权

在工作中可能会遇到base64与图片的相互转化。
图片转base64

String file="D://picpath//video//test.png"
InputStream in = null;
byte[] data = null;
// 读取图片字节数组
try {
   in = new FileInputStream(file);
   data = new byte[in.available()];
   in.read(data);
   in.close();
} catch (IOException e) {
   e.printStackTrace();
}
Base64.getEncoder().encode(data);
//img就是你前台图片的src，放上去就可显示对应图片
String img ="data:image/png;base64,"+new String(Base64.getEncoder().encode(data));

base64转图片

//base64太长了 就不弄全了
String s1="data:image/png;base64,iVBORw0KGgoAAAANSU......"
FileOutputStream write = new FileOutputStream(new File("D:/picpath/te111.png"));
byte[] decoderBytes = Base64.getDecoder().decode(s1.split(",")[1]);
write.write(decoderBytes);
write.close();

这里顺便说一下 base64太长后台接收为null的问题。
我使用裁剪图片后会产生一个base64，使用ajax传给后台，后台来接收去使用的时候有时候会接收为空，这个时候可能就是由于太长的问题导致的，我分享一下我的解决方案。
把该属性封装在form表单里面，以序列化的形式提交，同时限制图片的大小，我本人目前能使用的是3M以内的都可，这个舒服附属，大家有更好的解决方案可以告诉我

附加一个js将img转base64的方法

在这里插入图片描述

<body>
 <img alt="" src="${menu.img }" style="width: 100px;">
</body>
<script>
// 获取要装换的地址
var img = '${menu.img }';
// 图片地址转base64的方法
function getBase64Image(img) {
  var canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  var ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0, img.width, img.height)
  var ext = img.src.substring(img.src.lastIndexOf('.') + 1).toLowerCase()
  var dataURL = canvas.toDataURL('image/' + ext)
  return dataURL
}
var image = new Image()
image.src = img;
// 解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on
//  'HTMLCanvasElement': Tainted canvases may not be exported
image.onload = function () {
  var base64 = getBase64Image(image)
  console.log(base64)
}
</script>

好诡异

关注

5
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
Base64转图片与图片转Base64

在工作中可能会遇到base64与图片的相互转化。图片转base64String file="D://picpath//video//test.png"InputStream in = null; byte[] data = null; // 读取图片字节数组 try { in = new FileInputStream(file); data = new byte[in.available()];
复制链接

扫一扫