flash jquery 調用攝像頭 vue chrome49瀏覽器

flash jquery 調用攝像頭 vue chrome49瀏覽器

這個攝像頭，不能一個頁面加載多個，只能一個頁面顯示一次，因此 調用的時候，記得加v-if 把組件銷燬，而後重新加載新的

<!--
* @description 攝像頭vue版實例
* @fileName cameraObject.vue
* @author 彭成剛
* @date 2019/03/18 10:46:55
* @version V1.0.0
!-->
<template>
  <div>

    <div id="webcam"></div>
    <!--<button @click="jieping">截屏</button>-->
    <div style="color:red; margin: 10px;">點擊便可啓用 Adobe Flash Player(拍照功能將啓用Flash，第一次啓用將會刷新頁面，致使數據丟失，建議返回表單頁面保存數據後開啓拍照功能。)</div>

    <Button type='primary'
            @click="handleCamera"
            style="margin-bottom:5px; margin-right:5px;">拍照</Button><!--icon="md-camera"-->
    <Button type='warning'
            @click="leftRotate"
            :disabled="buttonDisabled"
            style="margin-bottom:5px; margin-right:5px;">逆旋轉</Button>
    <Button type='warning'
            @click="rightRotate"
            :disabled="buttonDisabled"
            style="margin-bottom:5px;">正旋轉</Button>
    <!--<canvas id="canvas" width="320" height="240"></canvas>-->
    <div>
    <img ref="img" id="base64image" src='' />
    </div>
  </div>
</template>

<script>
import jQuery from '@/../public/components/webcam/jquery.webcam'
export default {
  data () {
    return {
      buttonDisabled: true,
      timer: new Date().getTime().toString(),
      picIsHave: false
    }
  },

  components: {},

  computed: {},

  mounted () {
    let _this = this
    var pos = 0, ctx = null, saveCB, image = [];

    var canvas = document.createElement("canvas");
    canvas.setAttribute('width', 320);
    canvas.setAttribute('height', 240);

    if (canvas.toDataURL) {

      ctx = canvas.getContext("2d");

      image = ctx.getImageData(0, 0, 320, 240);

      saveCB = function(data) {
        // console.info('data', data)

        var col = data.split(";");
        var img = image;

        for(var i = 0; i < 320; i++) {
          var tmp = parseInt(col[i]);
          img.data[pos + 0] = (tmp >> 16) & 0xff;
          img.data[pos + 1] = (tmp >> 8) & 0xff;
          img.data[pos + 2] = tmp & 0xff;
          img.data[pos + 3] = 0xff;
          pos+= 4;
        }


        if (pos >= 4 * 320 * 240) {
          ctx.putImageData(img, 0, 0)
          var base64 = canvas.toDataURL("image/png")
          // console.info('canvas.toDataURL("image/png")',)
          // document.getElementById('base64image').attributes('src',base64)
          console.info('_this',_this)
          jQuery('#base64image').attr('src',base64)
          _this.buttonDisabled = false
          // $.post("/upload.php", {type: "data", image: canvas.toDataURL("image/png")});
          pos = 0;
        }
      };

    } else {

      saveCB = function(data) {
        console.info('data2',data)
        image.push(data);

        pos+= 4 * 320;

        if (pos >= 4 * 320 * 240) {
          console.info('data2 ok')
          // $.post("/upload.php", {type: "pixel", image: image.join('|')});
          pos = 0;
        }
      };
    }

    jQuery("#webcam").webcam({

      width: 320,
      height: 240,
      mode: "callback",
      swffile: "/familyMajor_web/components/webcam/jscam_canvas_only.swf",

      onSave: saveCB,

      onCapture: function () {
        webcam.save();
      },

      debug: function (type, string) {
        console.log(type + ": " + string);
      }
    });
  },

  methods: {
    // 外層調用
    getPicBase64 () {
      let base64 = this.$refs.img.src
      let ret = {
        picIsHave: this.picIsHave,
        base64: base64
      }
      return ret
    },
    handleCamera () {
      this.picIsHave = true
      webcam.capture()
    },
    leftRotate () {
      let src = this.$refs.img.src
      let edg = -90
      this.rotateBase64Img(src, edg, (_) => { this.$refs.img.src = _ })
    },
    rightRotate () {
      let src = this.$refs.img.src
      let edg = 90
      this.rotateBase64Img(src, edg, (_) => { this.$refs.img.src = _ })
    },
    rotateBase64Img (src, edg, callback) {
      var canvas = document.createElement('canvas')
      var ctx = canvas.getContext('2d')

      var imgW // 圖片寬度
      var imgH // 圖片高度
      var size // canvas初始大小

      if (edg % 90 !== 0) {
        console.error('旋轉角度必須是90的倍數!')
        // throw '旋轉角度必須是90的倍數!'
      }
      (edg < 0) && (edg = (edg % 360) + 360)
      const quadrant = (edg / 90) % 4 // 旋轉象限
      const cutCoor = { sx: 0, sy: 0, ex: 0, ey: 0 } // 裁剪座標

      var image = new Image()
      image.crossOrigin = 'anonymous'
      image.src = src

      image.onload = function () {
        imgW = image.width
        imgH = image.height
        size = imgW > imgH ? imgW : imgH

        canvas.width = size * 2
        canvas.height = size * 2
        switch (quadrant) {
          case 0:
            cutCoor.sx = size
            cutCoor.sy = size
            cutCoor.ex = size + imgW
            cutCoor.ey = size + imgH
            break
          case 1:
            cutCoor.sx = size - imgH
            cutCoor.sy = size
            cutCoor.ex = size
            cutCoor.ey = size + imgW
            break
          case 2:
            cutCoor.sx = size - imgW
            cutCoor.sy = size - imgH
            cutCoor.ex = size
            cutCoor.ey = size
            break
          case 3:
            cutCoor.sx = size
            cutCoor.sy = size - imgW
            cutCoor.ex = size + imgH
            cutCoor.ey = size + imgW
            break
        }

        ctx.translate(size, size)
        ctx.rotate(edg * Math.PI / 180)
        ctx.drawImage(image, 0, 0)

        var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey)
        if (quadrant % 2 === 0) {
          canvas.width = imgW
          canvas.height = imgH
        } else {
          canvas.width = imgH
          canvas.height = imgW
        }
        ctx.putImageData(imgData, 0, 0)
        callback(canvas.toDataURL())
      }
    }


  }
}

</script>
<style lang='less'>

</style>