图片预览+旋转控件

功能

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">

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

image.png

【注意】

容器不可或缺，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

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);
    }