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

所属分类:媒体-图像

 43503  375  查看评论 (14)
分享到微信朋友圈
X
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图片合成插件

上传背景图,主图1,主图2,主图3,合成一张图片
  图像
 29338  319

jQuery图片裁剪插件Cropper.js

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

html5前端图片压缩

html5前端图片压缩
  图像
 85030  454

可视化的交互图形库Cytoscape.js

Cytoscape.js ? 用于数据分析和可视化的交互图形库
  图像
 53831  343

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

    我可以 0
    2020/2/19 11:25:52
    这个好像控制不了裁剪框的比例
        谢骊骏0
        2021/5/24 9:40:53
        我看的版本可以了啊
    回复
    376793248 0
    2018/8/8 11:39:40
    在iphone7plus上截图,截出来的图片都是空白的,有人遇到过么?
        3767932480
        2018/8/10 15:50:42
        是在ios10.1.1系统版本上遇到的,有人遇到过这问题么?
        西瓜0
        2018/8/10 16:27:58
        我这里测试正常的哦。
    回复
    幸福~手掌 0
    2018/7/27 14:58:17
    能控制裁剪框的比例吗 回复
    幸福~手掌 0
    2018/7/27 10:12:12
    裁剪时图片可拖动放大放小吗 回复
    齐力-张明阳 0
    2018/7/11 9:56:10
    不能固定宽高度 回复
    Mark、单 0
    2018/6/7 23:16:37
    我想要已进入这个页面就调用点击了本地上传的事件要怎么添加啊,求大神指导 回复
    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
        2018/5/27 20:13:34
        一个页面怎么用,有多个地方上传图?
    回复
    瓶子 0
    2017/12/14 13:46:22
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复