Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #32618 > unrolled thread

[Canvas] extracted cropped image is not a correct size

Back to article view | Back to comp.lang.javascript

Contents

  [Canvas] extracted cropped image is not a correct size Une Bévue <unbewusst.sein@fai.invalid> - 2017-02-13 10:31 +0100
    Solved: [Canvas] extracted cropped image is not a correct size Une Bévue <unbewusst.sein@fai.invalid> - 2017-02-13 11:17 +0100

#32618 — [Canvas] extracted cropped image is not a correct size

I have a canvas of 400x400 pixels^2 and i extract from it a 96x96 
pixels^2 avatar like this :

   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());
     };
   }

the dataURL obtained by "this.state.canvas.toDataURL()" is of correct 
size (400x400).

however extracting the 96x96 one (ie. canvas.toDataURL())

If i print those dataURL into an image file (named image.html) like that :

<img src=<value of dataURL> alt="" />

Firefox Dev Ed says it is of 400x400 pixels but only shows a 96x96 avatar.

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

By the way, why the image is of 400x400 Firefox shows also a 
444.444x444.444 value ???

[toc] | [next] | [standalone]

#32619 — Solved: [Canvas] extracted cropped image is not a correct size

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

changing that to :
   canvas.width  = 96;
   canvas.height = 96;

gave me a 96x96 image :
<http://www.cjoint.com/doc/17_02/GBnkmNYekxX_17-02-13-11-08-32-inferno-avatar-cropper-test-on-mbp.png>

however, Firefox Dev Ed, always represent it as a 107x107 one ...
<http://www.cjoint.com/doc/17_02/GBnkqAz7M1X_17-02-13-11-09-35-inferno-avatar-cropper-test-mesure-on-mbp.png>

why ?

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web