изменить размер изображения с помощью canvas - проблема переполнения css

Question

Я работаю над функцией изменения размера изображения JavaScript, которая использует только дополнение DXImageTransform для IE.

Желая обратиться и к современным браузерам, я сделал снимок холсту, с довольно хорошими результатами.

Тем не менее, я столкнулся с проблемой в моей функции изменения размера, которая заключается в следующем:

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. Попробуйте изменить размер элемента canvas при изменении размера (возможно, я что-то там пропустил)

Answer 1

Я сам не пробовал, но, возможно, вы можете создать элемент canvas из Dom с помощью document.createElement. Он может быть произвольного размера, не мешая отображению.

Теперь мне не хватает контекста (почему вы изменяете размер изображения таким образом, вместо использования атрибутов width и height, среди прочих вопросов), поэтому, возможно, я упускаю точку.