html5自动抠图api,js钢笔抠图插件_jQuery之家-自由分享jQuery、html5、css3的插件库

penCutout.js是一款基于Html5 Canvas 实现js钢笔抠图插件。penCutout.js仿PS中钢笔抠图功能，实现支持js前端生成抠图、图片等比抠图、自定义图片尺寸等功能。

该插件仅供学习研究，未授权商用。插件商用还请联系作者，作者将提供功能齐全的商用定制化插件。

QQ : 1624484726

Email: 1624484726@qq.com

使用方法

在页面中引入jquery.js和penCutout.js文件。

HTML结构

初始化插件

var _penCutout = new penCutout();

_penCutout.init({

drawPanel: "drawPanel",

imgSrc: "file/target.jpg",

penColor: "#ff40ef",

width: 400,

height: 400

});

配置参数

//默认配置项

this.defaults = {

//画板容器id

drawPanel: "drawPanel",

//自动生成canvas标签Id

canvasId: "canvas",

//自动生成图片标签Id

imgId: "imgCut",

//画板宽度

width: 400,

//画板高度

height: 400,

//抠图图片src

imgSrc: "file/target.jpg",

//抠图完成填充背景图片(默认)

imgBackSrc: "file/tranback.png",

//钢笔色

penColor: "#0087C4",

//初始话钢笔抠图坐标集合

defaultPointList: new Array(),

showTip: function (msg) {

alert(msg);

}

};

方法API

// 支持动态修改默认项

_penCutout.iniData(options);

// 获取钢笔抠图坐标点(可以post给后端渲染)

_penCutout.can.pointList

//重做

_penCutout.downLoad();

// 获取剪裁图片urlData(imgsrcData,生成图片的宽度，生成图片的高度)

_penCutout.createCutImg(function (imgSrcData, w, h) {})

//下载图片(兼容ie8+、火狐、谷歌等主流浏览器)

_penCutout.downLoad();