Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

[Canvas] l'image extraite n'a pas la taille espérée...

1 réponse
Avatar
Une Bévue
J'ai un canvas de 400x400 pixels^2 et j'en extrait un avatar de 96x96 de
cette manière :

handleSaveDataURL (event) {
console.log(`${window.consoleDate()} - AvatarCropper ::
handleSaveDataURL (event)`);
let self = this;
let buf = new Image();
buf.src = this.state.canvas.toDataURL();
buf.onload = function() {
let canvas = document.createElement('canvas');
canvas.width = 400;
canvas.height = 400;
let ctx = canvas.getContext('2d');
ctx.drawImage(this, 0, 0, 400, 400, 0, 0, 96, 96);
self.props.saveDataURL(canvas.toDataURL());
};
}

les dataURL obtenues par "this.state.canvas.toDataURL()" sont OK elles
font bien 400x400.

par contre quand j'exxtrais l'avatar de 96x96 par canvas.toDataURL(),

si je visualise le résultat par le biais d'un fichier html de contenu :

<img src=<la valeur de dataURL> alt="" />

Firefox Dev Ed me dit que l'image fait 400x400 pixels mais montre
seulment un avatar de 96x96.

Caputre écran :
<http://www.cjoint.com/doc/17_02/GBnjEFG6PmX_17-02-13-10-28-24-inferno-avatar-cropper-test-on-mbp.png>

Aussi je ne comprends pas pourquoi firefox donne deux dimensions :
400x400 et
444.444x444.444

???

1 réponse

Avatar
Une Bévue
Le 13/02/2017 à 10:31, Une Bévue a écrit :
canvas.width = 400;
canvas.height = 400;

en changeant ça en :
canvas.width = 96;
canvas.height = 96;
j'obtiens bien une image de 96x96 :
<http://www.cjoint.com/doc/17_02/GBnkmNYekxX_17-02-13-11-08-32-inferno-avatar-cropper-test-on-mbp.png&gt;
par contre, Firefox Dev Ed, la représente comme une image de 107x107 :
<http://www.cjoint.com/doc/17_02/GBnkqAz7M1X_17-02-13-11-09-35-inferno-avatar-cropper-test-mesure-on-mbp.png&gt;
Pourquoi ?