仿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">

使用声明

1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后，只拥有使用权，著作权归原作者及17素材网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。

查看演示下载资源

38 4118 5