■ 시작

이번에는 Fx0으로 실제로 vintageJS를 옮기고 싶습니다.
나는 비그네트의 효과를 시험해 보고 싶다.
vintageJS로 이 효과를 곱합니다0~1.0 범위의 값을 제공함으로써 값의 강약을 바꾸다 가능합니다.

■ vignette 효과 추가하기

vintageJS 샘플 아주 간단한 코드에 사용됩니다.

<script src="//code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="jquery.vintage.js"></script>
<script>
    var options = {
        onError: function() {
            alert('ERROR');
        }
    };
    var effect = {
        vignette: 0.6,
        sepia: true
    };
    $('img#yourImage').vintage(options, effect);
</script>

단지 효과로 파라미터를 줄 뿐, 간단하면서도 좋다.
실제로 해보고 싶어요.

■ 해봤어요

효과가 있는 이미지는 vintageJS 테스트 디렉터리에 있는 다음 파그견입니다.
파일 이름으로 봤을 때 Sammy라고 하는 것 같아요.

먼저 PC 버전의 Firefox 브라우저에 표시됩니다.

얘가 효과가 좋아요.
다음은 Fx0의 표시입니다.

언뜻 보니 효과가 있는 것 같다.
하지만, 나는 네 개의 브로콜리가 미묘하게 다르다고 생각한다...
그라데이션이 없는 것 같습니다.
코드는 똑같은데 컴퓨터의 Firefox 브라우저와 Firefox OS의 디스플레이가 달라요...
같은 Firefox OS 단말기의 Flame도 확인한 결과 Fx0과 같은 상태가 되었습니다.
Firefox OS 터미널 일부에 문제가 있는 것으로 보입니다.

■ 조사해보니

바이올렛 4개를 넣지 않고 점차적으로 변하는 상태여서 구체적인 원인을 조사했다.
vignetteJS의 코드를 보면 vignette의 효과는 원형의 점차적인 변화를 지정하는 Canvas API의createRadialGradient(),addColoerStop()으로 이루어집니다.
나는 단독으로 이 API를 사용했고 점차적인 결과만 확인했다.
먼저 PC 버전의 Firefox 브라우저입니다.

올바른 그라데이션입니다.
다음은 시뮬레이터의 결과다.

이것도 정확한 점차적인 변화다.
마지막으로 Fx0의 결과입니다.

안타깝게도 Fx0의 표시가 이상해졌다.
Frame에서도 봤는데 결과는 똑같았어요.
시뮬레이터에서 정확하게 작동하기 때문에 하드웨어에 의존하는 등 원인이 있을 수 있다.