vue 自定义指令及利用跨域图片进行canvas绘制的问题

1：vue自定义指令

有时候需要自定义指令时候就需要用到Vue.directive,但是要注意的是该语句必须放到创建vue实例的前面：

Vue.directive("drag",{
  inserted:(el: any, binding: any)=>{
    console.log("el is ",el);
    el.onmousedown = function(e) {
      let disX = e.pageX - el.offsetLeft;
      let disY = e.pageY - el.offsetTop;
      document.onmousemove = function(e) {
        el.style.left = e.pageX - disX + 'px';
        el.style.top = e.pageY - disY + 'px';
      }
      document.onmouseup = function() {
        document.onmousemove = document.onmouseup = null;
      }
    }
  }
});
new Vue({
  router,
  store,
  created() {
    if(window['isWin32']){
      const settingStr = localStorage.getItem('setting');
      if (settingStr) {
        window['ipcRenderer'].send('service-setting', JSON.parse(settingStr));
      }  
    }
  },
  render: (h) => h(App),
}).$mount('#app');

1：跨域图片绘制 ：img.setAttribute必须放到 img.src前面去

console.log("cropper is ",Cropper);
        // this.currentImg = this.img;
        this.$nextTick(function() {
            let img = new Image();
            console.log("this.img is ",this.img);
            // 设置跨域必须放到img.src前面
            img.setAttribute('crossOrigin', 'anonymous');
            img.src = this.img.replace('thumbnails/','');
            // 取到原始图形大小
            console.log("img.src is ",img.src);
            // 跨域访问图片
            console.log("img is ",img);
            console.log(this.img);
            const that = this;
            new Promise(function(resolve,reject) {
                img.onload = function() {
                    const myCanvas = that.$refs.crp;
                    console.log(myCanvas);
                    resolve(myCanvas);
                }
            }).then((data) => {
                data.getContext('2d').drawImage(img, 0, 0, 500, 400);
                that.cropper = new Cropper(data,{});
                console.log("this.cropper is ",that.cropper);
            })
        })