130 내가 만든 스크롤 인터렉션 플러그인.. vue에서 쓰게끔 수정하니깐 갑자기 IE11에서 IndexSizeError가 뜬다.

source: categories/study/vue-experiance/vue-experiance_9-99_31.md

130 내가 만든 스크롤 인터렉션 플러그인.. vue에서 쓰게끔 수정하니깐 갑자기 IE11에서 IndexSizeError가 뜬다.

IE11에서 IndexSizeError가 뜨는 이유

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
테스트

<canvas id="canvas" width="1920" height="1080"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const img = document.createElement('IMG');
    img.src = './image/bg01.jpg';

    img.addEventListener('load', function () {
        // ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
        ctx.drawImage(img, 720, 20, 1920, 1080, 0, 0, 2420, 1080)
    })
</script>
</body>
</html>
  

위에서 sx, sy, sWidth, sHeight가 img의 naturalWidth, naturalHeight 값을 초과하면 IndexSizeError에러가 발생한다.
sWidth, sHeight 같은 경우 sx에 naturalWidth, sy에 naturalHeight 값을 더한 값이 naturalWidth, naturalHeight보다 클때 에러가 생기는게 아니다.

그냥 각각 naturalWidth, naturalHeight 값을 초과하면 IndexSizeError에러가 발생한다.
연관지어서 생각하면 안됐다.

sx, sy, sWidth, sHeight 값 각각이 0보다 작지않고 naturalWidth, naturalHeight 값을 초과하지만 않으면 될 거 같다.
수정해보자!!

해결 과정 - IE 11, 10 다 되도록 만듦!!!

!!! IE 진짜 이상해..
sWidth가 문제.. naturalWidth이랑 같으면 안됨. naturalWidth - 1 이하여야됨.
sWidth가 그리고 0이면 안됨. 1 이상이어야함.

{
    drawCanvas(val) {
        // this.ctx.fillRect(0, 0, 1920, 1080);
        this.ctx.clearRect(0, 0, 1920, 1080);
        const img = this.img[val];

        const sx = this.location[0] < 0 ? 0 : this.location[0] > img.naturalWidth ? img.naturalWidth : this.location[0];
        const sy = this.location[1] < 0 ? 0 : this.location[1] > img.naturalHeight ? img.naturalHeight : this.location[1];
        let sWidth = this.location[2] < 0 ? 0 : this.location[2] > img.naturalWidth ? img.naturalWidth : this.location[2];
        const sHeight = this.location[3] < 0 ? 0 : this.location[3] > img.naturalHeight ? img.naturalHeight : this.location[3];
        const dx = this.location[4] < 0 ? 0 : this.location[4] > img.naturalWidth ? img.naturalWidth : this.location[4];
        const dy = this.location[5] < 0 ? 0 : this.location[5] > img.naturalHeight ? img.naturalHeight : this.location[5];
        let dWidth = this.location[6] < 0 ? 0 : this.location[6] > img.naturalWidth ? img.naturalWidth : this.location[6];
        const dHeight = this.location[7] < 0 ? 0 : this.location[7] > img.naturalHeight ? img.naturalHeight : this.location[7];

        sWidth = sWidth === 0 ? 1 : sWidth === img.naturalWidth ? img.naturalWidth - 1 : sWidth;
        dWidth = dWidth === 0 ? 1 : dWidth === img.naturalWidth ? img.naturalWidth - 1 : dWidth;

        this.ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    }
}
  

수정한 것들

IE11에서 안되는거 sWidth값 최소 1에서 최대 naturalWidth - 1
그리고 코드 복잡해져서 수정한 부분이 있음
- 이전엔 캔버스를 전체 화면 크기만 생각했었는데, 그래서 비율 거기에 다 맞게 계산했는데,
- 지금은 그게아니고 부모 요소에 맞추고,
- 웬만하면 그냥 캔버스 태그 자체 크기(width, height)로 계산
캔버스는 그냥 transform scale만 조정하고.. 여튼 이게 편한듯!!!

scrollY 쓰지마! pageYOffset 써! IE11, 10 때문!!

더미 이미지 불러올 때, 확장자도 지우자! IE11, 10 때문!!

hyungju-lee

master