当前位置：首页 > 网页特效 > 图像/媒体

js钢笔抠图插件

分类：图像/媒体日期：2024-05-14 点击(0) 评论(0)

js钢笔抠图插件

简介

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

```html
<script src="jquery.min.js"></script>
<script src="penCutout.js"></script>
```
#####  HTML结构
```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">
```
#####  初始化插件
```html
var _penCutout = new penCutout();
_penCutout.init({
    drawPanel: "drawPanel",
    imgSrc: "file/target.jpg",
    penColor: "#ff40ef",
    width: 400,
    height: 400
});
```
#####  配置参数
```html
//默认配置项
 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
```html
// 支持动态修改默认项
_penCutout.iniData(options);
 
// 获取钢笔抠图坐标点（可以post给后端渲染）
_penCutout.can.pointList
 
//重做
 _penCutout.downLoad();
 
// 获取剪裁图片urlData(imgsrcData,生成图片的宽度，生成图片的高度)
_penCutout.createCutImg(function (imgSrcData, w, h) {})
 
//下载图片（兼容ie8+、火狐、谷歌等主流浏览器）
_penCutout.downLoad();
```

web299.com

js钢笔抠图插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果