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

Show all headers | 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