javascript - createObjectURL() 不生成适当的图像 URL

Question

我正在使用 JavaScript 生成图像 URL。当我打开生成的 url 时，图像只是一个黑色背景的小矩形，这根本不是我想要的图像。因此，我不确定问题出在哪里。

我从后端的回应是：

文件名=图像名称，图像数据=base64Image，dataUrl=“数据：图像/gif；base64，”+ base64Image

str.split(':').pop().split(';')[0];-> 这一行等于 image/gif

 axios.post('/convert/image', fd, {'Content-Type' : 'multipart/form-data'})
           .then (res => {
            // decoded = base64.decodebytes(res.data.imageData);
            // console.log(decoded);
            var encodedString = btoa(res.data.imageData);
            // console.log(encodedString);
            var decodedData = window.atob(encodedString);
            var byteNumbers = new Array(decodedData.length);
            for (var i = 0; i < decodedData.length; i++) {
              byteNumbers[i] = decodedData.charCodeAt(i);
            }
            var byteArray = new Uint8Array(byteNumbers);
            var str = res.data.dataUrl;
            var type = str.split(':').pop().split(';')[0];
            var blob = new Blob([JSON.stringify(byteArray)], {type: type});
            console.log(blob);


            var e = document.createEvent('MouseEvents'),
            a = document.createElement('a');
            a.download = 'download';
            var urlCreator = window.URL || window.webkitURL;
          
            a.href = urlCreator.createObjectURL(blob);
            a.dataset.downloadurl = [type, a.download, a.href].join(':');
            
            console.log(a.dataset.downloadurl);
            e.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);


            urlCreator.revokeObjectURL(a.href);
      });

标签： javascriptblobimageurl