使用viewerJs替换fastadmin中表格图片预览功能，实现鼠标缩放旋转等功能

本是古典何须时尚 2024-04-01 16:11 62阅读 0赞

#### 替换fastadmin中表格图片预览功能 ####

*  原因
 *  局部替换解决方案：
 *   *  1.下载
     *  2.使用
     *   *  2.1. 在public/assets/css/backend.css中引入@import url("../../static/viewer.css");
         *  2.2. 在public/assets/js/require-backend.js中引入'viewer': '../../static/viewer',
         *  2.3. 然后在需要的页面对应的js中引入viewer
         *  2.4. 重新定义image
 *  全局替换
 *   *  1.下载
     *  2.使用
     *   *  2.1. 在public/assets/css/backend.css中引入@import url("../../static/viewer.css");
         *  2.2. 在public/assets/js/require-backend.js中引入'viewer': '../../static/viewer',
         *  2.3. 然后在public/assets/js/require-table.js中引入viewer
         *  2.4. 重新定义Table.api.formatter.image和Table.api.formatter.images
         *  2.5. 重新定义Table.api.events.image

## 原因 ##

fastadmin框架自带的表格图片格式只能放大，无法做到鼠标滚轮缩放

## 局部替换解决方案： ##

使用的是viewerJs：[github][]，[使用说明][Link 1]

### 1.下载 ###

下载它的css、js文件，  
纯JS版本：[https://github.com/fengyuanchen/viewerjs][github]  
jQuery 版本：[https://github.com/fengyuanchen/viewerjs][github]  
把css和js放到项目的public/static中

### 2.使用 ###

#### 2.1. 在public/assets/css/backend.css中引入@import url(“…/…/static/viewer.css”); ####

如有backend.min.css，将backend.css的内容复制进去，保持统一  
![在这里插入图片描述][5fe855dca42543c4bfb851db0437f0d0.png]

#### 2.2. 在public/assets/js/require-backend.js中引入’viewer’: ‘…/…/static/viewer’, ####

如有require-backend.min.js，将require-backend.js的内容复制进去，保持统一  
![在这里插入图片描述][775959a9f99b49b09ec5206dcf063f89.png]

#### 2.3. 然后在需要的页面对应的js中引入viewer ####

![在这里插入图片描述][0ec4b062536b47adae03427abd08cd48.png]

#### 2.4. 重新定义image ####

![在这里插入图片描述][d0f913115f584ff3bb6db030ea6a5a11.png]

Table.api.events.image = {
        
                    'load .img-center': function (e, value, row, index) {
        
                        $('.img-center').viewer({
        
                            url: 'data-original'
                        });
                    },
                }

然后就ok了  
![在这里插入图片描述][af88674aad2f4290958a04069bf244a1.png]

## 全局替换 ##

### 1.下载 ###

### 2.使用 ###

#### 2.1. 在public/assets/css/backend.css中引入@import url(“…/…/static/viewer.css”); ####

如有backend.min.css，将backend.css的内容复制进去，保持统一  
![在这里插入图片描述][5fe855dca42543c4bfb851db0437f0d0.png]

#### 2.2. 在public/assets/js/require-backend.js中引入’viewer’: ‘…/…/static/viewer’, ####

如有require-backend.min.js，将require-backend.js的内容复制进去，保持统一  
![在这里插入图片描述][775959a9f99b49b09ec5206dcf063f89.png]

#### 2.3. 然后在public/assets/js/require-table.js中引入viewer ####

![在这里插入图片描述][e9245100c36d4f4f927deffa55378358.png]

#### 2.4. 重新定义Table.api.formatter.image和Table.api.formatter.images ####

![在这里插入图片描述][ff3dd93632aa42e4a7a893a49fe0ce8c.png]

image: function (value, row, index) {
        
                        value = value == null || value.length === 0 ? '' : value.toString();
                        value = value ? value : '/assets/img/blank.gif';
                        var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
                        var url = Fast.api.cdnurl(value, true);
                        url = url.match(/^(\/|data:image\\)/) ? url : url + Config.upload.thumbstyle;
                        return '<ul class="viewer"><li style="list-style:none;display:inline-block;"><img data-original="' + url + '" class="' + classname + '" src="' + url + '" /></li></ul>';
                    },
                    images: function (value, row, index) {
        
                        value = value == null || value.length === 0 ? '' : value.toString();
                        var classname = typeof this.classname !== 'undefined' ? this.classname : 'img-sm img-center';
                        var arr = value != '' ? value.split(',') : [];
                        var html = [];
                        var url;
                        $.each(arr, function (i, value) {
        
                            value = value ? value : '/assets/img/blank.gif';
                            url = Fast.api.cdnurl(value, true);
                            url = url.match(/^(\/|data:image\\)/) ? url : url + Config.upload.thumbstyle;
                            html.push('<li style="list-style:none;display:inline-block;"><img data-original="' + url + '" class="' + classname + '" src="' + url + '" /></li>');
                        });
                        return '<ul class="viewer">'+html.join(' ')+'</ul>';
                    },

#### 2.5. 重新定义Table.api.events.image ####

![在这里插入图片描述][caefd222aa7e4154b4e68bc8c2c1c725.png]

'load .img-center': function (e, value, row, index) {
        
                            $('.viewer').viewer({
        
                                url: 'data-original'
                            });
                        },

然后就ok了  
![在这里插入图片描述][e3ba391a7b594ede80afbe7281a1c002.png]

[github]: https://github.com/fengyuanchen/viewerjs
[Link 1]: https://www.cnblogs.com/Jimc/p/10132177.html
[5fe855dca42543c4bfb851db0437f0d0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0911a5361f014f8193fbadf72c2218f7.png
[775959a9f99b49b09ec5206dcf063f89.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/434cfe262f2a4454a0a87553f1d26d37.png
[0ec4b062536b47adae03427abd08cd48.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b493f3eb7c214b68b701e90415295f95.png
[d0f913115f584ff3bb6db030ea6a5a11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/263f41cd69fe46f897e7bd7b3b6e0bf4.png
[af88674aad2f4290958a04069bf244a1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/86c64dfc0a49482e88f1eb5da948f546.png
[e9245100c36d4f4f927deffa55378358.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/206ea3fe679340ffa1bab4aa82ee7b74.png
[ff3dd93632aa42e4a7a893a49fe0ce8c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/c2519ea522994b38bdb8586ceedacbf3.png
[caefd222aa7e4154b4e68bc8c2c1c725.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/baf4664a370648e9ac22381e646b5f2d.png
[e3ba391a7b594ede80afbe7281a1c002.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/33598b3dd47f41f7b21a58126e27dc79.png