微信扫码登录 ×
仿ps画布钢笔抠图工具代码

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

收藏
仿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. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。

x
×
×

注册

QQ注册 立即下载 微信注册 立即下载

签到成功!

已连续签到1天,连续签到3天可获得50积分

知道了