jquery.photoClip图片裁剪添加旋转缩放按钮功能

所属分类：媒体-图像

28736 319 查看评论 (19)

分享到微信朋友圈

查看演示立即下载

插件描述：项目上用的jquery.photoClip 插件，为了更好的用户体验需要添加旋转缩放按钮功能，所以在原有的基础上添加了点功能，希望能帮助各位，写的不好海涵！

* @brief支持手势的裁图插件

*在移动设备上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度

*在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度

* @option_param {array} size 截取框的宽和高组成的数组。默认值为[260,260]

* @option_param {array} outputSize 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小

* //@option_param {string} outputType 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"

* @option_param {string} file 上传图片的<input type="file">控件的选择器或者DOM对象

* @option_param {string} view 显示截取后图像的容器的选择器或者DOM对象

* @option_param {string} ok 确认截图按钮的选择器或者DOM对象

* @option_param {string} rotaBtn 旋转图片按钮的选择器或者DOM对象

* @option_param {string} bigBtn 放大图片按钮的选择器或者DOM对象

* @option_param {string} samllBtn 缩小图片按钮的选择器或者DOM对象

* @option_param {function} loadStart 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入

* @option_param {function} loadComplete 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入

* @option_param {function} loadError 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入

* @option_param {function} clipFinish 裁剪完成的回调函数。this指向原图片对象，会将裁剪出的图像数据DataURL作为

HTML5网格图片览悬

jQuery任务栏（原创）

移动端图片滤镜效果

在手机上常用到的图片滤镜效果

图像

28854 385

jQuery放大镜插件jqzoom.js

图像

101441 435

jQuery图片裁剪插件Cropper.js

功能非常强大的图片裁剪插件Cropper.js

图像

35202 353

二维码生成插件qrcode.js

二维码生成插件qrcode.js，在此插件基础上添加了logo图片功能和对中文的支持，无需对中文转码可直接支持生成中文网址二维码

图像

29897 375

讨论这个项目（19）回答他人问题或分享插件使用方法奖励jQ币评论用户自律公约

不负好时光 0

2021/1/21 14:18:41

不负好时光1

2021/1/21 15:53:43

借用楼主的方法重新写了旋转图片，可自由调整角度，实力为10度。

var rr = 0;

function rotateCW(point) {
    //rotateBy(90, point);


    //重新定义旋转
    var loacl;
    if (!point) {
        loacl = loaclToLoacl($moveLayer, $clipView, clipWidth * .5, clipHeight * .5);
    } else {
        loacl = globalToLoacl($moveLayer, point.x, point.y);
    }
    var origin = calculateOrigin(curAngle, loacl), // 旋转中使用的参考点坐标
        originX = origin.x,
        originY = origin.y;

    rr -= 10;
    var style = {};
    style[prefix + "transform"] = " rotate(" + rr + "deg)";
    style[prefix + "transform-origin"] = originX + "px " + originY + "px";
    $rotateLayer.css(style);
}

不负好时光0

2021/1/22 10:33:30

楼主这个我自己写的旋转10没问题但是就是裁剪不出来求帮忙了，解决不了了。