PenCutout 钢笔抠图插件

创客云


penCutout.js是一款基于Html5 Canvas 实现js钢笔抠图插件,penCutout.js仿PS中钢笔抠图功能,实现支持js前端生成抠图、图片等比抠图、自定义图片尺寸等功能。该插件仅供学习研究,未授权商用,插件商用还请联系作者,作者将提供功能齐全的商用定制化插件。

使用方法

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

  1. <script src="jquery.min.js"></script>
  2. <script src="penCutout.js"></script>

HTML结构

  1. <div class="canvasDiv" id="drawPanel">
  2. </div>
  3. <div class="tools">
  4.     <input type="button" value="坐标" id="btnPoints">
  5.     <input type="button" value="重做" id="redo"/>
  6.     <input type="button" value="裁剪" id="btnCut"/>
  7.     <input type="button" value="下载" id="btnDown"/>
  8. </div>
  9. <img id="imgCutShow">

初始化插件

  1. var _penCutout = new penCutout();
  2. _penCutout.init({
  3.     drawPanel: "drawPanel",
  4.     imgSrc: "file/target.jpg",
  5.     penColor: "#ff40ef",
  6.     width: 400,
  7.     height: 400
  8. });

配置参数

  1. //默认配置项
  2.  this.defaults = {
  3.     //画板容器id
  4.     drawPanel: "drawPanel",
  5.     //自动生成canvas标签Id
  6.     canvasId: "canvas",
  7.     //自动生成图片标签Id
  8.     imgId: "imgCut",
  9.     //画板宽度
  10.     width: 400,
  11.     //画板高度
  12.     height: 400,
  13.     //抠图图片src
  14.     imgSrc: "file/target.jpg",
  15.     //抠图完成填充背景图片(默认)
  16.     imgBackSrc: "file/tranback.png",
  17.     //钢笔色
  18.     penColor: "#0087C4",
  19.     //初始话钢笔抠图坐标集合
  20.     defaultPointList: new Array(),
  21.     showTip: function (msg) {
  22.         alert(msg);
  23.     }
  24. };

方法API

  1. // 支持动态修改默认项
  2. _penCutout.iniData(options);
  3.  
  4. // 获取钢笔抠图坐标点(可以post给后端渲染)
  5. _penCutout.can.pointList
  6.  
  7. //重做
  8.  _penCutout.downLoad();
  9.  
  10. // 获取剪裁图片urlData(imgsrcData,生成图片的宽度,生成图片的高度)
  11. _penCutout.createCutImg(function (imgSrcData, w, h) {})
  12.  
  13. //下载图片(兼容ie8+、火狐、谷歌等主流浏览器)
  14. _penCutout.downLoad();

Github网址:https://github.com/zefengguo/pencutout_js

演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/48675.html
云模板

发表评论