jQuery钢笔抠图插件(原创)

所属分类:媒体-图像

 13716  216  查看评论 (8)
分享到微信朋友圈
X
jQuery钢笔抠图插件(原创) ie兼容9

使用说明

//默认配置项 
this.defaults = {
    //画板容器id        
    drawPanel: "drawPanel", //自动生成canvas标签Id       
    canvasId: "canvas", //自动生成图片标签Id       
    imgId: "imgCut", //画板宽度       
    width: 400, //画板高度        
    height: 400, //抠图图片src       
    imgSrc: "file/target.jpg", //抠图完成填充背景图片(默认)       
    imgBackSrc: "file/tranback.png", //钢笔色       
    penColor: "#0087C4", //初始话钢笔抠图坐标集合        
    defaultPointList: new Array(),
    showTip: function(msg) {
        alert(msg);
    }
};
// 使用(通过init方法覆盖默认属性,并初始化事件)
var _penCutout = new penCutout();
_penCutout.init({
    //覆盖属性               
    drawPanel: "drawPanel",
    imgSrc: "file/target.jpg",
    width: 400,
    height: 400
}); // 支持动态修改默认项
_penCutout.iniData(options); // 获取钢笔抠图坐标点(可以post给后端渲染)
_penCutout.can.pointList //重做 
_penCutout.downLoad(); // 获取剪裁图片
urlData(imgsrcData, 生成图片的宽度, 生成图片的高度)
_penCutout.createCutImg(function(imgSrcData, w, h) {}) //下载图片(兼容ie8+、火狐、谷歌等主流浏览器)
_penCutout.downLoad()

注意事项

1. 谷歌chrome本地打开index.html, 由于安全设置, 会报如下错误, 解决方案: 使用火狐或IE, 放到服务器访问不存在如下问题。

Access to image at 'file:///D:/mywork/pen-cutout-js/static/file/target.jpg'
from origin 'null'
has been blocked by CORS policy: Cross origin requests are only supported
for protocol schemes: http,
    data,
    chrome,
    chrome - extension,
    https.target.jpg: 1 Failed to load resource: net

代码有注释,请查看下载文件。

相关插件-图像

jquery.photoClip图片裁剪添加旋转 缩放按钮功能

项目上用的jquery.photoClip 插件,为了更好的用户体验 需要添加 旋转 缩放按钮功能,所以在原有的基础上添加了点功能,希望能帮助各位,写的不好 海涵!
  图像
 21721  255

可视化的交互图形库Cytoscape.js

Cytoscape.js ? 用于数据分析和可视化的交互图形库
  图像
 44661  281

基于HTML5 Canvas实现的图片马赛克模糊特效

基于HTML5 Canvas实现的图片马赛克模糊特效
  图像
 24199  252

Beer Slider一款轻量级的图片对比插件

它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等。
  图像
 18677  284

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Adiou 0
    2019/6/13 11:09:18
    要是能放大就好了
        zephyr0
        2019/6/13 11:13:30
        嗯... 用户可以通过设置scale属性可以自行实现 你可以体验一下在线抠图工具 速抠图 sukoutu.com 的缩放功能。
    回复
    梁雪 0
    2019/6/4 10:08:16
    哇 操作简单有效率
        zephyr0
        2019/6/4 10:13:25
        嗯... 请多支持!
    回复
    ?? 0
    2019/6/4 10:06:45
    简单又实用,很好用啊
        zephyr0
        2019/6/4 10:14:30
        谢谢支持!
    回复
    yilia512 0
    2019/6/4 10:02:05
    哇 超好用,期待作者多多分享~
        zephyr0
        2019/6/4 10:03:46
        谢谢支持!希望多多提些建议。
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复