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

资源出处：https://www.moyublog.com/codes/6977.html