画布图像不能全部显示，被剪裁只能显示部分图像答案

【问题标题】：Canvas image cannot show all and is clipped can only show part of the image画布图像不能全部显示，被剪裁只能显示部分图像
【发布时间】：2014-03-27 05:08:01
【问题描述】：

我得到了显示的图像，但只能显示图像的一部分。我想知道是否有任何方法可以显示整个图像！

 var canvas=document.getElementById("Mat_canvas");
canvas.addEventListener('keydown',doKeyDown,true);
var canvt=canvas.getContext("2d");
var img_obj=new Image();
img_obj.onload=function(){
  //canvt.align='center';
  canvt.drawImage(img_obj,0,0);
};

【问题讨论】：

你的画布元素比图片小吗？
这不是 JavaScript 而是 HTML5 吗？
@Skwal，是的，它比图片小，不过我想看一个微型版本
@TylerH，是的，我只是想确保每个部分都能正常工作......

标签： javascript html image canvas show

【解决方案1】：

您可以在图像加载回调中调整画布大小：

var canvas=document.getElementById("Mat_canvas");
canvas.addEventListener('keydown',doKeyDown,true);
var canvt=canvas.getContext("2d");
var img_obj=new Image();
img_obj.onload=function(){
  //canvt.align='center';

  // resize the canvas to the same size as the source image
  canvas.width=img_obj.width;
  canvas.height=img_obj.height;

  canvt.drawImage(img_obj,0,0);
};

【讨论】：