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

Question

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

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

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

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

Если мое изображение станет больше, чем элемент canvas, то будет видна только часть изображения, что плохо.

Я попытался настроить размер холста во время выполнения, но это влияет на отображение измененного изображения.

Так что в итоге я объявил большой элемент canvas, что вполне нормально, за исключением того, что переполнение css моей веб-страницы настроено на моем самом большом элементе, а не на моем измененном изображении, что является проблемой.

Итак, я думаю, есть два способа решить мою проблему:

1. Попробуйте исключить большой элемент canvas из схемы переполнения
2. Попробуйте обновить размер элемента canvas при изменении размера (возможно, я что-то там пропустил)

Answer 1

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

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