js钢笔抠图插件

当前位置:主页 > Html5库 > html5 canvas > js钢笔抠图插件
js钢笔抠图插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-05-31
    阅读:
简要教程

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

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

  • QQ : 1624484726
  • Email: 1624484726@qq.com

使用方法

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

<script src="jquery.min.js"></script>
<script src="penCutout.js"></script>
                
HTML结构
<div class="canvasDiv" id="drawPanel">
</div>
<div class="tools">
    <input type="button" value="坐标" id="btnPoints">
    <input type="button" value="重做" id="redo"/>
    <input type="button" value="裁剪" id="btnCut"/>
    <input type="button" value="下载" id="btnDown"/>
</div>
<img id="imgCutShow">
                
初始化插件
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();
                

penCutout.js插件的github网址为:https://github.com/zefengguo/pencutout_js