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();

總結

以上是生活随笔為你收集整理的html5自动抠图api,js钢笔抠图插件_jQuery之家-自由分享jQuery、html5、css3的插件库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。