html 在web上显示base64图像，显示图像的tempory url

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 在web上显示base64图像，显示图像的tempory url相关的知识，希望对你有一定的参考价值。

<html>
<body>
</body>
<script>
function b64toBlob(b64Data, contentType, sliceSize) {
  contentType = contentType || '';
  sliceSize = sliceSize || 512;

  var byteCharacters = atob(b64Data);
  var byteArrays = [];

  for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);

    var byteNumbers = new Array(slice.length);
    for (var i = 0; i < slice.length; i++) {
      byteNumbers[i] = slice.charCodeAt(i);
    }

    var byteArray = new Uint8Array(byteNumbers);

    byteArrays.push(byteArray);
  }
    
  var blob = new Blob(byteArrays, {type: contentType});
  return blob;
}


var contentType = 'image/png';
var b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

var blob = b64toBlob(b64Data, contentType);
var blobUrl = URL.createObjectURL(blob);
console.log(blobUrl);

var img = document.createElement('img');
img.src = blobUrl;
document.body.appendChild(img);
</script>
</html>

以上是关于html 在web上显示base64图像，显示图像的tempory url的主要内容，如果未能解决你的问题，请参考以下文章

用 Java 编码的 Base64 图像不显示在 HTML 中

HTML：Base64 图像显示/复制高度错误

如何在浏览器上显示 Base64 图像

Base64 / SVG HTML 图像不显示

如何在 Angular 6 中显示以 base64 格式编码的图像？

使用Image header() & readfile()在PHP页面上显示一个Base64图像。