base64编码成功后并在页面上显示出想要展现的图片张数

Posted 2020-12-14 syj1205

 首先准备一个容器div将想要显示的图片放在其中；

1 <div style="width: 256px;height: 410px;">
2     <div style="width: 100%;height: 100%; " id="ImgBox">
3         <!-- img将要显示的图片 -->
4     </div>
5 </div>

base64编码成功后，可将base64编码进行如下操作；且arr.length是你想要显示在页面上图片的个数；

　//创建一个空数组

　var arr = [];

var ImgBox = document.getElementById(‘ImgBox‘)
//arr.length 数组的长度
if (arr.length > 0) {
　　//删除数组中的图片
    arr.shift()
　　　//增加图片
    arr.push(str)
    //删除第一张图片
    var imgs = document.getElementsByClassName(‘sameImg‘)
    imgs[0].remove();
    var img = document.createElement(‘img‘)
    img.className = "sameImg"
　　//data:;base64加上base64转码后str 即可形成照片路径 img.src
    img.src = "data:;base64," + arr[0]
    ImgBox.appendChild(img)
} else {
    arr.push(str)
    var img = document.createElement(‘img‘)
    img.className = "sameImg"
    for (let i = 0; i < arr.length; i++) {
    img.src = "data:;base64," + arr[i];
}
ImgBox.appendChild(img)
}