Shenlin / publisher

Go to a project
Toggle navigation Toggle navigation pinning
lintry
45fa4fb0 1 parent f2b4078e

增加CSSgram的样式效果

Inline Side-by-side
Showing 10 changed files with 101 additions and 134 deletions
{
"key": "0102030405060708",
"iv": "0000000000000000"
}
\ No newline at end of file
......@@ -20,6 +20,7 @@
"express": "^4.14.0",
"formidable": "^1.0.17",
"gm": "^1.23.0",
"kml-express-stage": "git+ssh://git@gitlab.kmlab.com:comm/express-stage.git",
"lodash": "^4.16.5",
"log4js": "^0.6.38",
"lrz": "^4.9.40",
......
/**
* Created by lintry on 16/7/18.
*/
"use strict";
function CryptoJSON(sKey, sIv) {
const path = require('path'),
util = require('util'),
crypto_utils = require('./crypto-utils');
if (!(this instanceof CryptoJSON)) {
return new CryptoJSON(sKey, sIv);
}
function convert(source, type, key, iv) {
key = key || sKey;
iv = iv || sIv;
var method = crypto_utils[!!type ? 'AESEncode': 'AESDecode'];
if (source) {
if (util.isString(source)) {
return method(source, key, iv);
}
var target = util.isArray(source)? [] : {};
for (let k in source) {
var v = source[k];
if (!v) {
target[k] = v;
}
else if (typeof v === 'object') {
target[k] = convert(v, type, key, iv);
} else {
target[k] = method(v, key, iv);
}
}
return target;
} else {
return null;
}
}
/**
* 加密对象
* @param obj
* @param key
* @param iv
* @returns {*}
*/
this.encode = function (obj, key, iv) {
return convert(obj, 1, key, iv);
};
/**
* 解密对象
* @param crypto_obj
* @param key
* @param iv
* @returns {*}
*/
this.decode = function (crypto_obj, key, iv) {
return convert(crypto_obj, 0, key, iv);
};
}
module.exports = CryptoJSON;
\ No newline at end of file
/**
* Created by lintry on 16/4/19.
*
* 加密解密算法工具
*/
"use strict";
module.exports = function () {
const CryptoJS = require("crypto-js"),
uuid = require('node-uuid');
const DEFAULT_KEY = '0102030405060708',
DEFAULT_IV = '0000000000000000',
PADDING_CHAR = 'ABCDEFGHIJKLMNOP',
PADDING_LENGTH = 16;
var cj = {};
function padding(text) {
text = text || '';
return text + PADDING_CHAR.substr(0, PADDING_LENGTH - ((text.length % PADDING_LENGTH)||PADDING_LENGTH));
}
cj.AESEncode = function (word, sKey, sIv) {
var key = CryptoJS.enc.Utf8.parse(padding(sKey || DEFAULT_KEY));
var iv = CryptoJS.enc.Utf8.parse(padding(sIv || DEFAULT_IV));
var srcs = CryptoJS.enc.Utf8.parse(word);
var encrypted = CryptoJS.AES.encrypt(srcs, key, {iv: iv, mode: CryptoJS.mode.CBC});
return encrypted.toString();
};
cj.AESDecode = function (word, sKey, sIv) {
var key = CryptoJS.enc.Utf8.parse(padding(sKey || DEFAULT_KEY));
var iv = CryptoJS.enc.Utf8.parse(padding(sIv || DEFAULT_IV));
var decrypted = CryptoJS.AES.decrypt(word, key, {iv: iv, mode: CryptoJS.mode.CBC});
return CryptoJS.enc.Utf8.stringify(decrypted).toString();
};
cj.Base64Encode = function (text) {
var words = CryptoJS.enc.Utf8.parse(text);
return CryptoJS.enc.Base64.stringify(words);
};
cj.Base64Decode = function (text) {
return CryptoJS.enc.Base64.parse(text).toString(CryptoJS.enc.Utf8);
};
cj.MD5 = function (text) {
return CryptoJS.MD5(text).toString();
};
cj.SHA1 = function (text) {
return CryptoJS.SHA1(text).toString();
};
cj.UUID = function() {
return uuid.v4().replace(/[-]/g,'');
};
return cj;
}();
\ No newline at end of file
......@@ -18,8 +18,8 @@ module.exports = function Uploader(routerPath, db) {
UPLOAD_OPTION = global.config.upload,
ENTITIES_PATH = config_path.ENTITIES_PATH,
logger = global.loggers.upload,
crypto_utils = require('./crypto-utils'),
Result = require('./result');
crypto_utils = require('kml-crypto-utils'),
Result = require('kml-express-stage/lib/result');
const
DEST_DIR = path.resolve(UPLOAD_OPTION.root, routerPath),
......
......@@ -4,7 +4,7 @@ const express = require('express'),
app = express(),
router = express.Router(),
Uploader = require('./lib/uploader'),
Result = require('./lib/result');
Result = require('kml-express-stage/lib/result');
// 定义参数
const config = require('./init/config'),
......
......@@ -6,7 +6,11 @@
<title>lrz4 demo&test</title>
<link rel="stylesheet" href="../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
<style>
.css-gram{
width: 100%;
}
img {
width: 100%;
max-width: 320px;
......@@ -48,7 +52,32 @@
<div id="upload-container" class="col-xs-12 text-center">
<input accept="image/*" type="file"/>
</div>
<div class="col-xs-12 text-center">
<h3>图片样式</h3>
<small class="text-muted">选择一个预设的CSSgram的样式</small>
<div>
<select id="filter">
<option>aden</option>
<option>reyes</option>
<option>perpetua</option>
<option>inkwell</option>
<option>toaster</option>
<option>walden</option>
<option>hudson</option>
<option>gingham</option>
<option>mayfair</option>
<option>lofi</option>
<option>xpro2</option>
<option>_1977</option>
<option>brooklyn</option>
<option>nashville</option>
<option>lark</option>
<option>moon</option>
<option>clarendon</option>
<option>willow</option>
</select>
</div>
</div>
<div class="col-xs-12 text-center">
<hr/>
<h3>旋转方向测试</h3>
......@@ -92,6 +121,6 @@
<script src="../lib/lrz/lrz.bundle.js"></script>
<script src="./index.js?v=27ce5f7"></script>
<script src="./index.js"></script>
</body>
</html>
......
......@@ -37,10 +37,11 @@ document.querySelector('input').addEventListener('change', function () {
var that = this;
lrz(that.files[0], {
width: 800
width: 1024
})
.then(function (rst) {
var img = new Image(),
figure = document.createElement('figure'),
div = document.createElement('div'),
p = document.createElement('p'),
sourceSize = toFixed2(that.files[0].size / 1024),
......@@ -56,7 +57,9 @@ document.querySelector('input').addEventListener('change', function () {
'</span> ';
div.className = 'col-sm-6';
div.appendChild(img);
figure.className = 'css-gram ' + document.querySelector('#filter').value;
figure.appendChild(img);
div.appendChild(figure);
div.appendChild(p);
img.onload = function () {
......@@ -101,6 +104,17 @@ document.querySelector('input').addEventListener('change', function () {
document.querySelector('#version').innerHTML = lrz.version;
document.querySelector('.UA').innerHTML = 'UA: ' + navigator.userAgent;
document.querySelector('#filter').addEventListener('change', function (e) {
var filter = e.target.value;
if (filter) {
[].forEach.call(document.querySelectorAll('.css-gram'), function (el) {
(function (el) {
el.className = 'css-gram ' + filter;
})(el);
});
}
});
function toFixed2 (num) {
return parseFloat(+num.toFixed(2));
}
......
......@@ -6,7 +6,11 @@
<title>lrz4 demo&test</title>
<link rel="stylesheet" href="../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
<style>
.css-gram{
width: 100%;
}
img {
width: 100%;
max-width: 320px;
......@@ -54,6 +58,32 @@
</div>
<div class="col-xs-12 text-center">
<h3>图片样式</h3>
<small class="text-muted">选择一个预设的CSSgram的样式</small>
<div>
<select id="filter">
<option>aden</option>
<option>reyes</option>
<option>perpetua</option>
<option>inkwell</option>
<option>toaster</option>
<option>walden</option>
<option>hudson</option>
<option>gingham</option>
<option>mayfair</option>
<option>lofi</option>
<option>xpro2</option>
<option>_1977</option>
<option>brooklyn</option>
<option>nashville</option>
<option>lark</option>
<option>moon</option>
<option>clarendon</option>
<option>willow</option>
</select>
</div>
</div>
<div class="col-xs-12 text-center">
<hr/>
<h3>旋转方向测试</h3>
<small class="text-muted">看到的图像应该全是一个方向的，没见到图片是出问题了</small>
......@@ -96,6 +126,6 @@
<script src="../lib/lrz/lrz.bundle.js"></script>
<script src="./server.js?v=c8aaa97"></script>
<script src="./server.js"></script>
</body>
</html>
......
......@@ -42,6 +42,7 @@ document.querySelector('input').addEventListener('change', function () {
})
.then(function (rst) {
var img = new Image(),
figure = document.createElement('figure'),
div = document.createElement('div'),
p = document.createElement('p'),
sourceSize = toFixed2(that.files[0].size / 1024),
......@@ -56,7 +57,9 @@ document.querySelector('input').addEventListener('change', function () {
});
div.className = 'col-sm-6';
div.appendChild(img);
figure.className = 'css-gram ' + document.querySelector('#filter').value;
figure.appendChild(img);
div.appendChild(figure);
div.appendChild(p);
img.onload = function () {
......@@ -122,6 +125,17 @@ document.querySelector('input').addEventListener('change', function () {
document.querySelector('#version').innerHTML = lrz.version;
document.querySelector('.UA').innerHTML = 'UA: ' + navigator.userAgent;
document.querySelector('#filter').addEventListener('change', function (e) {
var filter = e.target.value;
if (filter) {
[].forEach.call(document.querySelectorAll('.css-gram'), function (el) {
(function (el) {
el.className = 'css-gram ' + filter;
})(el);
});
}
});
function toFixed2 (num) {
return parseFloat(+num.toFixed(2));
}
......