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

所属分类:媒体-图像

 4967  43  查看评论 (4)
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图片裁剪插件Cropit

Cropit 是款自定义裁剪和缩放图像的jQuery插件
  图像
 17195  47

jQuery切图插件(原创)

基于jQuery实现的类似ps切图工具
  图像
 11  0

移动端图片滤镜效果

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

html5前端图片压缩

html5前端图片压缩
  图像
 50276  144

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

    LONGYAOBANG# 0
    2018/5/14 15:57:47
    oOo0oミ 0
    2018/4/10 10:35:31
    一个页面如果有多个地方上传图片,每个地方都需要裁剪,如何解决?亲~你们有遇到这个问题吗? 回复
    oOo0oミ 0
    2018/4/10 10:25:27
    瓶子 0
    2017/12/14 13:46:22
取消回复