github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add import img from url

Browse Source
This commit is contained in:
kekee000 2015-04-02 23:34:56 +08:00
parent b8649d890b
commit b4c141dc62
9 changed files with 83 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
css/common/import-pic.less
View File

@ -12,7 +12,6 @@
padding-bottom: 0;
}
.preview-panel {
background: #FFF;
margin-bottom: 15px;
@ -57,6 +56,20 @@
}
}
}
.import-pic-url {
position: absolute;
margin-top: 30px;
background: #4A90E2;
padding: 10px 10px 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
display: none;
&.show-url {
display: block;
}
}
}

6
php/readFont.php
View File

@ -1,6 +0,0 @@
<?php
header( "Content-Type: application/octet-stream");
$file = $_GET['file'];
if ($file && preg_match("#^https?:\/\/.+?\.(ttf|woff|svg|eot)$#i", $file, $matches)) {
echo file_get_contents($matches[0]);
}

10
php/readOnline.php Normal file
View File

@ -0,0 +1,10 @@
<?php
header( "Content-Type: application/octet-stream");
$file = $_GET['file'];
$type = $_GET['type'];
if ($type === 'font' && $file && preg_match("#^https?:\/\/.+?\.(ttf|woff|svg|eot)$#i", $file, $matches)) {
echo file_get_contents($matches[0]);
}
else if ($type === 'image' && $file && preg_match("#^https?:\/\/.+?\.(jpg|jpeg|gif|bmp|png|svg)$#i", $file, $matches)) {
echo file_get_contents($matches[0]);
}

4
src/fonteditor/controller/actions.js
View File

