仿ps画布钢笔抠图工具代码

jQuery基于canvas画布获取图片文件，利用钢笔工具点到点绘制图片轮廓，可拖动点来调整，进行抠图裁剪下载等功能。这是一款仿ps钢笔图片抠图工具代码。

[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程

使用方法：

1、head引入css文件

<link href="css/penCutout.css" rel="stylesheet"/>

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/penCutout.js"></script>

<script type="text/javascript">
$(function () {
	
	// 使用（通过init方法覆盖默认属性，并初始化事件）
	var _penCutout = new penCutout();
	_penCutout.init({
		//覆盖属性   
		drawPanel: "drawPanel",
		imgSrc: "file/target.jpg",
		penColor: "#ff40ef",
		width: 400,
		height: 400
	});
	//事件
	$("#btnPoints").click(function () {
		alert(JSON.stringify(_penCutout.can.pointList));
	})
	$("#btnCut").click(function () {
		_penCutout.createCutImg(function (imgSrcData, w, h) {
			$("#imgCutShow").attr("src", imgSrcData).css({"display": "block", "width": w, "height": h});
		})
	})
	$("#btnDown").click(function () {
		_penCutout.downLoad();
	})
	$("#redo").click(function () {
		_penCutout.ReDo();
	})
})
</script>

3、body引入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">

文件目录

本资源来自：帝国CMS模板代码 » html5实例 » 仿ps画布钢笔抠图工具代码

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！