test-whiteboard/libs/imageDrawer.js

https://gitlab.gridsum.com/gov_law_tech/FrontEnd/whiteboard

import  Mixin from './mixin';
import  EventEmitter from './eventEmitter';


import  {canvasTransform} from 'canvas-transform';



class  ImageDataStore{
    constructor(){
        this.url='';
    }
    setUrl (url) {
        this.url = url;
    }
}

export  default  class ImageDrawer extends Mixin( EventEmitter){
    constructor(root,transformMode){
        super();

        this.canRun = false;

        this.root  = root;



        var canvas = document.createElement('canvas');


        var bound = root.getBoundingClientRect();
        var width = bound.width;
        var  height =bound.height;
        canvas.setAttribute('width',width+'px');
        canvas.setAttribute('height',height+'px');

        this.root.append(canvas);

        this.canvas = canvas;

        this.imageDom = null;

        this.root.style.zIndex = 1;



        this.eventDic=[

            'action_loadImage',
            'notify_loadSuccess',
            'notify_loadError',
            'notify_waitLoading',
            'action_resetBox'
        ];
        this.dataStore = new ImageDataStore();

        var me = this;

        this.on('action_loadImage',function (url) {
            me.dataStore.setUrl(url);
            me.loadImage();
        });
        this.canvasTransform = new canvasTransform(transformMode);
    }
    run () {
        if(!active)
        {
            return false;
        }
        this.loadImage();
    }
    active (active) {
        this.canRun = active;
        if(active)
        {
            this.run();
        }
        else{

        }
    }
    loadImage () {
        var me = this;

        me.emit('notify_waitLoading');


        if(!me.imageDom)
        {
            me.imageDom =  document.createElement('img');
            let imageDom = me.imageDom;
            //imageDom.setAttribute('width','100%');
            //imageDom.setAttribute('height','100%');
            imageDom.setAttribute('crossOrigin','anonymous');


            me.root.append(imageDom);
           // imageDom.style.display='none';
            imageDom.addEventListener('load',function () {
                //加载成功
               let rect =  imageDom.getBoundingClientRect();



                 //im
                me.canvas.setAttribute('width',rect.width+'px');
                me.canvas.setAttribute('height',rect.height+'px');
                me.canvasTransform.drawImage(imageDom,me.canvas);
                 imageDom.style.display='none';

                me.emit('notify_loadSuccess');
              me.emit('action_resetBox',rect.width,rect.height);

            });
            imageDom.addEventListener('error',function () {
                //加载成功
                me.emit('notify_loadError');
            });
        }
        me.imageDom.setAttribute('src',this.dataStore.url);








    }
}