使用canvas调整图像大小 - css溢出问题

Question

我正在开发一个JavaScript图像大小调整功能，该功能仅依赖于IE浏览器DXImageTransform插件。

为了解决现代浏览器的问题，我还给画布画了一个很好的结果。

但是，我的调整大小功能面临一个问题，如下所示：

function Resize(oObj, flMultiplier)
{       
  var canvas = document.getElementById('canvas');
  var canvasContext = canvas.getContext('2d');

  oObj.style.visibility = 'hidden';

  canvasContext.clearRect(0,0,canvas.width,canvas.height); // clear canvas
  canvasContext.fillStyle = 'rgba(0,0,0,0.4)';
  canvasContext.scale(flMultiplier,flMultiplier);
  canvasContext.drawImage(oObj, 0, 0);
}

如果我的图像比画布项目大，那么人们只能看到图像的一部分，这是不好的。

我尝试在运行时调整画布大小，但是如果影响调整大小的图像的显示。

所以我最终声明了一个 big 画布元素，这很好，除了我的网页的css溢出调整在我最大的元素上，而不是在我调整大小的图像上，这是痛苦。

所以我想有两种方法可以解决我的问题：

1. 尝试从溢出方案中排除大画布元素
2. 尝试在调整大小时更新画布元素大小（我可能在那里遗漏了一些东西）

Answer 1

我自己没有尝试过，但也许你可以用document.createElement从Dom中创建一个画布元素。它可以是任意大小而不会打扰显示器。

现在，我缺乏上下文（为什么你这样调整图像大小而不是使用宽度和高度属性，以及其他问题）所以也许我错过了这一点。