javascript - C# MVC site - saving canvas to an image file on the server - image is being cropped -

i'm creating admin system user(admin) can create users. system requires user have photograph.

i've implemented file upload trying provide option use webcam take image , use that.

i've pretty got working except image manage save on server cropped @ bottom.

i assumed size of canvas/video elements have used. tried hard code larger sizes had no effect.

in ui image captured video element , displayed on canvas want be. i've added text box that's bound model can pass canvas text server.

here's code:

<video id='v' class="employee-image-display"></video> @html.textboxfor(m => m.webcamimagedata, new { id = "tbwebcamimage" }) <a class="btn btn-block red" id="btntakephoto">     <i class="fa fa-camera"></i> </a> <canvas id="canvas"></canvas> 

javascript:

function takephoto() {      var canvas = $('#canvas')[0];     //set canvas width/height     canvas.width = 600;//v.videowidth;     canvas.height = 600;//v.videoheight;      canvas.getcontext('2d').drawimage(v, 0, 0, 600, 600, 0, 0, 600, 600);      //get image data canvas     var imgdata = canvas.todataurl("img/png");     imgdata = imgdata.replace(/^data:image\/(png|jpg);base64,/, "");       $('#tbwebcamimage').val(imgdata);  }  function startwebcam() {     navigator.getusermedia = (navigator.getusermedia ||                   navigator.webkitgetusermedia ||                   navigator.mozgetusermedia ||                   navigator.msgetusermedia);     if (navigator.getusermedia) {         navigator.getusermedia(            {                video: true,                audio: false            },  function (stream) {      var url = window.url || window.webkiturl;      v.src = url ? url.createobjecturl(stream) : stream;      v.play();  },  function (error) {      alert('something went wrong. (error code ' + error.code + ')');      return;  }         );     }     else {         alert('sorry, browser using doesn\'t support getusermedia');         return;     } }  $(document).ready(function () {      $('#btntakephoto').on('click', function () {         takephoto();     });     startwebcam(); }); 

controller action:

if (!string.isnullorwhitespace(model.webcamimagedata)) {     using (var stream = new memorystream())     {         using (var writer = new binarywriter(stream))         {             writer.write(bytes);             stream.seek(0, seekorigin.begin);              string filepath = "~/content/images/employees/test.png";              system.io.file.writeallbytes(server.mappath(filepath), bytes);         }     }  } 

as can see - image cropped (you should able see chest in image below). here ui looks when click "take photo" button:

as can see - not cropped.

can tell me why image being cropped? - error client or server side?

which browser using?

try following set video , canvas dimensions correctly.

var v = document.getelementbyid('v'); var c = document.getelementbyid('c'); var canvaswidth = 600; var canvasheight = 600;  // wait until video stream can play v.addeventlistener('canplay', function (e) {     if (!isstreaming) {         // videowidth isn't set correctly in browsers         if (v.videowidth > 0) {             canvasheight = v.videoheight / (v.videowidth / canvaswidth)         }         v.setattribute('width', canvaswidth);         v.setattribute('height', canvasheight);         c.setattribute('width', canvaswidth);         c.setattribute('height', canvasheight);         isstreaming = true;     } }, false); 

also make code more cross browser friendly...

// cross browser navigator.getusermedia = (navigator.getusermedia || navigator.webkitgetusermedia || navigator.mozgetusermedia || navigator.msgetusermedia);  if (navigator.getusermedia) {     // request access video     navigator.getusermedia(                 {                     video: true,                     audio: false                 },                 function (stream) {                     // cross browser checks                     var url = window.url || window.webkiturl;                     v.src = url ? url.createobjecturl(stream) : stream;                     // set video play                     v.play();                 },                 function (error) {                     alert('something went wrong. (error code ' + error.code + ')');                 }     ); } else {         alert('sorry, browser using isn\'t supported.');         return;      } 

edit: context try following:

var con = c.getcontext('2d'); con.drawimage(v, 0, 0, canvaswidth, canvasheight);