山东十一选五一天开多少期:jQuery鋼筆摳圖插件(原創)

2019山东十一选五杀号 www.xvcvn.com 所屬分類:媒體-圖像

 6163  86  查看評論 (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

代碼有注釋,請查看下載文件。

相關插件-圖像

可視化的交互圖形庫Cytoscape.js

Cytoscape.js ? 用于數據分析和可視化的交互圖形庫
  圖像
 35560  144

SVG圖像生成插件triangloid

triangloid是一個JavaScript庫,可以將圖像生成為多邊形圖像并輸出成SVG格式。它是基于trianglify
  圖像
 19370  141

jQueryphotoClip圖片剪裁插件

jQueryphotoClip是一款支持移動設備觸摸手勢的圖片裁剪jQuery插件。
  圖像
 59888  221

基于HTML5 Canvas實現的圖片馬賽克模糊特效

基于HTML5 Canvas實現的圖片馬賽克模糊特效
  圖像
 17325  123

討論這個項目(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
        謝謝支持!希望多多提些建議。
    回復
取消回復