Image.onload ne fonctionne pas pour les images .jpg changé en .png

Question

Je travaille sur une application Cordova windows10 où je capture des images comme 'jpg' en utilisant (navigator.camera.getPicture(resolve, reject, {...encodingType: 0,...}), déplacez-le à un autre emplacement en changeant l'extension en '.png 'et essaie actuellement de le redimensionner. Cependant, lorsque j'essaie de charger l'image, celle-ci ne charge pas mais lance DOM7009: Unable to decode image at url: '.../myimage.png' to MIME 'image/png'.

Cela fonctionne parfaitement si l'image a été capturée comme '.png' mais pas si l'image était à l'origine un '.jpeg' et l'extension a été changée en '.png'. Je fais les choses suivantes avant d'essayer de charger l'image.

let canvas = document.createElement('canvas'); 
 
let ctx = canvas.getContext('2d'); 
 
let image = new Image(); 
 
image.src = fileSystemPath + imageName // I get : ms-appdata:///local/randomgeneratedID.png 
 

 
image.onload = function() { 
 
    ... 
 
    ctx.drawImage(image, 0, 0, myHeight, myWidth); 
 
    callback(canvas.toDataURL("image/png", 0.9)) 
 
    ... 
 
}

Le problème est que l'image ne se charge pas du tout. Je console.logged juste à l'intérieur de la fonction image.onload et il n'apparaît pas. Je ne sais pas pourquoi il charge le fichier '.png' mais pas le fichier '.jpg' renommé '.png'.

Answer 1

Le problème est que l'image ne se charge pas du tout. Je console.logged juste à l'intérieur de la fonction image.onload et il ne montre pas.

Je suppose que votre .png image est assez lourd:

Il fonctionne parfaitement lorsque l'image est capturée comme '.png'

alors que votre nouveau . png (ex-jpeg) l'image est de poids léger:

déplacez-le vers un autre emplacement en changeant l'extension '.png' et redimensionnez-la en miniature.

ce qui serait arrivé il y a que vous premier définir img.src à une valeur - et la charge réelle commence juste en ce moment, mais le gestionnaire est plus tard. Donc, si une image est assez petite/mise en cache (vous avez écrit les redimensionner), elle peut être téléchargée avant même que le gestionnaire ne soit assigné. Essayez de le faire de cette façon:

image.onload = function() // handler first 
image.src = fileSystemPath + imageName // loading next 

Espérons que c'est une information utile. Même si votre problème n'est pas celui dont j'ai parlé, ce que j'ai écrit reste valable pour votre code.