Vue +elelment_ui canvas 截图 旋转 缩放

Vue +elelment_ui canvas 截图 旋转 缩放

目前功能不全 可用 打开 截图 修改元截图 旋转 缩放

```css
<template>
  <div id="container">
    <div id="btnDiv" style="width: 100%; height: 50px; background: #cccccc; padding: 10px 20px;" >
      <button id="btn3" @click="open_img">打开</button>
      <button id="btn1" @click="printscreen">截图</button>
      <button id="btn2" @click="modification">修改原截图</button>
      <button id="btn4" @click="copy_printscreen">复制截图</button>
      <button id="rotateBtn" class="icon rotate-icon" @click="rotate_btn(rotate_number)">右旋转</button>
      <button id="rotateBtn2" class="icon rotate-icon" @click="rotate_btn2(rotate_number)">左旋转</button>
      <button id="rotateBtn3" class="icon rotate-icon" @click="canvas_submit">保存</button>
      <button id="rotateBtn4" class="icon rotate-icon" @click="canvas_tiu">回退</button>
      <span>缩放:</span>
      <input v-model="img_size" type="range" id="scale-range" min="0.5" max="3.0" step="0.01"  style="display: inline-block;">
      <!--快捷键配置组件-->
      <shortcutKey style="float: right"></shortcutKey>
	</div>
	  <div id="imgDiv" style=" position:relative;  width: 100%; background:#a67f59; padding: 20px;text-align: center">
      <!--border:1px solid #d3d3d3-->
      <!--@click="clivk_canvas"-->
      <!--@mousedown="mousedown_canvas"-->
      <!--@mousemove="mousemove_canvas"-->
      <!--@mouseup="mouseup_canvas"-->
      <!--@mouseleave="mouseleave_canvas"-->
      <canvas
        v-show="is_canvas"
        id="myCanvas"
        style="background:#fff; "
       > 您的浏览器不支持 HTML5 canvas 标签。 </canvas>
      <div v-show="is_canvas_operate" id="canvas_operate" style="position: absolute;top:0;left: 0; height: 30px; background: #fff">666</div>
    </div>
  </div>
</template>

<script>
  import shortcutKey from './shortcutKey'
  let getObjectURL = function(file) {
    let url = null;
    if (window.createObjectURL !== undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.webkitURL !== undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    } else if (window.URL !== undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    }
    return url;
  };
  const ID = function(id) {
    return document.getElementById(id);
  };
  //获取相关CSS属性方法
  let getCss = function(o, key) {
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
  };

  // //拖拽拉伸所需参数
  let params = {
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    currentX: 0,
    currentY: 0,
    flag: false,
    kind: "drag"
  };
  export default {
    name: 'index',
    data(){
      return{
        // 覆盖的图层信息
        cover_message:[],
        // 历史图层信息
        old_message:[],
        originWidth: null,// 图片原始宽度
        originHeight:null, // 图片原始高度
        zoomWidth: null,// 图片缩放后宽度
        zoomHeight:null, // 图片缩放后高度
        scaleX:1,// 图片宽度缩放比例（当前实际/原始）
        scaleY:1,// 图片高度缩放比例（当前实际/原始）
        // 初始canvas
        ctx:null,
        myCanvas:null,
        canvas_operate:null,
        // 截图框
        oRelDiv:null,

        is_canvas:false,
        is_printscreen:false,
        is_canvas_operate:false,

        start_x1:0,
        start_y1:0,
        close_x:0,
        close_y:0,
        img:null,
        original_img:null,
        screenshot_frame:true,
        fileInput:null,
        rotate_number:0,
        img_size:1.0,

        // myImage:null,

        // img:null
      }
    },
    components: {shortcutKey},
    watch:{
      'img_size'(){
        this.size_input()
      }
    },
    computed:{
      // 最左点
      // 最上点
      // 最右点
      // 最下点
    },
    methods:{
      // 初始化
      start_m(src) {
        //拖拽与拉伸方法
        //拖拽拉伸所需参数
        // // 裁剪得到的图片
        let clipImg = new Image();
        clipImg.src = '';
        clipImg.style.height = '100px';
        clipImg.style.width = '100px';
        clipImg.alt = '裁剪获得图片...';



      },
      // 打开图片
      open_img(){
        // 清楚之前的残留
        if(this.oRelDiv){
          this.oRelDiv.innerHTML = '';

        }
        var __this = this
        var myCanvas = document.getElementById('myCanvas');
        var ctx = myCanvas.getContext('2d');
        this.ctx = ctx
        this.myCanvas = myCanvas
        var imgDiv = document.getElementById('imgDiv')
        var fileInput = document.createElement('input');
        fileInput.setAttribute('multiple', 'multiple');
        fileInput.setAttribute('type', 'file');
        fileInput.setAttribute('id', 'fileInput');
        fileInput.addEventListener('change', function() {
          var src = getObjectURL(this.files[0]);
          if(src) {
            __this.screenshot_frame = false
            __this.is_canvas =true
            // 被裁剪图片
            var img = new Image();
            img.setAttribute('id', 'img');
            img.src = src
            __this.img =img
            // 图片写入canvas 内
            img.onload = function() {
              img.width = img.naturalWidth;
              img.height = img.naturalHeight;
              myCanvas.width = img.naturalWidth;
              myCanvas.height = img.naturalHeight;
              imgDiv.style.height= img.naturalHeight
              __this.originWidth = img.naturalWidth;
              __this.originHeight = img.naturalHeight;
              __this.zoomWidth = img.naturalWidth;
              __this.zoomHeight = img.naturalHeight
              console.log(__this.originWidth, __this.originHeight)
              ctx.drawImage(img, 0, 0, __this.originWidth, __this.originHeight);
            };
          }else {
            this.zoomWidth = null
            this.zoomHeight = null
            __this.screenshot_frame = true
          }
        });
        fileInput.click();
      },
      // 旋转1
      rotate_btn(number){
        this.rotate_number += 10
        var  degree = 0
        degree += parseInt(this.rotate_number);
        degree %= 360;
        this.ctx.save();
        this.ctx.clearRect(0, 0, this.myCanvas.width,this.myCanvas.height);
        this.ctx.translate(this.myCanvas.width / 2, this.myCanvas.height / 2);
        console.log(this.myCanvas.width / 2, this.myCanvas.height / 2)
        this.ctx.rotate(degree / 180 * Math.PI);
        this.ctx.translate(-this.myCanvas.width / 2, -this.myCanvas.height / 2);
        console.log(-this.myCanvas.width / 2, -this.myCanvas.height / 2)
        this.ctx.drawImage(this.img, this.myCanvas.width / 2 - this.zoomWidth / 2, this.myCanvas.height / 2 - this.z