jQuery钢笔抠图插件(原创)

查看演示立即下载

插件描述：通过Canvas实现钢笔抠图效果

使用说明

//默认配置项 
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 '/'
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

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

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： js汉字笔画库
下一个特效：时尚的多功能Bootstrap模板