jQuery钢笔抠图插件(原创)

 查看演示  website  立即下载

使用说明

//默认配置项 
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);
    }
};
// 使用（通过init方法覆盖默认属性，并初始化事件）
var _penCutout = new penCutout();
_penCutout.init({
    //覆盖属性               
    drawPanel: "drawPanel",
    imgSrc: "file/target.jpg",
    width: 400,
    height: 400
}); // 支持动态修改默认项
_penCutout.iniData(options); // 获取钢笔抠图坐标点（可以post给后端渲染）
_penCutout.can.pointList //重做 
_penCutout.downLoad(); // 获取剪裁图片
urlData(imgsrcData, 生成图片的宽度， 生成图片的高度)
_penCutout.createCutImg(function(imgSrcData, w, h) {}) //下载图片（兼容ie8+、火狐、谷歌等主流浏览器）
_penCutout.downLoad()

注意事项

1. 谷歌chrome本地打开index.html， 由于安全设置， 会报如下错误， 解决方案： 使用火狐或IE， 放到服务器访问不存在如下问题。

Access to image at 'file:///D:/mywork/pen-cutout-js/static/file/target.jpg'
from origin 'null'
has been blocked by CORS policy: Cross origin requests are only supported
for protocol schemes: http,
    data,
    chrome,
    chrome - extension,
    https.target.jpg: 1 Failed to load resource: net

代码有注释，请查看下载文件。

PREVIOUS:
NEXT:
时尚的多功能Bootstrap模板
js汉字笔画库