html5自动抠图api,js钢笔抠图插件_jQuery之家-自由分享jQuery、html5、css3的插件库

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

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

QQ : 1624484726

Email: 1624484726@qq.com

使用方法

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

HTML结构

初始化插件

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();

html5自动抠图api,js钢笔抠图插件_jQuery之家-自由分享jQuery、html5、css3的插件库相关推荐

$.post html5,$.post(url,[data],[fn],[type])_jQuery之家-自由分享jQuery、html5、css3的插件库...
示例 1描述: 请求 test.php 网页,忽略返回值: jQuery 代码: $.post("test.php"); 2描述: 请求 test.php 页面,并一起发送一些额外 ...
html添加分享按钮,分享按钮-jQuery之家-自由分享jQuery、html5、css3的插件库
Overview: To list social accounts or share any page with 46 icons. 点击按钮开始分享: 选中下面红色的文字就会出现分享按钮: Hi! ...
html5 自动扣图,js+html5 canvas实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
html5 自动失去焦点,js input失去焦点事件
JS中,何为鼠标失去焦点事件??是onmouseout事件. 用法举例: 鼠标离开文本框的时候触发JS的chk()方法. js 怎样判断ipunt失去焦点 js input失去焦点事件 onfocus ...
基于HTML5+CSS+JavaScript+ Three.js实现的Free-Form-Deformation（FFD三维自由变形）
资源下载地址:https://download.csdn.net/download/sheziqiong/85610855 一.实验目的和要求掌握 FFD 变形算法的思想与实现原理. 能够实现交互控 ...
figma有哪些插件比较好用，分享5款必备figma插件
用过 Sketch 的同学都体会过插件的重要性,目前 Figma 的插件所覆盖的功能已经不输给 Sketch 了,基本上你在 Sketch 常用的插件,在 Figma 都能找到,不仅如此,Figma ...
html5 canvas+js实现ps钢笔抠图（速抠图 www.sukoutu.com）
html5 canvas+js实现ps钢笔抠图(速抠图 www.sukoutu.com) 根据html5 canvas+js实现ps钢笔抠图的实现,aiaito 开发者开发了一套在线抠图工具,速抠 ...
html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图原文:https://www.cnblogs.com/guozefeng/p/3719915.html 1. 项目要求需要用js实现photoshop中 ...
水系图一般在哪里找得到_一款支持智能抠图、钢笔抠图的在线抠图工具上线了速抠图 sukoutu.com...
简介: 速抠图 sukoutu.com 是一款公益性质的免费在线快速抠图工具,支持8倍高清智能抠图.钢笔抠图.矩阵抠图.图片压缩.图片尺寸调整等,该工具旨在为用户提供更快捷高效的抠图服务. 背景对于 ...

html5自动抠图api,js钢笔抠图插件_jQuery之家-自由分享jQuery、html5、css3的插件库

html5自动抠图api,js钢笔抠图插件_jQuery之家-自由分享jQuery、html5、css3的插件库相关推荐

最新文章

热门文章