图片预览+旋转控件

功能

1. 点击图片后，弹出预览窗口；
2. 可在预览窗口中查看前一张、后一张
3. 工具栏包括“全屏查看、放大、缩小、旋转、保存旋转”
4. 预览窗口右上角的关闭按钮
5. 鼠标滚轮缩放支持
6. 同一页面支持多组图片预览，互不干扰

集成说明

1. 将压缩包中文件释放到站点资源文件目录中，如 /Public/script/jquery-photo-gallery，包含如下文件：

   
   image.png
   

   【注意1】这些文件，不用做任何修改，放在这里，知道相对于站点根的路径即可；
   【注意2】其中的jquery.js 如果已经加载，则也不需要重复引入。

2. 在View模板文件里，引入js脚本：

script src="/Public/script/jquery-photo-gallery/core.js"></script>

3. 对需要该效果的图片组，在模板中，以这样的html代码进行生成：

image.png

【注意】<div class="gallerys"> 容器不可或缺，class包含 gallery-pic，并给以 onclick 事件（也可以通过jq绑定事件） onclick="$.openPhotoGallery(this)"

4. 在该模板中，或该模板引入的js文件中，编写一个名为 ROTATE_IMAGE_CALLBACK 的function，用于处理点击“保存图片旋转”按钮之后的事件，该方法需要接受一个参数 iframeDocument，本控件使用 iframe 方式实现预览窗口，iframeDocument 即该 iframe 的 document 对象，代码里用于定位到 iframe，并在提交到服务器保存旋转成功后 更新该 iframe 中的图片src等数据；
   示例代码：

    // 保存旋转后的图片 callback
    function ROTATE_IMAGE_CALLBACK(iframeDocument) {
        // 定位当前显示/处理的图片
        var img = $('.image.active', iframeDocument).eq(0);
        var src = img.attr('src');

        // 如果同一页面里有多个需要预览的组，则需要在此处理需要提交到服务器的文件name，可自由发挥
        // /wfjbdata/Files/13888638459_1493956330_1.jpg?ts=1498789451
        // /Public/Resource/image/3C4909B8-6748-48D3-B70D-F0F3DFFCA4A0-1493956223/3C4909B8-6748-48D3-B70D-F0F3D56223b.jpg?ts=1498789286683
        var re=[/(\d+_)+\d+\.\w+/i, /([\d\w]+\-)+[\d\w]+\.\w+/i];
        var ma, name='', deg = 0;

        for(var i=0,len=re.length; i<len; i++) {
            if((ma=re[i].exec(src)) && ma[0]) {
                name = ma[0];
                break;
            }
        }

        // 没取到名字
        if(!name) {
            alert('图片路径匹配失败，请检查后重试');
            return false;
        }

        // 获取旋转角度
        var className = img.attr('class').replace('image active', '');
        if(className != '') {
            deg = className.replace(' rotate', '').replace(' ', '');
        }

        console.log(name, deg);

        // 提交服务器进行处理
        $.ajax({
            'url':"/index.php/Admin/Report/doRotate",
            'type':"post",
            'data':{
                'name':name,
                'deg':deg
            },
            'dataType':"json",
            'success':function (data) {
                // 如果检测到错误，匹配方法各个项目不一样
                if(data == 'false') {
                    alert('图片旋转保存失败！');
                    return;
                }

                var ts=new Date().getTime();

                // 将原始缩略图重新加载，并重置相关参数
                // 定位原始缩略图
                var imgThumb = $("img.gallery-pic[src*='" + name + "']").eq(0);
                imgThumb.attr('src',  '/Wfjbdata/Files/' + name + '?t=' + ts);

                // 将本页中所有 img.image.active 的 src 中的 ts 替换为当前时间，以重新加载
                $('img.image.active', iframeDocument).each(function (index, ele) {
                    ele=$(ele);
                    ele.attr({
                        'src':ele.attr('src').replace(/\?ts=\d+/i, '?ts=' + ts),
                        'class':ele.attr('class').replace(/\s*rotate\d+/i, '')
                    });

                    return true;
                });
            }
        });

    }

5. 附上服务器端的处理代码，各个项目需要微调对图片路径的相关处理：

    //处理图片旋转
    public function doRotate() {
        // 13888638459_1493956330_1.jpg
        // 3C4909B8-6748-48D3-B70D-F0F3D56223b.jpg
        $filename = I('name');
        $degrees = -I('deg');

        // 如果要在浏览器中直接显示图片，则需要设置 header
        // header('Content-type: image/jpeg');

        $realPath = VIDEO_PATH.$filename;

        // 加载
        $source = imagecreatefromjpeg($realPath);

        // 旋转
        $rotate = imagerotate($source, $degrees, 0);

        // 输出
        $res = Imagejpeg($rotate, $realPath, 100);

        if ($res) {//保存图片
            echo json_encode($filename);
        }else{
            echo json_encode('false');
        }

        imagedestroy($rotate);
    }