Tengo un sistemita chiquito, en el cual hay un elemento video en el cual podes tomar una foto. Esa "captura" se muestra en un elemento "canvas" que esta al lado. Ambos con iguales dimensiones ( width: 320px;height: 240px;) .
Ahora viene el tema, cuando lo descargo las dimensiones cambian, y me lo descarga en '300x150' . No puedo lograr cambiar esas dimensiones en la descarga.
Les muestro el código...
Código HTML:
<div class="span4"> <video ng-if="mostrarCamara && editando" controls id="my_video" width="320px;" height="240px;" autoplay/> </div> <div class="span4"> <canvas ng-if="mostrarCamara && editando" style="width: 320px;height: 240px;margin-left: 20px;" id="canvas"> </canvas></div> <div class="span4"> <a ng-if="mostrarCamara" class="btn btn-success " style="margin-left:20px;" ng-click="tomarFoto()"><i class="icon-camera"></i> Tomar foto </a> <a ng-if="mostrarCamara" class="btn btn-info" ng-click="guardarFotoComoPerfil()"><i class="icon-save"></i> Guardar foto</a> <a id="download" ng-click="SaveToDisk(imagenLoca, 'imagen.png')" ng-if="mostrarCamara" class="btn btn-inverse"><i class="icon-download"></i> Descargar foto</a> </div>
Código:
También, intente 'tratar' de forzar las dimensiones. Pasandolo a un objeto Image, y cambiandole desde el mismo las dimensiones, pero todo sigue igual. Cuando lo descarga, sale 300x150$scope.descargarFoto = function() { downloadCanvas(document.getElementById('download'), 'canvas', 'test.png'); }; function downloadCanvas(link, canvasId, filename) { link.href = document.getElementById(canvasId).toDataURL(); link.download = filename; }
¿ Alguién tiene idea?
Gracias!