h5图像裁剪(基于canvas)插件Image-Clip

所属分类:媒体-图像

 2124  32  查看评论 (1)
h5图像裁剪(基于canvas)插件Image-Clip ie兼容12

Image-Clip

图像的裁剪压缩

功能包括:

  • canvas绘制图片

  • 裁剪框选择裁剪大小

  • 旋转功能

  • 放大镜(方便旋转)

  • 裁剪功能

  • 缩放、压缩功能(通过参数控制)

使用

引入

dist/image-clip.css
dist/image-clip.js

全局变量

ImageClip

调用方法

var cropImage = new ImageClip(options);
cropImage.method()

img对象示例

var img = new Image();

img.src = b64;

img.onload = function() {
    // 需要在onload中进行操作
    new ImageClip(...);
};

options配置

参数参数类型默认值说明
containerString'#imgclip'容器的selector
imgImagenull需要裁剪的图像对象,必须存在
isSmoothBooleantrue是否开启平滑模式
captureRadiusNumber30放大镜捕获的图像像素半径
qualityNumber0.92图像压缩质量,注意,为1的时候可能比原图还大
mimeString'image/jpeg'生成图像时的MIME类型
sizeTipsStyleNumber0大小提示框的风格,0表示按下时显示,1表示恒显示,-1表示永不显示
compressScaleRatioNumber1裁剪压缩时的缩放系数,最终尺寸为:屏幕像素*像素比(手机一般为2)*compressScaleRatio            
iphoneFixedRatioNumber2iphone情况下再放大一个系数,以解决可能的模糊问题,最终尺寸为:已计算的最终尺寸*iphoneFixedRatio            
isUseOriginSizeBooleanfalse是否采用原图像素,优先级高于上述所有,如果为true,最终尺寸为:原图大小            
maxWidthNumber0最大宽度,优先级高于上述所有,大于这个宽度的图片会强行缩放成这个宽,小于的按照上面的规则进行缩放,为0时表示不设置
forceWidthNumber0强制设置宽度,优先级高于上述所有,最终宽度为:forceWidth,为0时表示不设置
forceHeightNumber0同上,但是一般不建议设置,因为很可能会改变宽高比导致拉升,特殊场景下使用

注意:

  • 默认情况下裁剪时,最终尺寸不会超过原有图像的尺寸

  • 最终尺寸指的是裁剪框最大时的尺寸

  • 除非设置forceHeight,否则图像的宽高比是不会变的

API

resetClipRect

重置裁剪框,重新变为最大

cropImage.resetClipRect();

clip

裁剪图像,根据当前的裁剪框进行裁剪

cropImage.clip();

getClipImgData

获取已裁剪的图像

var base64 = cropImage.getClipImgData();

返回说明

参数参数类型说明
base64String裁剪后的图像的base64数据

rotate

旋转图片

cropImage.clip(isClockWise);

参数说明

参数参数类型说明
isClockWiseBoolean是否是顺时针旋转

destroy

销毁当前的裁剪对象

如果一个容器需要重新生成裁剪对象,一定要先销毁以前的

cropImage.destroy();
相关插件-图像

jQuery创建缩略图插件jQThumb

jqthumb是一个jQuery插件用来按比例创建图像的缩略图,在旧的浏览器替代缩略图背景大小。它可以在jQuery V1.3 IE6以上工作。
  图像
 16956  24

shearphoto1.3截取头像,拍照截图,美工切图插件

shearphoto1.3截取头像,拍照截图,美工切图插件,本代码均采用原生JS编写 绝对不含第三方代码,绝对超越JCROP和富头像, 如果你要找截图插件,除了shearphoto,你别为选择 是一个专门为前端截图开发的功能齐全,接口丰富的专业插件
  图像
 15558  111

简单功能强大的jQuery图片剪裁插件Image Cropper

相信很多朋友都在大型的网站,如新浪微博、QQ微博上看到过头像裁图工具,感觉很高大尚吧,今天朋友们有福了,今天就来说一说一款这么高大尚的插件cropper,cropper是一款使用简单且功能强大的图片剪裁jQuery插件。该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用。
  图像
 19935  104

jQueryphotoClip图片剪裁插件

jQueryphotoClip是一款支持移动设备触摸手势的图片裁剪jQuery插件。
  图像
 35058  98

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    瓶子 0
    2017/12/14 13:46:22
取消回复