伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:媒体-图像
 2258  34  查看评论 (1)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 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();
相关伟德BETVICTOR-图像

jQuery放大镜伟德BETVICTORjqzoom.js

jQuery放大镜伟德BETVICTORjqzoom.js
  图像
 25774  80

svgmap地图

svgmap实现中国地图。
  图像
 21664  155

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

Cytoscape.js – 用于数据分析和可视化的交互图形库
  图像
 19825  44

html5前端图片压缩

html5前端图片压缩
  图像
 46464  140

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

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