HTML5 холст сохранить фактический размер изображения

Question

У меня есть холст html5, где я показываю изображение размером 350x450 пикселей.

Но фактический размер изображения составляет 600x900 пикселей.

Как я могу сохранить его в оригинальном размере.

var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
  var imageObj = new Image();
  ctx.canvas.width = 350;
  ctx.canvas.height = 450;
  imageObj.onload = function() {
    ctx.drawImage(imageObj, 0, 0,100,100);
  };
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = canvas.toDataURL();

Как вы видите, когда я получаю base64 Размер изображения уменьшается. Я получаю изображение 350x450. Но я хочу сохранить его в 600х900.

Есть ли способ?

Answer 1

В основном то, что я делаю в приведенном ниже коде, заключается в том, что>

Я создаю элемент temp canvas с display: none style, а также загружаю в него изображение и сохраняю его, пока показываю оригинальный холст.

 var canvas = document.getElementById('my_canvas');
 var tempCanvas = document.getElementById('temp_canvas'); // use style  display : none  for this temp element 
 var ctx = canvas.getContext('2d');
 var tempCtx = tempCanvas.getContext('2d');
 var imageObj = new Image();
 ctx.canvas.width = 350;
 ctx.canvas.height = 450;
 imageObj.onload = function() {
     ctx.drawImage(imageObj, 0, 0,100,100);
     tempCtx.drawImage(imageObj, 0, 0,100,100);
 };
imageObj.src = 'https://davidwalsh.name/demo/ringo-ftw.jpg';
var base64 = tempCanvas.toDataURL();