HTML5 canvas保存實際尺寸的圖像

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();

如您所見，當Im獲得base64時，圖像大小減小。 我正在獲取圖片350x450。 但我想將其保存為600x900。

有什么辦法嗎？

Answer 1

基本上我在下面的代碼中所做的是

我正在創建一個帶顯示的臨時畫布元素：無樣式，還將圖像加載到其中並在顯示原始畫布時從中保存。

 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();