小编pom*_*meh的帖子
如何在浏览器中通过Javascript压缩图像？
TL; DR;
有没有办法在上传之前直接在浏览器端压缩图像(主要是jpeg,png和gif)？我很确定JavaScript可以做到这一点,但我找不到实现它的方法.
这是我想要实现的完整场景:
- 用户访问我的网站,并通过
input type="file"元素选择图像, - 这个图像是通过JavaScript检索的,我们做了一些验证,如正确的文件格式,最大文件大小等,
- 如果一切正常,页面上会显示图像的预览,
- 用户可以进行一些基本操作,例如将图像旋转90°/ -90°,按照预定义的比例裁剪等,或者用户可以上传另一张图像并返回步骤1,
- 当用户满意时,编辑后的图像会被压缩并在本地"保存"(不保存到文件中,但在浏览器内存/页面中), -
- 用户填写表格,其中包含姓名,年龄等数据,
- 用户单击"完成"按钮,然后将包含数据+压缩图像的表单发送到服务器(不带AJAX),
直到最后一步的完整过程应该在客户端完成,并且应该与最新的Chrome和Firefox,Safari 5+和IE 8+兼容.如果可能,只应使用JavaScript(但我很确定这是不可能的).
我现在没有编码任何东西,但我已经考虑过了.可以通过File API在本地读取文件,可以使用Canvas元素完成图像预览和编辑,但是我找不到一种方法来执行图像压缩部分.
根据html5please.com和caniuse.com,支持这些浏览器非常困难(感谢IE),但可以使用FlashFanvas和FileReader之类的polyfill来完成.
实际上,目标是减小文件大小,因此我将图像压缩视为一种解决方案.但是,我知道上传的图像将在我的网站上显示,每次都在同一个地方,我知道这个显示区域的尺寸(例如200x400).因此,我可以调整图像大小以适应这些尺寸,从而减小文件大小.我不知道这种技术的压缩率是多少.
你怎么看 ？你有什么建议告诉我吗？你知道在JavaScript中压缩浏览器图像的方法吗？谢谢你的回复.
推荐指数
解决办法
查看次数
为什么在Firebug Net Panel中不显示favicon图标
我在很多网站上都看到了这一点,例如:即使在这里:
http://www.w3.org/2005/10/howto-favicon
当您在firebug中的Net Panel下加载此页面的所有资源并检查图像选项卡时,它会显示页面上的所有图像,但不会显示图标.为什么？
我应该在萤火虫的其他地方寻找它吗？
推荐指数
解决办法
查看次数
在图像上找到最喜欢的区域
当我有一个带有N个样本大小的选择的图像时,我应该使用什么mean-stat-equation？
我有一个独特的问题,我希望得到一些建议,这样我就不会错过任何事情.问题:基于用户选择不同选择比的区域,在图像上找到最喜欢/喜欢/重要的区域.
场景:考虑一只狗的图像,以及数百名用户以各种分辨率选择该图像上的区域,大多数选择中明显的焦点区域将是包含狗的区域.我可以记录x1,x2,y1,y2坐标并将它们放入数据库,现在如果我想在一组分辨率中自动生成此图像的版本,我应该能够识别具有最大吸引力的区域用户.我认为可行的方法是:
- 找到所有选择的平均中心点并将选择基于该选择. - 非常简单,但不会那么准确.
- 使用一些算法,如K Means或EM Clustering,但我不知道哪一个最适合.
期待我的问题的一些出色的解决方案
有关该问题的更多信息:实际图像很可能是1024x768图像,并且对其进行的选择将是最常见的移动电话分辨率.目标是根据用户选择通过智能学习自动生成手机壁纸.
推荐指数
解决办法
查看次数
如何防止.htaccess重定向中的一个文件？
我正在创建php前端控制器.这是我的.htaccess档案.
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule (.*) controller.php [L]
</IfModule>
此代码将所有网址重定向到controller.php.我需要避免重定向index.php到controller.php.所有其他网址应重定向到controller.php.
推荐指数
解决办法
查看次数
CORS与jQuery Dropzone问题并上传到Imgur
我尝试使用jQuery Dropzone将图像上传到Imgur或任何其他域,但这不起作用.
这是我的dropzone设置:
$("div.dropzone").dropzone
success: -> console.log arguments
paramName: "image"
method: "post"
maxFilesize: 2
url: "https://api.imgur.com/3/upload"
headers:
Authorization: "Client-ID *************"
这不起作用.它表示返回码为0.请求标头:
Host: api.imgur.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:31.0) Gecko/20100101 Firefox/31.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: fr,fr-fr;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
Origin: http://my.opencubes.io
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,cache-control,x-requested-with
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
首先,你可以看到cient id没有出现:(.但是最大的问题是使用的方法是OPTIONS.响应头:
当我尝试将文件上传到我的另一个域时,我遇到了同样的问题(dropzone位于子域中)
在控制台中我看到:
Une demande multi-origines (Cross-Origin Request) a été bloquée : la politique « Same Origin » ne permet pas de consulter la ressource distante située …推荐指数
解决办法
查看次数
Google Loader与标准<script>标记
谷歌加载器
<script type="text/javascript">
google.load('jquery','1.7.1');
google.load('jqueryui','1.8.17');
</script>
要么...
标准的<script>标签
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
哪个更好？为什么？
推荐指数
解决办法
查看次数
查找搜索项目前后加4行
我正在使用notepad++并希望找到特定字符串出现的上下文.
所以搜索字符串是0wh.*0subj,我想在它之前和之后找到这个搜索项加上4行.
eg: xxx means whatever is on a new line. the search result should be:
xxx
xxx
xxx
xxx
0wh.*0subj
xxx
xxx
xxx
xxx
我试过using \n\r但它不起作用.我们将非常感谢所提供的任何帮助.
问候
推荐指数
解决办法
查看次数
文本没有被包装在盒子里
我试图用幻灯片做一个图像标题.我已经完成了所有工作,但幻灯片中的文本没有包含在幻灯片框中.有人请帮忙.使用JSfiddle链接查看代码:
http://jsfiddle.net/anba/t31a4xq0/
HTML
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
<span class="caption simple-caption">
<div class="blogp">
<a href="">Simple Caption</a>
<p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
</div>
</span>
</div>
</body>
</html>
CSS
#mainwrapper {
/*font: 18pt normal Arial, sans-serif;*/
height: auto;
/*margin: 5px 10px ;*/
/*text-align: center;*/
width: 300px;
overflow: visible;
}
/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden; …推荐指数
解决办法
查看次数
标签 统计
javascript ×3
html ×2
php ×2
.htaccess ×1
algorithm ×1
apache ×1
cdn ×1
compression ×1
cors ×1
css ×1
dropzone.js ×1
favicon ×1
firebug ×1
google-api ×1
google-cdn ×1
html5 ×1
image ×1
imgur ×1
math ×1
notepad++ ×1
regex ×1
statistics ×1