Извлечение изображений из JsZip с правильным типом содержимого

Я пытаюсь извлечь png из zip-файла для загрузки на сервер. Моя проблема в том, что большие двоичные объекты, которые я загружаю, имеют неправильный тип содержимого, поэтому сервер отклоняет их.

Может ли кто-нибудь сказать мне, как изменить тип содержимого в большом двоичном объекте или извлечь файлы в виде изображений

Вот как я их извлекаю

  JSZip.loadAsync(file)
  .then(function (zip) {
    const re = /(.jpg|.png|.gif|.ps|.jpeg)$/
    const dataFile = /(.json)$/
    const promises = Object.keys(zip.files).filter(function (fileName) {
      return re.test(fileName.toLowerCase())
    }).map(function (fileName) {
      const file = zip.files[fileName]
      return file.async('blob').then(function (blob) {
        return [
          fileName,
          URL.createObjectURL(blob),
        ]
      })
    })

    const jsonPromise = Object.keys(zip.files).filter(function (fileName) {
      return dataFile.test(fileName.toLowerCase())
    }).map(function (fileName) {

      const file = zip.files[fileName]

      return file.async('string').then(function (data) {
        return [
          'data',
          data,
        ]
      })
    })
    promises.push(jsonPromise[0])
    return Promise.all(promises)
  }).then(function (result) {
    return result.reduce(function (acc, val) {
      acc[val[0]] = val[1]
      return acc
    }, {})
  }).then((result)=>{

    const object = JSON.parse(result.data)
    for(let i in object.images)
      object.images[i].url = result[object.images[i].name]

    resolve(object)

  }).catch((err)=>{reject(err)})

})

Затем я получаю URL-адрес большого двоичного объекта и пытаюсь загрузить его.

 fetch(blobURL).then(res => res.blob()).then((blob)=>{

  blob.lastModifiedDate = new Date()
  blob.name = 'model_' + id + '_' +  uuidv1()  + '.png'

Но этот блоб имеет тип содержимого «обычный/текст», когда он должен быть в формате png.


javascript blob jszip
person beek    schedule 14.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нарисовал каплю в изображение, преобразовал его в холст и загрузил это ... кажется неэлегантным решением, хотя

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

const img = new Image()

img.onload = function () {
  canvas.width = this.naturalWidth     // update canvas size to match image
  canvas.height = this.naturalHeight
  ctx.drawImage(this, 0, 0)
  uploadFromCanvas(canvas,hotspot).then(resolve)
}
img.src = blobURL

})

person beek    schedule 14.06.2018