createObjectURL () не генерирует соответствующий URL изображения - PullRequest
Новая
       23

createObjectURL () не генерирует соответствующий URL изображения

0 голосов
/ 28 ноября 2018

Я использую JavaScript для создания URL изображения.Когда я открыл сгенерированный URL-адрес, изображение представляет собой небольшой прямоугольник с черным фоном, который совсем не тот, который мне нужен.Следовательно, я не уверен, где проблема.

Мой ответ от бэкэнда:

filename = imageName, imageData = base64Image, dataUrl = "data: image / 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);
      });
...