通过js包ImgAreaSelect剪切头像

最新推荐文章于 2022-09-09 14:21:52 发布

天蝎座的贱人

最新推荐文章于 2022-09-09 14:21:52 发布

阅读量1.5k

点赞数

分类专栏： jquery 文章标签： ImgAreaSelect js剪切头像

本文链接：https://blog.csdn.net/scopop/article/details/8587743

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

说明：因为有些浏览器不支持本地预览图片，所以通过js来对图片进行剪切只能通过先上传的方式在进行处理。如果想在未提交前处理图片只能通过flash方式。

官方网站：http://odyniec.net/projects/imgareaselect/

包：jquery-imgAreaselect 具体如何导入文件不再赘述各种工程的配置方法不一

简单的代码示例

<head>
    <link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
    <script type="text/javascript" src="scripts/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        $('img#photo').imgAreaSelect({
            handles: true,
            onSelectEnd: function (img, selection) {
                alert('width: ' + selection.width + '; height: ' + selection.height);
            }
        });
    });
    </script>
</head>

<body>
    <img id="photo" src="{{ g.user|avatar('big') }}" />
</body>

imgAreaSelect参数翻译介绍

属性

aspectRatio："1:1", 拖动时候的宽高比锁定

autoHide:false;选择区域松开后自动消失，默认false

classPrefix:分配给插件类名的前缀，默认imgareaselect

disable:禁用插件

enable:插件重新启用

fadeSpeed：如果大于零，显示或者隐藏插件带淡入淡出效果，默认false

handles:false;允许调整选择区域的大小

hide:选择区域隐藏（没懂）

imageHeight:500,设置当前图片的真实高度，用来处理图片有可能被缩放的

imageWidth:500,同上

instance：设置true则当前对象返回一个引用用于后续调用

keys:启动键盘操作，但具体怎么用没搞明白。

maxHeight:400, 最大可选择高度

maxWidth:400, 同上

minHeight:100, 同上

minWidth:100, 同上

movable:true,确定选择区域是否可以整体移动，也就是中间出现的手型，禁止后边线仍然可以移动默认true

parent:"bodu", 一个jquery对象被指定加入到父容器没懂

persistent：如果是true 单击选取外不重新选择，只能调整当前选区，不重要，试了没好使。

remove:false,如果设计为true删除该插件

resizable:true, 选取的大小是否可调整，默认true,没啥用

resizeMargin：宽度触发调整模式没懂

show:显示选择的区域。例如首次加载如果想默认选择一部分区域使用ias.setSelection(0, 0, 150, 150, true)；ias.setOptions({show:true})；ias.update()；

x1,y1,x2,y2:分别对应选择区域左上点的left,top右下点的left,top

zIndex：选择区域后，区域外灰色部分

函数

onInit：初始化调用

onSelectStart：开始选择

onSelectChange：选择改变中

onSelectEnd：选择结束

函数调用有两个参数，第一个为图片，第二个记录选择区域的位置信息

位置信息有x1,y1,x2,y2,widht,height几个值

样式

borderColor1改变选择区域的样式颜色

。。。样式部分不在详细介绍具体见Styling Options (Deprecated)下说明

引用

设置instance：true,会用处一个插件的引用下面代码是调用对象，生成选择区域的代码

var ias = $('img#photo').imgAreaSelect({
        handles: true,
        aspectRatio: '1:1',
        instance: true,
        onSelectEnd: function (img, selection) {
        }
    });
    
ias.setSelection(0, 0, 20, 20, true);
ias.setOptions({ show: true });
ias.update();

引用函数

getOptions 获取引用参数

setOptions：添加参数需要更新

getSelection ：获取选择区域位置

getSelection：定义选择区域位置

cancelSelection：取消当前选择

update：更新参数

实现思路

首先选择文件通过plupload(支持ajax上传)控件上传一张图片到后台存储

然后加载该图片使用imgareaselect控件处理图片

将选择的区域信息传到后台通过相应的包处理生成自己所需要的图片

注意：

剪切图片需要在图片加载完成以后调用，否则会出现位置错误。

$("#photo").attr("src","加载的图片路径");                
var img = new Image();
img.src = 加载的图片路径;
img.onload = function(){剪切插件的具体代码调用}

天蝎座的贱人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过js包ImgAreaSelect剪切头像

说明：因为有些浏览器不支持本地预览图片，所以通过js来对图片进行剪切只能通过先上传的方式在进行处理。如果想在未提交前处理图片只能通过flash方式。官方网站：http://odyniec.net/projects/imgareaselect/包：jquery-imgAreaselect 具体如何导入文件不再赘述各种工程的配置方法不一简单的代码示例
复制链接

扫一扫

专栏目录