@ -173,7 +173,7 @@ define(
var fontUrl = url;
if (/^https?:\/\//i.test(url)) {
fontUrl = string.format(program.fontUrl, [encodeURIComponent(url)]);
fontUrl = string.format(program.readOnline, ['font', encodeURIComponent(url)]);
}
readOnlineFont(type, fontUrl);
@ -190,7 +190,7 @@ define(
program.loading.show('正在加载..', 1000);
// 此处延迟处理
setTimeout(function () {
var fontUrl = string.format(program.fontUrl, [encodeURIComponent(url)]);
var fontUrl = string.format(program.readOnline, ['font', encodeURIComponent(url)]);
readOnlineFont(url.slice(url.lastIndexOf('.') + 1), fontUrl);
}, 20);
}

47
src/fonteditor/dialog/setting-import-pic.js
View File

@ -8,6 +8,8 @@ define(
function (require) {
var tpl = require('../template/dialog/setting-import-pic.tpl');
var string = require('common/string');
var pixelRatio = require('common/getPixelRatio');
var lang = require('common/lang');
var program = require('../widget/program');
@ -171,6 +173,16 @@ define(
$('#import-pic-file').get(0).onchange = function (e) {
var file = e.target.files[0];
if (!file) {
return;
}
if (!/\.(?:jpg|gif|png|jpeg|bmp|svg)$/i.test(file.name)) {
alert('不支持的文件类型！');
return;
}
var reader = new FileReader();
program.loading.show('正在加载图片...', 10000);
@ -179,12 +191,14 @@ define(
image.onload = function () {
updateImage(image);
};
image.onerror = function () {
program.loading.warn('读取图片失败...', 2000);
};
image.src = e.target.result;
e.target.value = '';
};
reader.onerror = function(e) {
program.loading.warn('读取图片失败...', 4000);
throw e;
program.loading.warn('读取图片失败...', 2000);
};
reader.readAsDataURL(file);
};
@ -248,6 +262,10 @@ define(
$('#import-pic-dialog').find('.preview-panel')
.removeClass('fitpanel').removeClass('showleft').toggleClass('showright');
}
else if (action === 'import-url') {
$('#import-pic-dialog').find('.import-pic-url').toggleClass('show-url');
}
}).on('click', '[data-filter]', function (e) {
if (!program.data.imageProcessor.grayData) {
@ -266,12 +284,37 @@ define(
program.loading.show('正在处理...', 10000);
throttleAction('threshold-pre');
});
$('#import-pic-url-text').on('keyup', function (e) {
if (e.keyCode !== 13) {
return;
}
var val = this.value.trim();
if (/^https?:\/\//i.test(val)) {
this.value = '';
$('#import-pic-dialog').find('.import-pic-url').removeClass('show-url');
program.loading.show('正在加载图片...', 10000);
var image = new Image();
image.onload = function () {
updateImage(image);
};
image.onerror = function () {
program.loading.warn('读取图片失败...', 2000);
};
image.src = string.format(program.readOnline, ['image', val]);
}
else {
alert('请输入图片URL!');
}
});
}
function unbindEvent() {
$('#import-pic-file').get(0).onchange = null;
$('#import-pic-dialog').off('click');
$('#import-pic-threshold-pre').off('change');
$('#import-pic-url-text').off('keyup');
}
return require('./setting').derive({

5
src/fonteditor/main.js
View File

@ -91,11 +91,6 @@ define(
init: function () {
bindEvent();
// font baidu online
if (location.hostname.indexOf('baidu.com') > -1) {
program.fontUrl = '/font/proxy?url=${0}';
}
program.setting = require('./widget/settingmanager');
// glyf查看器命令组

9
src/fonteditor/template/dialog/setting-import-pic.tpl
View File

@ -1,12 +1,19 @@
<div id="import-pic-dialog">
<div class="form-group">
<div class="input-group btn-right">
<div class="import-pic-url">
<div class="input-group input-group-sm">
<span class="input-group-addon">图片URL</span>
<input id="import-pic-url-text" value="" class="form-control">
</div>
</div>
<button type="button" data-action="import-url" class="btn btn-flat btn-new btn-sm" title="指定图片URL加载图片">从URL导入图片</button>&nbsp;
<button type="button" data-action="fitwindow" class="btn btn-flat btn-new btn-sm">适应窗口</button>&nbsp;
<button type="button" data-action="fitwindow-left" class="btn btn-flat btn-new btn-sm">查看原图</button>&nbsp;
<button type="button" data-action="fitwindow-right" class="btn btn-flat btn-new btn-sm">查看轮廓</button>
</div>
<button data-action="openfile" type="button" class="btn btn-flat btn-new btn-sm">选择图片</button>
<span>请选择字形图片，支持jpg|gif|png。</span>
<span>请选择字形图片，支持jpg、gif、png、bmp、svg。</span>
<form id="import-pic-form" style="width:0px;height:0px;overflow:hidden;"><input id="import-pic-file" type="file"></form>
</div>
<div class="preview-panel"><div class="canvas-left"><canvas id="import-pic-canvas-origin"></canvas></div><div class="canvas-right"><canvas id="import-pic-canvas-fit"></canvas></div></div>

2
src/fonteditor/template/dialog/setting-import-pic.tpl.js
View File

@ -1 +1 @@
define(function () {return '<div id="import-pic-dialog">\r\n <div class="form-group">\r\n <div class="input-group btn-right">\r\n <button type="button" data-action="fitwindow" class="btn btn-flat btn-new btn-sm">适应窗口</button>&nbsp;\r\n <button type="button" data-action="fitwindow-left" class="btn btn-flat btn-new btn-sm">查看原图</button>&nbsp;\r\n <button type="button" data-action="fitwindow-right" class="btn btn-flat btn-new btn-sm">查看轮廓</button>\r\n </div>\r\n <button data-action="openfile" type="button" class="btn btn-flat btn-new btn-sm">选择图片</button>\r\n <span>请选择字形图片，支持jpg|gif|png。</span>\r\n <form id="import-pic-form" style="width:0px;height:0px;overflow:hidden;"><input id="import-pic-file" type="file"></form>\r\n </div>\r\n <div class="preview-panel"><div class="canvas-left"><canvas id="import-pic-canvas-origin"></canvas></div><div class="canvas-right"><canvas id="import-pic-canvas-fit"></canvas></div></div>\r\n <div class="form-inline">\r\n <button type="button" data-filter="restore" class="btn btn-flat btn-sm btn-right">恢复</button>\r\n <span class="form-title">预处理：</span>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">反转</span>\r\n <span class="form-control"><input data-filter="reverse" type="checkbox"></span>\r\n </div>\r\n </div>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">高斯模糊</span>\r\n <span class="form-control"><input data-filter="gaussBlur" type="range" min="0" max="20" value="0"\r\n step="1"></span>\r\n </div>\r\n </div>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">对比度</span>\r\n <span class="form-control"><input data-filter="contrast" type="range" min="-50" max="50" value="0" step="1"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="form-inline">\r\n <button type="button" data-filter="restore-binarize" class="btn btn-flat btn-sm btn-right">恢复</button>\r\n <span class="form-title">轮　廓：</span>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">二值化阈值</span>\r\n <span class="form-control"><input data-filter="threshold" type="range" min="0" max="255" value="200" step="1"></span>\r\n </div>\r\n <div class="input-group input-group-sm">\r\n <select id="import-pic-threshold-pre" class="form-control">\r\n <option value="">预设</option>\r\n <option value="mean">均值</option>\r\n <option value="minimum">谷底最小值</option>\r\n <option value="intermodes">双峰平均</option>\r\n <option value="ostu">大津法</option>\r\n <option value="isoData">ISODATA法</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class="form-group">\r\n <span class="input-group">\r\n <button type="button" data-filter="open" class="btn btn-sm btn-flat btn-new">消除杂点</button>&nbsp;\r\n <button type="button" data-filter="close" class="btn btn-sm btn-flat btn-new">消除孔洞</button>&nbsp;\r\n <button type="button" data-filter="dilate" class="btn btn-sm btn-flat btn-new">膨胀</button>&nbsp;\r\n <button type="button" data-filter="erode" class="btn btn-sm btn-flat btn-new">腐蚀</button>\r\n </span>\r\n </div>\r\n </div>\r\n</div>\r\n';});
define(function () {return '<div id="import-pic-dialog">\r\n <div class="form-group">\r\n <div class="input-group btn-right">\r\n <div class="import-pic-url">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">图片URL</span>\r\n <input id="import-pic-url-text" value="" class="form-control">\r\n </div>\r\n </div>\r\n <button type="button" data-action="import-url" class="btn btn-flat btn-new btn-sm" title="指定图片URL加载图片">从URL导入图片</button>&nbsp;\r\n <button type="button" data-action="fitwindow" class="btn btn-flat btn-new btn-sm">适应窗口</button>&nbsp;\r\n <button type="button" data-action="fitwindow-left" class="btn btn-flat btn-new btn-sm">查看原图</button>&nbsp;\r\n <button type="button" data-action="fitwindow-right" class="btn btn-flat btn-new btn-sm">查看轮廓</button>\r\n </div>\r\n <button data-action="openfile" type="button" class="btn btn-flat btn-new btn-sm">选择图片</button>\r\n <span>请选择字形图片，支持jpg、gif、png、bmp、svg。</span>\r\n <form id="import-pic-form" style="width:0px;height:0px;overflow:hidden;"><input id="import-pic-file" type="file"></form>\r\n </div>\r\n <div class="preview-panel"><div class="canvas-left"><canvas id="import-pic-canvas-origin"></canvas></div><div class="canvas-right"><canvas id="import-pic-canvas-fit"></canvas></div></div>\r\n <div class="form-inline">\r\n <button type="button" data-filter="restore" class="btn btn-flat btn-sm btn-right">恢复</button>\r\n <span class="form-title">预处理：</span>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">反转</span>\r\n <span class="form-control"><input data-filter="reverse" type="checkbox"></span>\r\n </div>\r\n </div>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">高斯模糊</span>\r\n <span class="form-control"><input data-filter="gaussBlur" type="range" min="0" max="20" value="0"\r\n step="1"></span>\r\n </div>\r\n </div>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">对比度</span>\r\n <span class="form-control"><input data-filter="contrast" type="range" min="-50" max="50" value="0" step="1"></span>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="form-inline">\r\n <button type="button" data-filter="restore-binarize" class="btn btn-flat btn-sm btn-right">恢复</button>\r\n <span class="form-title">轮　廓：</span>\r\n <div class="form-group">\r\n <div class="input-group input-group-sm">\r\n <span class="input-group-addon">二值化阈值</span>\r\n <span class="form-control"><input data-filter="threshold" type="range" min="0" max="255" value="200" step="1"></span>\r\n </div>\r\n <div class="input-group input-group-sm">\r\n <select id="import-pic-threshold-pre" class="form-control">\r\n <option value="">预设</option>\r\n <option value="mean">均值</option>\r\n <option value="minimum">谷底最小值</option>\r\n <option value="intermodes">双峰平均</option>\r\n <option value="ostu">大津法</option>\r\n <option value="isoData">ISODATA法</option>\r\n </select>\r\n </div>\r\n </div>\r\n <div class="form-group">\r\n <span class="input-group">\r\n <button type="button" data-filter="open" class="btn btn-sm btn-flat btn-new">消除杂点</button>&nbsp;\r\n <button type="button" data-filter="close" class="btn btn-sm btn-flat btn-new">消除孔洞</button>&nbsp;\r\n <button type="button" data-filter="dilate" class="btn btn-sm btn-flat btn-new">膨胀</button>&nbsp;\r\n <button type="button" data-filter="erode" class="btn btn-sm btn-flat btn-new">腐蚀</button>\r\n </span>\r\n </div>\r\n </div>\r\n</div>\r\n';});

4
src/fonteditor/widget/program.js
View File

@ -88,7 +88,9 @@ define(
var program = {
// 在线地址读取接口
fontUrl: './php/readFont.php?file=${0}',
readOnline: location.hostname.indexOf('baidu.com') >= 0
? '/font/proxy?type=${0}&url=${1}'
:'./php/readOnline.php?type=${0}&file=${1}',
/**
* 初始化