penCutout.js是一款基于Html5 Canvas 實(shí)現(xiàn)js鋼筆摳圖插件。penCutout.js仿PS中鋼筆摳圖功能，實(shí)現(xiàn)支持js前端生成摳圖、圖片等比摳圖、自定義圖片尺寸等功能。

該插件僅供學(xué)習(xí)研究，未授權(quán)商用。插件商用還請(qǐng)聯(lián)系作者，作者將提供功能齊全的商用定制化插件。

QQ : 1624484726

Email: 1624484726@qq.com

使用方法

在頁(yè)面中引入jquery.js和penCutout.js文件。

HTML結(jié)構(gòu)

初始化插件

var _penCutout = new penCutout();

_penCutout.init({

drawPanel: "drawPanel",

imgSrc: "file/target.jpg",

penColor: "#ff40ef",

width: 400,

height: 400

});

配置參數(shù)

//默認(rèn)配置項(xiàng)

this.defaults = {

//畫(huà)板容器id

drawPanel: "drawPanel",

//自動(dòng)生成canvas標(biāo)簽Id

canvasId: "canvas",

//自動(dòng)生成圖片標(biāo)簽Id

imgId: "imgCut",

//畫(huà)板寬度

width: 400,

//畫(huà)板高度

height: 400,

//摳圖圖片src

imgSrc: "file/target.jpg",

//摳圖完成填充背景圖片(默認(rèn))

imgBackSrc: "file/tranback.png",

//鋼筆色

penColor: "#0087C4",

//初始話(huà)鋼筆摳圖坐標(biāo)集合

defaultPointList: new Array(),

showTip: function (msg) {

alert(msg);

}

};

方法API

// 支持動(dòng)態(tài)修改默認(rèn)項(xiàng)

_penCutout.iniData(options);

// 獲取鋼筆摳圖坐標(biāo)點(diǎn)(可以post給后端渲染)

_penCutout.can.pointList

//重做

_penCutout.downLoad();

// 獲取剪裁圖片urlData(imgsrcData,生成圖片的寬度，生成圖片的高度)

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

//下載圖片(兼容ie8+、火狐、谷歌等主流瀏覽器)

_penCutout.downLoad();

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。