脚本代码 分享 打印版本 举报 PHP在线图像编辑器 Pixie v3.0.4 reishi 2024-04-23 497 0 70 源码简介Pixie是一款完全可定制的高性能照片编辑器，可在任何地方使用，并且可以轻松集成到现有项目中或使用独立应用程序。 在线演示https://pixie.vebto.com/功能简介集成–轻松将pixie集成到任何现有项目或应用程序中。可扩展– Pixie接口和API可以使用新功能进行扩展。移动-Pixie具有全面的移动支持，并会自动调整其界面以适应任何设备的尺寸。主题化–轻松更改所有编辑器颜色，使其与您现有的站点或应用程序设计相匹配。可自定义的UI –通过显示，隐藏或添加新菜单项，更改工具栏位置或使用其他主题来自定义UI。可翻译– Pixie的界面可通过配置完全翻译。水印–保存的照片可以很容易地用指定的文字加水印。模式–在叠加（模式），内联或全屏模式之间进行选择。工具API –通过API使用所有小工具（调整大小，裁剪，框架等），而无需打开小工具界面。可自定义的工具–所有工具都是完全可自定义的，您可以删除或修改并添加自定义贴纸，形状，字体，框架等。保存状态–以json格式保存当前的编辑器状态，从而允许使用诸如预建模板之类的功能。加载状态–加载以前保存的状态，包括图像和所做的所有更改。照片处理–通过界面或API调整大小，裁剪，变换等等。滤镜– Pixie内置了许多内置滤镜，例如灰度，模糊，黑白，复古等。可以通过API添加更多过滤器。相框–将内置响应式相框添加到任何尺寸的照片中，或添加您自己的相框。裁剪–将照片裁剪为指定的纵横比之一，或者让用户通过UI选择自定义裁剪区域。绘图–强大的免费绘图工具同时支持鼠标和触摸，具有多种笔刷类型，颜色等。文本–完全支持将文本添加到图像。可以使用数百种Google字体，也可以仅使用自定义添加的字体。形状–只需指定svg图像路径，即可轻松添加自定义形状。贴纸–可以添加或删除自定义贴纸。任何类型的图像都可以用作标签。角–只需单击一下即可调用API角，从而对图像角进行四舍五入。空画布– Pixie不必编辑现有照片，也可以轻松地从头开始创建自定义图像。历史记录–所有编辑器操作都是非破坏性的，可以通过历史记录工具轻松撤消和重做。对象–所有对象（如贴纸，形状和文本）都位于各自的图层上，可以通过更改其颜色，添加阴影，背景等内容轻松地移动，调整大小，删除和修改。模式和渐变–所有对象都可以使用许多内置或自定义模式和渐变填充。保存–修改后的图像可以通过API或接口轻松保存在本地设备或服务器上。缩放和平移–可以使用鼠标，鼠标滚轮或移动设备上的触摸和捏合手势来缩放和平移画布。HTML5 – Pixie使用本机HTML5，这意味着它可在所有设备上使用。更新日志https://support.vebto.com/pages/4/pixie-changelog下载地址 .dlepay-box{border:1px solid rgba(128,128,128,.28);border-radius:14px;padding:18px 20px;margin:18px 0;background:rgba(128,128,128,.06);box-shadow:0 6px 20px rgba(15,23,42,.05);font-size:14px;line-height:1.7;color:inherit} .dlepay-box.dlepay-free,.dlepay-box.dlepay-paid{border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.09);box-shadow:none} .dlepay-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap} .dlepay-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:rgba(15,118,110,.92);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap} .dlepay-free .dlepay-badge,.dlepay-paid .dlepay-badge{background:rgba(22,163,74,.92)} .dlepay-head__text{flex:1;min-width:200px;font-size:14px;line-height:1.7;color:inherit} .dlepay-head__text b{color:#ef4444;font-size:16px} .dlepay-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} .dlepay-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease;font-family:inherit} .dlepay-btn:active{transform:translateY(1px)} .dlepay-btn-primary{background:#1677ff;color:#fff;box-shadow:0 8px 18px rgba(22,119,255,.22)} .dlepay-btn-primary:hover{background:#0f62d9;color:#fff} .dlepay-btn-ghost{background:transparent;color:inherit;border-color:rgba(128,128,128,.42)} .dlepay-btn-ghost:hover{background:rgba(128,128,128,.14)} .dlepay-sub{margin-top:8px;font-size:12px;color:inherit;opacity:.62} .dlepay-note{margin-bottom:10px;font-size:13px;font-weight:700;color:#16a34a} .dlepay-content{margin-top:12px;padding:14px 16px;border:1px dashed rgba(128,128,128,.42);border-radius:10px;background:transparent} .dlepay-modal{position:fixed;left:0;top:0;right:0;bottom:0;z-index:99999;display:none;color:inherit} .dlepay-modal.is-open{display:block} .dlepay-modal__mask{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(15,23,42,.55)} .dlepay-modal__dialog{position:relative;width:min(92vw,360px);margin:10vh auto 0;background:#fff;color:#0f172a;border-radius:16px;padding:22px 22px 18px;box-shadow:0 24px 60px rgba(15,23,42,.35);text-align:center} .dlepay-modal__title{font-size:16px;font-weight:800;color:#0f172a;margin-bottom:14px} .dlepay-modal__close{position:absolute;top:8px;right:12px;border:0;background:transparent;font-size:22px;line-height:1;color:#94a3b8;cursor:pointer} .dlepay-modal__close:hover{color:#0f172a} .dlepay-loading{font-size:13px;color:#94a3b8;padding:30px 0} .dlepay-qr{display:none;width:220px;height:220px;margin:0 auto;border-radius:10px;border:1px solid rgba(128,128,128,.3);background:#fff} .dlepay-status{margin-top:12px;font-size:13px;line-height:1.7;color:#334155;min-height:20px} .dlepay-status b{color:#ef4444;font-size:15px} .dlepay-ok{color:#16a34a;font-weight:700} .dlepay-err{color:#ef4444;font-weight:700} [data-theme="dark"] .dlepay-box{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14);box-shadow:none} [data-theme="dark"] .dlepay-box.dlepay-free,[data-theme="dark"] .dlepay-box.dlepay-paid{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.45)} [data-theme="dark"] .dlepay-head__text b,[data-theme="dark"] .dlepay-status b,[data-theme="dark"] .dlepay-err{color:#f87171} [data-theme="dark"] .dlepay-ok{color:#4ade80} [data-theme="dark"] .dlepay-btn-primary{background:#2f81f7;box-shadow:none} [data-theme="dark"] .dlepay-modal__dialog{background:#1e2228;color:#e6e6e6;box-shadow:0 24px 60px rgba(0,0,0,.65)} [data-theme="dark"] .dlepay-modal__title{color:#f1f5f9} [data-theme="dark"] .dlepay-modal__close{color:#9aa4b2} [data-theme="dark"] .dlepay-modal__close:hover{color:#fff} [data-theme="dark"] .dlepay-loading{color:#9aa4b2} [data-theme="dark"] .dlepay-status{color:#cbd5e1} @media (max-width:480px){.dlepay-box{padding:14px}.dlepay-btn{width:100%}} × 扫码支付 正在加载… (function(){ if (window.dlePayReady) { return; } window.dlePayReady = true; var CFG = {"url":"https:\/\/topide.com\/index.php?do=pay","qr":"https:\/\/topide.com\/index.php?do=alipaypay&action=qr&data=","token":"4454a01b5583578770b54619f3c0e66f0b645761","currency":"积分"}; function el(id) { return document.getElementById(id); } window.dlePayOpen = function(){ var m = el('dlepay-modal'); if (m) { m.className = 'dlepay-modal is-open'; m.setAttribute('aria-hidden','false'); } }; window.dlePayClose = function(){ var m = el('dlepay-modal'); if (m) { m.className = 'dlepay-modal'; m.setAttribute('aria-hidden','true'); } }; window.dlePayStatus = function(html, cls){ var s = el('dlepay-status'); if (!s) { return; } s.className = 'dlepay-status' + (cls ? ' ' + cls : ''); s.innerHTML = html; }; window.dlePayLoading = function(on){ var l = el('dlepay-loading'); var q = el('dlepay-qr'); if (l) { l.style.display = on ? 'block' : 'none'; } if (on && q) { q.style.display = 'none'; } }; function post(action, data, callback){ var fd = new FormData(); fd.append('action', action); fd.append('token', CFG.token || ''); for (var k in data) { if (Object.prototype.hasOwnProperty.call(data, k)) { fd.append(k, data[k]); } } fetch(CFG.url, { method: 'POST', body: fd, credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } }).then(function(r){ return r.json(); }).then(function(d){ callback(d || { status: 'error', message: '返回数据异常' }); }).catch(function(){ callback({ status: 'error', message: '网络错误，请稍后重试' }); }); } window.dlePayScan = function(tagId, newsId){ window.dlePayOpen(); window.dlePayLoading(true); window.dlePayStatus('正在生成支付二维码…'); post('create', { tag_id: tagId, news_id: newsId }, function(d){ window.dlePayLoading(false); if (d.status === 'success') { if (d.free || d.paid) { window.dlePayStatus('已解锁，正在刷新…'); setTimeout(function(){ location.reload(); }, 500); return; } var q = el('dlepay-qr'); if (q) { q.src = CFG.qr + encodeURIComponent(d.qr_code); q.style.display = 'block'; } window.dlePayStatus('请使用支付宝扫码支付 ' + d.amount + ' 元（' + d.price + ' ' + (CFG.currency || '') + '）'); window.dlePayPoll(d.out_trade_no); } else { window.dlePayStatus('' + (d.message || '下单失败') + ''); } }); }; window.dlePayPoll = function(outTradeNo){ var tries = 0; function tick(){ tries ++; if (tries > 200) { window.dlePayStatus('二维码已过期，请关闭后重新下单'); return; } post('query', { out_trade_no: outTradeNo }, function(d){ if (d.status === 'paid') { window.dlePayStatus('支付成功，正在刷新…'); setTimeout(function(){ location.reload(); }, 600); return; } if (d.status === 'closed') { window.dlePayStatus('订单已关闭，请重新下单'); return; } setTimeout(tick, 3000); }); } setTimeout(tick, 2500); }; window.dlePayBalance = function(tagId, newsId){ if (!window.confirm('确认使用余额支付？')) { return; } window.dlePayOpen(); window.dlePayStatus('正在处理…'); post('balance', { tag_id: tagId, news_id: newsId }, function(d){ if (d.status === 'success') { window.dlePayStatus('支付成功，正在刷新…'); setTimeout(function(){ location.reload(); }, 500); } else { window.dlePayStatus('' + (d.message || '支付失败') + ''); } }); }; })(); 付费内容此部分内容需要支付 8 积分 后查看，请先登录。 标签 PixieImage Editor