title: How to resize canvas image(base64) using jQuery without losing quality?
body: <p>Currently, i'm trying to take snapshot from  <code>&lt;video&gt;</code> , the preview res is 320*420. I want to double the res so the result will bigger . When try to resize, the result is blurry. Is there any library should i implement?</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;style&gt;
  #videoframe{
     border: 10px solid black;
     height:320px;
     margin-bottom:20px; 
     width:420px;
     padding:0;
     overflow:hidden;
     position:relative;
  }
  &lt;/style&gt;
  
  &lt;div class=&quot;col-lg-6&quot; id=&quot;videoframe&quot;&gt;
            &lt;video style=&quot;margin:0;width: 100%; height:100%;&quot; id=&quot;player&quot; webkit-playsinline=&quot;true&quot; autoplay playsinline&gt;
             &lt;/video&gt;
     &lt;/div&gt; 
     &lt;canvas id=&quot;c&quot; width=&quot;320&quot;height=&quot;420&quot; &gt;&lt;/canvas&gt;
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>function imageToDataUri(img, width, height) {
  
      var canvas = document.createElement('canvas'),
          ctx = canvas.getContext('2d');
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
  
      return canvas.toDataURL('image/png', 1.0);
  }
  $(&quot;#btnCapture&quot;).click(function () {  
          videoPlayer.pause();
          
          var canvas = document.getElementById(&quot;c&quot;)
          var ctx = canvas.getContext('2d');
          ctx.drawImage(videoPlayer, 0,0 ,320, 420);
          image = canvas.toDataURL('image/png',1.0);
  
          //Resize
          var img = new Image;
          img.onload = resizeImage;
          img.src = image;
  
          function resizeImage() {
              var newDataUri = imageToDataUri(this, 640, 840);
              //NewDataUri is final result
          }
  });
  </code></pre>