1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > cropperjs插件中如何支持TIFF格式图片(可为多张图片)

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

时间:2020-09-26 20:33:19

相关推荐

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

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

cropperjs插件中如何支持TIFF格式图片(可为多张图片)第一步 先修改img 标签为canvas上传图片后尝试对canvas 重新渲染实现cropper框里的翻页

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

cropperjs插件是一款很好用的开源插件,作者也在持续更新中,我在使用这款插件的时候遇到了一个需求–支持tiff格式的图片修改,且tiff文件中可能含多张图,则要能切换并支持修改剪切。

cropperjs源码链接在此/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.tifxhr.open('GET', fileUrl);xhr.responseType = 'arraybuffer';// tslint:disable-next-line:only-arrow-functionsxhr.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);}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。