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


Groups > comp.lang.javascript > #32618

[Canvas] extracted cropped image is not a correct size

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 Une Bévue <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> (permalink)
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

Show key headers only | View raw


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

Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread


Thread

[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

csiph-web