cropperjs插件中如何支持TIFF格式图片(可为多张图片)

cropperjs插件中如何支持TIFF格式图片(可为多张图片)

cropperjs插件是一款很好用的开源插件，作者也在持续更新中，我在使用这款插件的时候遇到了一个需求–支持tiff格式的图片修改，且tiff文件中可能含多张图，则要能切换并支持修改剪切。
cropperjs源码链接在此https://github.com/fengyuanchen/cropperjs
我翻阅了许多文档以及向作者提出了我的问题需求都没能得到解决，后来我分解我的问题不断搜寻类似答案，不断修改测试，算是有了一点收获。

**

第一步 先修改img 标签为canvas

**

我在尝试上传tif格式文件时候发现在img标签下无法显示，后来查询相关资料显示在canvas下能够正常显示，而且cropperjs也支持canvas标签。

<div class="img-container">
                <canvas id="image"></canvas>
</div>

上传图片后尝试对canvas 重新渲染

我几经尝试发现canvas 不能直接附上image的url，我试出了重新构造canvas 的方法，下边代码还包含了tiff格式的加载方式

 const xhr = new XMLHttpRequest();
 const  canvasList = [];
 //假定fileUrl为../assets/image/documentmutif.tif
            xhr.open('GET', fileUrl);
            xhr.responseType = 'arraybuffer';
            // tslint:disable-next-line:only-arrow-functions
            xhr.onload = (function (e) {
                const buffer = xhr.response;
                const tiff = new Tiff({buffer});
                console.log(tiff);
        //tiff文件中有多张图片
                for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {
                    tiff.setDirectory(i);
                    const canvas = tiff.toCanvas();
                    console.log(canvas)
                    // canvas.width = that.xImageWidth;
                    // canvas.height = that.xImageHeight;
                    const width = tiff.width();
                    const height = tiff.height();
                    if (canvas) {
                        canvasList.push(canvas);
                    }
                }
                //默认显示多张图里的第一张
                const image = canvasList[0];
          
                if (canvasList.length > 1) {
                    // 多个page时,翻页btn显示
                    that.showPreOrNextBtn = true;
                }
                //**重新构造canvas 的方法**
                $(image).attr('id', 'image');
                // image原始尺寸过宽 cropper-hidden class隐藏不及时会出现闪屏现象
                // 在replace前 先设定优先级最高的'style','display:none' 让原始图片隐藏 可解决此问题
                $(image).attr('style', 'display:none');
                $('#image').replaceWith(image);
                that.initImageCropper(image);
            });

实现cropper框里的翻页

tif文件有多张图片，翻页也是十分重要的。
html中我加入了翻页icon btn,这是我angular9的写法

 <button *ngIf="showPreOrNextBtn" type="button" class="btn btn-primary" data-method="previous"
                                data-option="-0.1" [disabled]="preBtnDisabled" (click)="previous()">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false">
              <span class="fa fa-arrow-circle-o-left" title="previous"></span>
            </span>
                        </button>
                        <button *ngIf="showPreOrNextBtn" type="button" class="btn btn-primary" data-method="next" data-option="-0.1"
                                [disabled]="nextBtnDisabled" (click)="next()">
            <span class="docs-tooltip" data-toggle="tooltip" data-animation="false">
              <span class="fa fa-arrow-circle-o-right" title="next"></span>
            </span>
                        </button>

下边是ts中的逻辑方法代码

// tiff 文件有多张图片时候 向前翻页方法
    previous() {
        this.currentPageIndex = this.currentPageIndex - 1;
        // 当前为第一张时候 把向前翻页的btn 禁用
        if (this.currentPageIndex === 0) {
            this.preBtnDisabled = true;
            this.nextBtnDisabled = false;
        } else {
            this.preBtnDisabled = false;
            this.nextBtnDisabled = false;
        }
        this.image = this.canvasList[this.currentPageIndex];
        $(this.image).attr('id', 'image');
        // image原始尺寸过宽 cropper-hidden class隐藏不及时会出现闪屏现象
        // 在replace前 先设定优先级最高的'style','display:none' 让原始图片隐藏 可解决此问题
        $(this.image).attr('style', 'display:none');

        $('#image').replaceWith(this.image);
        this.cropper.destroy();
        this.initImageCropper(this.image);
    }

// tiff 文件有多张图片时候 向后翻页方法

    next() {
        this.currentPageIndex = this.currentPageIndex + 1;
        // 当前为最后一张时候 把向后翻页btn禁用
        if (this.currentPageIndex === this.canvasList.length - 1) {
            this.preBtnDisabled = false;
            this.nextBtnDisabled = true;
        } else {
            this.preBtnDisabled = false;
            this.nextBtnDisabled = false;
        }
        this.image = this.canvasList[this.currentPageIndex];
        $(this.image).attr('id', 'image');
        // image原始尺寸过宽 cropper-hidden class隐藏不及时会出现闪屏现象
        // 在replace前 先设定优先级最高的'style','display:none' 让原始图片隐藏 可解决此问题
        $(this.image).attr('style', 'display:none');
        $('#image').replaceWith(this.image);

// 把当前cropper销毁 然后对图片初始化
        this.cropper.destroy();
        this.initImageCropper(this.image);
    }