CAS -CSS 오버 플로우 문제로 이미지 크기를 조정하십시오

Question

IE 만 DXIMAGETRANSFORM ADDON에 의존하는 JavaScript 이미지 크기 조정 기능을 연구하고 있습니다.

현대식 브라우저도 해결하고 싶을 때 캔버스에게 촬영을했으며 꽤 좋은 결과를 얻었습니다.

그러나 저는 크기 조정 기능에서 다음과 같은 문제에 직면 해 있습니다.

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

내 이미지가 캔버스 항목보다 커지면 이미지의 일부만 볼 수 있습니다.

런타임에 캔버스 크기를 조정하려고했지만 크기가 크기가 큰 이미지의 디스플레이에 영향을 미칩니다.

그래서 나는 결국 a를 선언하게되었습니다 큰 내 웹 페이지의 CSS 오버플로가 내 가장 큰 요소에서 조정되며 상승 된 이미지가 아닌 통증이라는 점을 제외하고는 괜찮습니다.

내 문제를 해결하는 두 가지 방법이 있다고 생각합니다.

1. 오버플로 체계에서 큰 캔버스 요소를 제외하십시오.
2. 크기를 조정할 때 캔버스 요소 크기를 업데이트하십시오 (나는 거기에서 무언가를 놓쳤을 수도 있습니다)

Answer 1

나는 그것을 직접 시도하지 않았지만 아마도 당신은 dom에서 캔버스 요소를 만들 수 있습니다. document.createElement. 디스플레이를 방해하지 않고 임의의 크기 일 수 있습니다.

이제는 컨텍스트가 부족합니다 (왜 다른 질문들 중에서도 너비와 높이 속성을 사용하는 대신이 방식으로 이미지를 크기를 조정합니까).