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

原因

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

局部替换解决方案：

使用的是viewerJs：github，使用说明

1.下载

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

2.使用

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

如有backend.min.css，将backend.css的内容复制进去，保持统一

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

如有require-backend.min.js，将require-backend.js的内容复制进去，保持统一

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

2.4. 重新定义image

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

然后就ok了

全局替换

1.下载

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

2.使用

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

如有backend.min.css，将backend.css的内容复制进去，保持统一

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

如有require-backend.min.js，将require-backend.js的内容复制进去，保持统一

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

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

				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 '
+ url + '" class="' + classname + '" src="' + url + '" />
';
                },
                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('
+ url + '" class="' + classname + '" src="' + url + '" />
');
                    });
                    return '
'+html.join(' ')+'
';
                },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

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

然后就ok了