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