Blob возвращает пустое изображение, как решить?

Question

[Дмитрий Марков]

Есть такой код

parent.querySelectorAll('.gallery-uploads-imgs__item').forEach(element => {
					var img = new Image;
					img.src = element.dataset.src
					document.body.append(img)



					let canvas = document.createElement('canvas')
					let context = canvas.getContext('2d');
					canvas.width = img.clientWidth
					canvas.height = img.clientHeight


					img.onload = function() {
						context.drawImage(img, 0,0);
						img.remove()
					}


					canvas.toBlob(function(blob) {
						let uploadImageUrl = URL.createObjectURL(blob);

						data.blobs.push( uploadImageUrl )

					}, 'image/png');
					
				})

uploadImageUrl получает путь до пустого изображение.
Что может быть не так?

Comments

[dollar]

Если вы нашли парадокс, то сведите его к 3-5 строчкам. Зачем всю кухню сюда пихать?

[RAX7]

img.onload = function() {
  canvas.width = img.clientWidth;
  canvas.height = img.clientHeight;
  context.drawImage(img, 0, 0);
  img.remove();
}

Answer 1

[Дмитрий Беляев]

Отрисовка на канвасе идет после загрузки изображения
А запрос на извлечение блоба идет до загрузки изображения и следовательно до отрисовки его на канвасе

parent.querySelectorAll('.gallery-uploads-imgs__item').forEach(element => {
          var img = new Image;
          img.src = element.dataset.src
          document.body.append(img)



          let canvas = document.createElement('canvas')
          let context = canvas.getContext('2d');
          canvas.width = img.clientWidth
          canvas.height = img.clientHeight


          img.onload = function() {
            context.drawImage(img, 0,0);
            img.remove();
            canvas.toBlob(function(blob) {
              let uploadImageUrl = URL.createObjectURL(blob);

              data.blobs.push( uploadImageUrl )

            }, 'image/png');
          }    
        })

P.S. вангую следующий вопрос будет в стиле data.blobs пустой...

Comments

[Дмитрий Марков]

Теперь через раз картинки появляются)

[Дмитрий Марков]

Ещё не подскажешь?
Если я выведу URL.createObjectURL(file) , то получаю нормальную картинку.
А вот если я запихаю её в блоб

let blob = new Blob([URL.createObjectURL(file)], {type: "image/png"}),

то картинка куда то пропадает

[Дмитрий Марков]

input.addEventListener('change', function(event) {
	Array.prototype.slice.call( this.files ).forEach(function(elem, indx) {
		let uploadImageUrl = URL.createObjectURL(elem)
		let blob = new Blob([uploadImageUrl], {type: "image/png"})
		console.log( blob )

		if( replaceImage ) {
			obj[input.id][0] = blob
			data.canvas[input.id] = ''
		} else {
			obj[input.id].push(blob)
		}
	}.bind(this))
	data.inputs = obj
})

код

[Дмитрий Марков]

Разобрался, спасибо)