h5图像裁剪（基于canvas）插件Image-Clip

查看演示

插件描述：支持旋转，预览，裁剪框选择，压缩比例设置等
Image-Clip

图像的裁剪压缩

功能包括：

• canvas绘制图片
• 裁剪框选择裁剪大小
• 旋转功能
• 放大镜（方便旋转）
• 裁剪功能
• 缩放、压缩功能（通过参数控制）
  
  

使用

引入

[JavaScript] 纯文本查看 复制代码

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

全局变量

[JavaScript] 纯文本查看 复制代码

ImageClip

调用方法

[JavaScript] 纯文本查看 复制代码

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

img对象示例

[JavaScript] 纯文本查看 复制代码

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

options配置

参数	参数类 型	默认值	说明
container	String	'#imgclip'	容器的selector
img	Image	null	需要裁剪的图像对象，必须存在
isSmooth	Boolean	true	是否开启平滑模式
captureRadius	Number	30	放大镜捕获的图像像素半径
quality	Number	0.92	图像压缩质量，注意，为1的时候可能比原图还大
mime	String	'image/jpeg'	生成图像时的MIME类型
sizeTipsStyle	Number	0	大小提示框的风格，0表示按下时显示，1表示恒显示，-1表示永不显示
compressScaleRatio	Number	1	裁剪压缩时的缩放系数，最终尺寸为：屏幕像素*像素比（手机一般为2）*compressScaleRatio
iphoneFixedRatio	Number	2	在iphone情况下再放大一个系数，以解决可能的模糊问题，最终尺寸为：已计算的最终尺寸*iphoneFixedRatio
isUseOriginSize	Boolean	false	是否采用原图像素，优先级高于上述所有，如果为true，最终尺寸为：原图大小
maxWidth	Number	0	最大宽度，优先级高于上述所有，大于这个宽度的图片会强行缩放成这个宽，小于的按照上面的规则进行缩放，为0时表示不设置
forceWidth	Number	0	强制设置宽度，优先级高于上述所有，最终宽度为：forceWidth，为0时表示不设置
forceHeight	Number	0	同上，但是一般不建议设置，因为很可能会改变宽高比导致拉升，特殊场景下使用

注意：

• 默认情况下裁剪时，最终尺寸不会超过原有图像的尺寸
• 最终尺寸指的是裁剪框最大时的尺寸
• 除非设置forceHeight，否则图像的宽高比是不会变的
  
  

API

resetClipRect

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

[JavaScript] 纯文本查看 复制代码

cropImage.resetClipRect();

clip

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

[JavaScript] 纯文本查看 复制代码

cropImage.clip();

getClipImgData

获取已裁剪的图像

[JavaScript] 纯文本查看 复制代码

var base64 = cropImage.getClipImgData();

返回说明

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

rotate

旋转图片

[JavaScript] 纯文本查看 复制代码

cropImage.clip(isClockWise);

参数说明

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

destroy

销毁当前的裁剪对象

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

[JavaScript] 纯文本查看 复制代码

cropImage.destroy();

h5图像裁剪（基于canvas）插件Image-Clip

查看演示

插件描述：支持旋转，预览，裁剪框选择，压缩比例设置等
Image-Clip

图像的裁剪压缩

功能包括：

• canvas绘制图片
• 裁剪框选择裁剪大小
• 旋转功能
• 放大镜（方便旋转）
• 裁剪功能
• 缩放、压缩功能（通过参数控制）
  
  

使用

引入

[JavaScript] 纯文本查看 复制代码

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

全局变量

[JavaScript] 纯文本查看 复制代码

ImageClip

调用方法

[JavaScript] 纯文本查看 复制代码

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

img对象示例

[JavaScript] 纯文本查看 复制代码

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

options配置

参数	参数类 型	默认值	说明
container	String	'#imgclip'	容器的selector
img	Image	null	需要裁剪的图像对象，必须存在
isSmooth	Boolean	true	是否开启平滑模式
captureRadius	Number	30	放大镜捕获的图像像素半径
quality	Number	0.92	图像压缩质量，注意，为1的时候可能比原图还大
mime	String	'image/jpeg'	生成图像时的MIME类型
sizeTipsStyle	Number	0	大小提示框的风格，0表示按下时显示，1表示恒显示，-1表示永不显示
compressScaleRatio	Number	1	裁剪压缩时的缩放系数，最终尺寸为：屏幕像素*像素比（手机一般为2）*compressScaleRatio
iphoneFixedRatio	Number	2	在iphone情况下再放大一个系数，以解决可能的模糊问题，最终尺寸为：已计算的最终尺寸*iphoneFixedRatio
isUseOriginSize	Boolean	false	是否采用原图像素，优先级高于上述所有，如果为true，最终尺寸为：原图大小
maxWidth	Number	0	最大宽度，优先级高于上述所有，大于这个宽度的图片会强行缩放成这个宽，小于的按照上面的规则进行缩放，为0时表示不设置
forceWidth	Number	0	强制设置宽度，优先级高于上述所有，最终宽度为：forceWidth，为0时表示不设置
forceHeight	Number	0	同上，但是一般不建议设置，因为很可能会改变宽高比导致拉升，特殊场景下使用

注意：

• 默认情况下裁剪时，最终尺寸不会超过原有图像的尺寸
• 最终尺寸指的是裁剪框最大时的尺寸
• 除非设置forceHeight，否则图像的宽高比是不会变的
  
  

API

resetClipRect

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

[JavaScript] 纯文本查看 复制代码

cropImage.resetClipRect();

clip

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

[JavaScript] 纯文本查看 复制代码

cropImage.clip();

getClipImgData

获取已裁剪的图像

[JavaScript] 纯文本查看 复制代码

var base64 = cropImage.getClipImgData();

返回说明

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

rotate

旋转图片

[JavaScript] 纯文本查看 复制代码

cropImage.clip(isClockWise);

参数说明

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

destroy

销毁当前的裁剪对象

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

[JavaScript] 纯文本查看 复制代码

cropImage.destroy();