scss チップラボ：deveiceLightイベントを使ってみる

Posted 2021-05-18

チップラボ: deveiceLightイベントを使ってみる
-----------------------------
画像を読み込む。
AndroidのFireFox限定で暗い時にだけ、画像が見えるようになる。明るい場所では体を動かそう

A [Pen](https://codepen.io/kiyoshidainagon/pen/WOawYx) by [Shinnosuke](http://codepen.io/kiyoshidainagon) on [CodePen](http://codepen.io/).

[License](https://codepen.io/kiyoshidainagon/pen/WOawYx/license).

#wrapperMan
    input(type="file", id="selectFile")
    canvas#myCanvas
    #text

import Sample from './lib/Sample';
import $ from 'jquery';

const sample = new Sample({
    name: 'world'
});

const wrapper = document.getElementById('wrapperMan');
const canvas = document.getElementById('myCanvas');
const fileObject = document.getElementById('selectFile');


class ShowingImageDark {
  constructor(opts={}) {
    this.canvas = opts.target;
    this.canvas.width = wrapper.clientWidth;
    this.canvas.height = wrapper.clientHeight;
    this.ctx = this.canvas.getContext('2d');
    this.image = opts.image;
    this.dataUrl = '';
    this.initListener();
    this.lightVal = 0;
  }
  initListener() {
    this.image.addEventListener('change', () => {
      const file = this.image.files;
      const reader = new FileReader();
      reader.readAsDataURL(file[0]);
      reader.addEventListener('load', () => {
        this.dataUrl = reader.result;
        this.canvasFunc(this.dataUrl);
      });
    });
    window.addEventListener('devicelight', (event) => {
      this.lightVal = event.value;
      const text = document.getElementById('text');
      text.innerHTML = `${event.value} : ${this.value}`;
    });
  }
  canvasFunc(_data) {
    const img = new Image();
    img.src = _data;
    img.addEventListener('load', () => {
      this.drawingCanvas(img);
    });
  }
  drawingCanvas(_img) {
    const that = this;
    function loop() {
        that.ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
        if(that.lightVal > 300) {
            that.ctx.globalAlpha = 0;
        } else {
            that.ctx.globalAlpha = 1 - that.setRange(that.lightVal, 0, 300, 0, 1);
        }
        that.value = that.ctx.globalAlpha;
        that.ctx.drawImage(_img, 0, 0, that.canvas.width, that.canvas.width * _img.height / _img.width );
        window.requestAnimationFrame(loop);
    }
    window.requestAnimationFrame(loop);

  }
  setRange(value, low1, high1, low2, high2) {
    return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
  }
}
const showingImageDark = new ShowingImageDark({
  target: canvas,
  image: fileObject
});

body {
    background: #000;
}
#wrapperMan {
  width: 100%;
  height: 100vh;
}
#selectFile {
  position: absolute;
  top: 0;
  left: 0;
}