Criando arquivo de Imagem do canvas e submetendo no form

[Rafael Castelhano 0]

Bom dia,

estou quebrando a cabeça já alguns dias com um problema, estou usando a lib cropper.js para cortar e fazer pequenas edições numa imagem, e ao salvar quero adicionar a imagem editada num input file que será submetido juntamente com o form.

 

Aparentemente a imagem e corretamente criada e carregada no input, porém no servidor (python/django) está gerando excessão informando que a imagem não é válida ou está corrompida, se eu carrego a mesma imagem gerada manualmente (exporto para disco e carrego novamente) o registro é salvo sem problemas.

 

// Gerando a imagem e carregando no input
let croppedCanvas = this.cropper.getCroppedCanvas();
let data = croppedCanvas.toDataURL();
let file = new File([data], 'foto.png',{type:"image/png", lastModified: new Date().getTime()});
let container = new DataTransfer();
container.items.add(file);
this.inputTarget.files = container.files;

Existe alguma configuração adicional ao criar o File? 

 

Se alguem pudar ajudar agradeço.

[Omar~ 87]

Me parece que a API DataTransfer não servirá para essa finalidade.

Acredito que croppedCanvas.toDataURL() seja um base64 da imagem cortada.

Verifique no console do navegador usando:

console.log( croppedCanvas.toDataURL() );

Se for então adicione esse código ao valor de um textarea, esse textarea você o mantém escondido no form, então no back-end você usa a informação do textarea para criar uma imagem.

É esse método que uso para salvar imagens usando meu script para corte de imagens: https://github.com/Spell-Master/sm-web/tree/master/javascript/ImageCut