1.0.9 • Published 2 years ago
s94-imgclip v1.0.9
s94-ImgClip
图片裁剪工具
安装
$ npm install s94-imgclip
使用
var ImgClip = require('s94-imgclip');
imgclip = new ImgClip(document.querySelector('#imgclip'));// 第一步、在容器(#imgclip)中构建裁剪工具
var img = new Image();
img.onload = ()=>{
imgclip.start(img); // 第二步、指定需要裁剪的图片,img必须为Image对象
}
img.src='http://s94.top/uploads/default_head_img0.jpg';
//在裁剪工具上调整自己需要的区域
//第三步,输出图片数据,有两种方式:一种是base64,一般用于直接显示;一种是Blob,可以用于FormData上传
document.querySelector('#clip-out').src = imgclip.toBase64();//base64
imgclip.toBlob(function(blobData){
console.log(blobData);
});
属性和方法
new ImgClip(outer[, config]) 构造方法
start(img[, config]) 传入需要处理的图片,开始剪切
rotate(deg) 图像旋转
clean() 清理画板
toBase64([type, quality]) 返回裁剪图片的base64数据
clip([type, quality]) toBase64的别名
toBlob(callback[, type, quality]) 返回裁剪图片的blob数据
new ImgClip(outer, config)
- outer
Node
构建裁剪工具的容器,必须为节点,且nodeType==1 - config
Object
配置数据 - ratioWHNumber
输出图片的宽高比,如果不为零,剪切框伸缩会固定 - outputWHString
输出分辨率,不设定按图片分辨率比例输出。格式为W*H,如400*400(宽400高400),400(宽400高自适应),*400(高400宽自适应) - 返回
ImgClip
裁剪工具对象在outer内构建裁剪作业的canvas
var ImgClip = require('s94-imgclip');
imgclip = new ImgClip(document.querySelector('#imgclip'));
start(img, config)
- img
Image
裁剪的图片对象 - config
Object
同构造函数中的config,区别在于此处的config只对当前图片生效 - 返回
ImgClip
当前裁剪工具对象传入需要处理的图片img
var img = new Image();
img.onload = ()=>{
imgclip.start(img); // 第二步、指定需要裁剪的图片,img必须为Image对象
}
img.src='http://s94.top/uploads/default_head_img0.jpg';
rotate(deg)
- deg
Number
图像旋转的弧度,注意此处传入的是弧度,而非角度,Math.PI=180度 - 返回
ImgClip
当前裁剪工具对象图像旋转
imgclip.rotate(Math.PI*0.5); //旋转90度
clean()
- 返回
ImgClip
当前裁剪工具对象清理画板,移除裁剪的图片,再次使用,需要重新调用
start
imgclip.clean();
toBase64(type, quality)
- type
String
表示生成图片类型jpg,png,webp。(默认值:png) - quality
Number
表示生成图片质量0-1 - 返回
String
图片的base64数据输出裁剪图片,返回图片的base64数据
console.log(imgclip.toBase64()); //data:image/png;base64,iVBOR.....
clip(type, quality)
toBase64的别名
console.log(imgclip.clip()); //data:image/png;base64,iVBOR.....
toBlob(callback, type, quality)
- callback
Function
回调函数,用于接收裁剪后图片的Blob数据 - type
String
表示生成图片类型jpg,png,webp。(默认值:png) - quality
Number
表示生成图片质量0-1 - 返回
Promise
|underfind
输出裁剪图片,返回图片的blob数据
imgclip.toBlob(function(blobData){
console.log(blobData);
});
//支持使用Promise异步调用
imgclip.toBlob().then(function(blobData){
console.log(blobData);
});