其他代码

PenCutout 钢笔抠图插件

面包多

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

(1)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!