Add image editing support with Doka.

See also https://gumroad.com/a/75084915
上级 666c2f18
此差异已折叠。
<svg width="76" height="45" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient x1="87.073%" y1="13.31%" x2="2.491%" y2="86.897%" id="b"><stop stop-color="#B45DFF" offset="0%"/><stop stop-color="#E54242" offset="100%"/></linearGradient><path d="M3.39 23.764l2.595-13c1.08-5.417 6.347-8.931 11.763-7.85a10 10 0 0 1 .507.115L30.928 6.25c5.353 1.36 8.589 6.803 7.228 12.155a10 10 0 0 1-.282.923L33.3 32.038a10 10 0 0 1-12.053 6.259l-10.694-2.931A10 10 0 0 1 3.39 23.764z" id="a"/><linearGradient x1="77.542%" y1="103.435%" x2="25.29%" y2="6.06%" id="c"><stop stop-color="#FF9E5D" offset="0%"/><stop stop-color="#EB3B5B" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="e"><stop stop-color="#C31C35" offset="0%"/><stop stop-color="#D75838" offset="100%"/></linearGradient><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="f"><stop stop-color="#CE363A" offset="0%"/><stop stop-color="#DC713F" offset="100%"/></linearGradient></defs><g transform="translate(-.442 .174)" fill="none" fill-rule="evenodd"><g transform="translate(30 2.488)"><mask id="d" fill="#fff"><use xlink:href="#a"/></mask><use fill="url(#b)" opacity=".01" xlink:href="#a"/><path fill="url(#c)" mask="url(#d)" d="M.951 2.273h37.986v37.986H.951z"/><path fill="url(#e)" fill-rule="nonzero" mask="url(#d)" d="M14.801 20.468L.946 7.928l.671-.741L15.8 20.024l.022 6.904L5.77 36.499l-.69-.724 9.741-9.275z"/><path fill="url(#f)" fill-rule="nonzero" mask="url(#d)" d="M19.54 23.403l13.847 12.36-.666.747L18.05 23.413 35.738 7.189l.676.737z"/></g><path d="M16.212 9.44c.552 0 .996.156 1.332.468.336.312.504.732.504 1.26v22.248c0 .552-.162.984-.486 1.296-.324.312-.762.468-1.314.468s-.99-.156-1.314-.468c-.324-.312-.486-.744-.486-1.296v-1.44a5.57 5.57 0 0 1-2.304 2.43c-1.008.564-2.172.846-3.492.846-1.512 0-2.862-.384-4.05-1.152-1.188-.768-2.112-1.848-2.772-3.24-.66-1.392-.99-2.988-.99-4.788 0-1.824.33-3.42.99-4.788.66-1.368 1.578-2.424 2.754-3.168C5.76 17.372 7.116 17 8.652 17c1.32 0 2.478.282 3.474.846a5.644 5.644 0 0 1 2.286 2.394v-9.144c0-.504.162-.906.486-1.206.324-.3.762-.45 1.314-.45zM9.516 32.372c1.56 0 2.772-.54 3.636-1.62.864-1.08 1.296-2.616 1.296-4.608 0-1.992-.426-3.528-1.278-4.608-.852-1.08-2.07-1.62-3.654-1.62s-2.814.534-3.69 1.602c-.876 1.068-1.314 2.586-1.314 4.554 0 1.968.444 3.51 1.332 4.626.888 1.116 2.112 1.674 3.672 1.674zm21.24 2.88c-1.728 0-3.246-.372-4.554-1.116-1.308-.744-2.316-1.806-3.024-3.186-.708-1.38-1.062-2.982-1.062-4.806 0-1.848.354-3.462 1.062-4.842.708-1.38 1.716-2.442 3.024-3.186C27.51 17.372 29.028 17 30.756 17c1.728 0 3.246.372 4.554 1.116 1.308.744 2.316 1.806 3.024 3.186.708 1.38 1.062 2.994 1.062 4.842 0 1.824-.354 3.426-1.062 4.806-.708 1.38-1.716 2.442-3.024 3.186-1.308.744-2.826 1.116-4.554 1.116zm0-2.88c1.608 0 2.838-.528 3.69-1.584.852-1.056 1.278-2.604 1.278-4.644 0-2.016-.432-3.558-1.296-4.626-.864-1.068-2.088-1.602-3.672-1.602s-2.808.534-3.672 1.602c-.864 1.068-1.296 2.61-1.296 4.626 0 2.04.426 3.588 1.278 4.644.852 1.056 2.082 1.584 3.69 1.584zM69.312 17c2.328 0 4.062.588 5.202 1.764 1.14 1.176 1.71 2.964 1.71 5.364v9.324c0 .552-.156.978-.468 1.278-.312.3-.744.45-1.296.45-.528 0-.948-.156-1.26-.468-.312-.312-.468-.732-.468-1.26V32.12c-.456 1.008-1.134 1.782-2.034 2.322-.9.54-1.95.81-3.15.81-1.152 0-2.208-.234-3.168-.702-.96-.468-1.71-1.122-2.25-1.962a5.084 5.084 0 0 1-.81-2.808c0-1.272.33-2.274.99-3.006.66-.732 1.752-1.254 3.276-1.566 1.524-.312 3.618-.468 6.282-.468h.828v-1.044c0-1.344-.276-2.316-.828-2.916-.552-.6-1.44-.9-2.664-.9-.84 0-1.632.108-2.376.324-.744.216-1.56.528-2.448.936-.648.36-1.104.54-1.368.54-.36 0-.654-.132-.882-.396-.228-.264-.342-.6-.342-1.008 0-.36.102-.678.306-.954.204-.276.534-.546.99-.81.84-.456 1.824-.822 2.952-1.098A13.767 13.767 0 0 1 69.312 17zm-1.116 15.552c1.32 0 2.4-.45 3.24-1.35.84-.9 1.26-2.058 1.26-3.474v-.936h-.648c-1.872 0-3.312.084-4.32.252-1.008.168-1.728.45-2.16.846-.432.396-.648.966-.648 1.71 0 .864.312 1.572.936 2.124.624.552 1.404.828 2.34.828z" fill="#2E2628"/><path d="M58.201 32.095c.432.36.648.804.648 1.332 0 .456-.156.852-.468 1.188-.312.336-.684.504-1.116.504-.456 0-.864-.168-1.224-.504l-8.964-7.92v6.66c0 .576-.168 1.014-.504 1.314-.336.3-.768.45-1.296.45s-.966-.15-1.314-.45c-.348-.3-.522-.738-.522-1.314V11.143c0-.576.174-1.014.522-1.314.348-.3.786-.45 1.314-.45s.96.15 1.296.45c.336.3.504.738.504 1.314v14.112l8.208-7.668c.408-.36.804-.54 1.188-.54.456 0 .852.168 1.188.504.336.336.504.732.504 1.188 0 .456-.204.876-.612 1.26l-6.408 5.868 7.056 6.228z" fill="#FFF"/><circle fill="#F3625C" cx="71.622" cy="11.586" r="2.097"/><circle fill="#EB3C5C" cx="37.86" cy="2.619" r="2.435"/><circle fill="#FC935C" cx="60.328" cy="43.498" r="1.365"/><circle fill="#F56E5C" cx="31.225" cy="35.571" r="1.701"/></g></svg>
\ No newline at end of file
......@@ -34,6 +34,8 @@
<!--[if gte IE 9]><!-->
<!-- Carbon Ads styles -->
<link rel="stylesheet" href="css/vendor/carbon.css" />
<!-- Doka Image Editor styles -->
<link rel="stylesheet" href="css/vendor/doka.min.css" />
<!--<![endif]-->
<!-- Generic page styles -->
<style>
......@@ -163,6 +165,40 @@
id="_carbonads_js"
></script>
</p>
<!-- Doka Image Editor info -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a href="https://gumroad.com/a/75084915"
><img
src="img/vendor/doka-logo.svg"
alt="Doka"
style="position: relative; top: -5px;"
/></a>
image editor
</h3>
</div>
<div class="panel-body">
<p>
<a href="https://gumroad.com/a/75084915">Doka Image Editor</a>
integrates smoothly with
<a href="https://github.com/blueimp/jQuery-File-Upload"
>jQuery File Upload</a
>
and creates a super fast image editing experience for your users.
</p>
<ul>
<li>Five Minute Install</li>
<li>Set Crop Masks and Guides</li>
<li>Define Aspect Ratio Options</li>
<li>Rotate, Resize, and Flip Images</li>
<li>Add Markup and Annotations</li>
<li>Color Adjustment Controls</li>
<li>Apply Filter Effects</li>
</ul>
<p><a href="https://gumroad.com/a/75084915">Learn more</a></p>
</div>
</div>
<!--<![endif]-->
<div class="panel panel-default">
<div class="panel-heading">
......@@ -331,6 +367,11 @@
</tr>
{% } %}
</script>
<!--[if gte IE 9]><!-->
<!-- Doka Image Editor library -->
<script src="js/vendor/doka.polyfill.loader.js"></script>
<script src="js/vendor/doka.min.js"></script>
<!--<![endif]-->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
......
......@@ -9,13 +9,23 @@
* https://opensource.org/licenses/MIT
*/
/* global $ */
/* global $, Doka */
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Setup Doka Image Editor:
doka: window.Doka && Doka.create(),
edit:
window.Doka &&
Doka.supported() &&
function (file) {
return this.doka.edit(file).then(function (output) {
return output && output.file;
});
},
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'server/php/'
......
因为 它太大了无法显示 source diff 。你可以改为 查看blob
(function () {
'use strict';
if (!Array.prototype.forEach) return;
[
{
supported: 'Promise' in window,
fill:
'https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js'
},
{
supported: 'fetch' in window,
fill: 'https://cdn.jsdelivr.net/npm/fetch-polyfill@0.8.2/fetch.min.js'
},
{
supported:
'CustomEvent' in window &&
'log10' in Math &&
'sign' in Math &&
'assign' in Object &&
'from' in Array &&
['find', 'findIndex', 'includes'].reduce(function (previous, prop) {
return prop in Array.prototype ? previous : false;
}, true),
fill: 'js/vendor/doka.polyfill.min.js'
}
].forEach(function (p) {
if (p.supported) return;
document.write('<script src="' + p.fill + '"></script>');
});
})();
/* eslint-disable */
Array.prototype.find||Object.defineProperty(Array.prototype,"find",{value:function(t){if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),e=r.length>>>0;if("function"!=typeof t)throw new TypeError("predicate must be a function");for(var n=arguments[1],o=0;o<e;){var i=r[o];if(t.call(n,i,o,r))return i;o++}}}),Array.prototype.findIndex||Object.defineProperty(Array.prototype,"findIndex",{value:function(t){if(null==this)throw new TypeError('"this" is null or not defined');var r=Object(this),e=r.length>>>0;if("function"!=typeof t)throw new TypeError("predicate must be a function");for(var n=arguments[1],o=0;o<e;){var i=r[o];if(t.call(n,i,o,r))return o;o++}return-1}}),Array.from||(Array.from=function(){function c(t){return"function"==typeof t||"[object Function]"===r.call(t)}function p(t){var r=function(t){var r=Number(t);return isNaN(r)?0:0!==r&&isFinite(r)?(0<r?1:-1)*Math.floor(Math.abs(r)):r}(t);return Math.min(Math.max(r,0),e)}var r=Object.prototype.toString,e=Math.pow(2,53)-1;return function(t,r,e){var n=Object(t);if(null==t)throw new TypeError("Array.from requires an array-like object - not null or undefined");var o,i=1<arguments.length?r:void 0;if(void 0!==i){if(!c(i))throw new TypeError("Array.from: when provided, the second argument must be a function");2<arguments.length&&(o=e)}for(var a,u=p(n.length),f=c(this)?Object(new this(u)):new Array(u),l=0;l<u;)a=n[l],f[l]=i?void 0===o?i(a,l):i.call(o,a,l):a,l+=1;return f.length=u,f}}()),Array.prototype.includes||Object.defineProperty(Array.prototype,"includes",{value:function(t,r){if(null==this)throw new TypeError('"this" is null or not defined');var e=Object(this),n=e.length>>>0;if(0==n)return!1;var o,i,a=0|r,u=Math.max(0<=a?a:n-Math.abs(a),0);for(;u<n;){if((o=e[u])===(i=t)||"number"==typeof o&&"number"==typeof i&&isNaN(o)&&isNaN(i))return!0;u++}return!1}}),function(){if("function"==typeof window.CustomEvent)return;function t(t,r){r=r||{bubbles:!1,cancelable:!1,detail:void 0};var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,r.bubbles,r.cancelable,r.detail),e}t.prototype=window.Event.prototype,window.CustomEvent=t}(),Math.log10||(Math.log10=function(t){return Math.log(t)*Math.LOG10E}),Math.sign||(Math.sign=function(t){return(0<t)-(t<0)||+t}),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function(t,r){"use strict";if(null==t)throw new TypeError("Cannot convert undefined or null to object");for(var e=Object(t),n=1;n<arguments.length;n++){var o=arguments[n];if(null!=o)for(var i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i])}return e},writable:!0,configurable:!0});
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册