html 图片剪裁控件,h5图像裁剪(基于canvas)插件Image-Clip
插件描述:支持旋转,预览,裁剪框选择,压缩比例设置等
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
iphoneFixedRatioNumber2在iphone情况下再放大一个系数,以解决可能的模糊问题,最终尺寸为:已计算的最终尺寸*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();
html 图片剪裁控件,h5图像裁剪(基于canvas)插件Image-Clip相关推荐
- 图片剪裁控件——ClipImageView
这段时间在做自己的项目时,须要使用到图片剪裁功能,当时大概的思考了一些需求.想到了比較简单的实现方法.因此就抽了点时间做了这个图片剪裁控件--ClipImageView 这里先贴上ClipImageV ...
- 原创“.NET研究”企业级控件库之图片浏览控件
在上两篇:我介绍了原创企业级控件库之组合查询控件 和原创企业级控件库之大数据量分页控件,受到了很多朋友的支持,给了我很大的动力,在此我特表感谢.有的朋友要求把源码提供上来,我在第一篇就讲了,源码会在我 ...
- Android学习笔记26:图片切换控件ImageSwitcher的使用
在Windows操作系统中,要查看多张图片,可以通过使用"Windows照片查看器"在"上一张"和"下一张"之间切换,进行多张图片的浏览. ...
- 标签超出图像控件c语言,VC++标签控件之图像标签控件
一.创建新工程 二.编辑对话框资源 1.添加控件 2.添加位图 点"插入",点"资源", 编辑位图: 三.添加变量 四.添加代码(红色部分) BOOL CCIm ...
- android 仿照ios 图片选择,GitHub - wildma/PictureSelector: Android 图片选择器(仿 IOS 图片选择控件)...
PictureSelector Android 图片选择器(仿 IOS 图片选择控件) 效果图 功能特点 支持通过拍照获取图片 支持通过相册获取图片 支持图片是否裁剪两种场景 支持仿 IOS 底部弹出 ...
- 图片盒子控件 winform 114868210
图片盒子控件 winform 114868210 引入控件 放图片 控制图片的大小 效果 图片变的与控件一模一样大
- Android实现图片滚动控件,含页签功能,让你的应用像淘宝一样炫起来
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8769904 首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我 ...
- Android微信九宫格图片展示控件
版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/214 Android微信九宫格图片展示控件 半年前,公司产 ...
- 模仿微信九宫格图片展示控件
主题 仿微信九宫格图片展示控件 github地址:点击打开链接 使用方法以及源码都在github上面
最新文章
- 守护进程中创建的对象php,在PHP中生成守护进程(Daemon Process)
- 修改系统路径 linux,Linux修改sudo的PATH路径的解决方法
- 大数据下的质量体系建设
- JavaWeb基础(jsp初识)
- SQL生成日期维度(到小时)
- js img转换base64
- avg最多用多少列 mysql_40斤一桶水,最多用多少克磷酸二氢钾?打几次增产效果最好...
- 12.Kong入门与实战 基于Nginx和OpenResty的云原生微服务网关 --- 高级案例实战
- 联想小新打印机M7268W配置步骤
- nutch2.3.1 mysql_nutch 安装部署 以nutch2.3.1 为例
- 计算机常用的辅存储器是,计算机常用的辅存储器有
- 哈铁职业学院 计算机,--哈尔滨铁道职业技术学院
- 几何公差基础知识之圆柱度
- 曼陀罗花对女性有什么作用?
- pkusc2016滚粗记
- 判断一个数是否为质数的三种方法
- 如何找出1000以内的“完数“
- 牛顿法迭代法 | matlab实现
- wps在Ubuntu不能使用中文
- 结对作业之需求分析与原型设计
热门文章
- 十种经典排序算法精粹(c语言版本)
- 在Ubuntu 14.04 64bit上为Sublime text 3安装搜狗拼音输入法
- Maya与Substance Painter风格化材质阴影和照明学习教程
- c4d+ps打造抽象NFT加密艺术 Create Abstract NFT Crypto Art with Cinema 4D + Photoshop
- nvidia-jetson系列硬件平台上安装Qt
- Typedef用法(转载)
- WC2018集训 吉老师的军训练
- Linux日常命令记录
- vagrant 介绍,安装与使用
- 安卓学习-其他-文件读写