Path: csiph.com!2.us.feeder.erje.net!feeder.erje.net!1.eu.feeder.erje.net!weretis.net!feeder4.news.weretis.net!news.roellig-ltd.de!open-news-network.org!news.alphanet.ch!alphanet.ch!.POSTED!not-for-mail
From: =?UTF-8?Q?Une_B=c3=a9vue?= <unbewusst.sein@fai.invalid>
Newsgroups: comp.lang.javascript
Subject: [Canvas] extracted cropped image is not a correct size
Date: Mon, 13 Feb 2017 10:31:53 +0100
Organization: Posted through ALPHANET (http://www.alphanet.ch/)
Lines: 35
Sender: unbewusstsein@vbo91-4-88-164-253-93.fbx.proxad.net
Message-ID: <o7rue9$96u$1@shakotay.alphanet.ch>
NNTP-Posting-Host: vbo91-4-88-164-253-93.fbx.proxad.net
Mime-Version: 1.0
Content-Type: text/plain; charset=utf-8; format=flowed
Content-Transfer-Encoding: 7bit
X-Trace: shakotay.alphanet.ch 1486978313 9438 88.164.253.93 (13 Feb 2017 09:31:53 GMT)
X-Complaints-To: usenet@alphanet.ch
NNTP-Posting-Date: Mon, 13 Feb 2017 09:31:53 +0000 (UTC)
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:45.0) Gecko/20100101 Thunderbird/45.7.1
X-Mozilla-News-Host: news://news.alphanet.ch:119
Xref: csiph.com comp.lang.javascript:32618

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 ???