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 配置数据
  • ratioWH Number 输出图片的宽高比,如果不为零，剪切框伸缩会固定
  • outputWH String 输出分辨率，不设定按图片分辨率比例输出。格式为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] (默认值: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] (默认值:0.92)
• 返回 Promise|underfind

输出裁剪图片，返回图片的blob数据

imgclip.toBlob(function(blobData){
	console.log(blobData);
});
//支持使用Promise异步调用
imgclip.toBlob().then(function(blobData){
	console.log(blobData);
});