前端:关于图片的研究

css方面

给图片添加边框,padding:1px; border:1px #dedede solid。会比直接贴图漂亮点

弹性图片 img {width:100%; height:auto;}

js方面

盘-古-建=站的统一用的js等比例缩放图片,并让图片自动居中。

Remarks:有待研究。(20141226)

缺点:浪费浏览器性能,页面效率下降。

编辑运营方面

相同“身份”的图片,采用统一规格的图片。(对于移动端的自适应图片有好处。)

Remark:移动端采用js来缩放图片显然是不合适的。因为设备性能有限。

Remark2:寻找一块可以缩放裁切预定尺寸的图片的傻瓜式工具。

服务器方面(更好的)

将图片的处理做到服务器端,上传图片后,将图片处理后生成一个副本,前台页面直接调用副本。

例子:如淘宝天猫的做法。

时间: 2024-08-02 21:49:18

前端:关于图片的研究的相关文章

前端js图片压缩

今天被问到前端怎么图片压缩,然后就一顿的查资源,终于知道前端怎么压缩图片. 关键: FileReader() toDataURL() 上面两个是关键方法,是html5后出现的好东西. 就是把图片转换成Base64编码,那样就可以不用理图片在哪了, 他就被你转换成编码了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

前端获取图片压缩后上传给后台

 此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上传显然不是一个好办法. 目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的 实现.根据查看caniuse,本demo里使用到的FileRe

JS魔法堂之实战:纯前端的图片预览

一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 二.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取

如何有效实现前端压缩图片并上传功能

随着现在手机的像素越来越高,很多照片动辄几兆甚至十几兆,上传后在服务器端压缩已经越来越不能满足当今的需求.这对于许多技术人员来说,处理起来这样的问题往往不知道该怎么下手,那么下面就跟大家讲解一下如何在前端进行图片压缩后上传到服务器. 以上传单张图片为例,多张图片同理,多嵌套一层循环即可.代码实现如下: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta

前端异常监控解决方案研究

摘要: 异常监控不复杂也不简单啊... 原文:前端异常监控解决方案研究 作者:frustigor 前端监控包括行为监控.异常监控.性能监控等,本文主要讨论异常监控.对于前端而言,和后端处于同一个监控系统中,前端有自己的监控方案,后端也有自己等监控方案,但两者并不分离,因为一个用户在操作应用过程中如果出现异常,有可能是前端引起,也有可能是后端引起,需要有一个机制,将前后端串联起来,使监控本身统一于监控系统.因此,即使只讨论前端异常监控,其实也不能严格区分前后端界限,而要根据实际系统的设计,在最终的

大型网站前端使用图片格式的正确姿势

如今,图像已经成为网络不可或缺的一部分.但情况并非一贯如此.直到1993年,Mosaic浏览器才在网页内容中加入图像.有些图像格式像GIF和JPEG当时已经存在,而PNG和SVG直到90年代才出现.图像用途多样,如:显示图片.品牌.插图.图表以及许多其他内容. 由于图片格式多样以及繁多的应用场景,如何选择正确的图片格式变得更加困难.LOGO应该是选择SVG还是PNG?而截图是选JPEG好还是PNG好?在不生成过大文件的前提下,文件的最优质量是多少?了解每个图像格式的工作原理以及它们各自的利弊可以

前端实现图片压缩上传

当项目中有图片上传功能时,便会产生服务器资源占用问题,为避免上传图片太大占用太多空间,需要将图片进行压缩之后再存储. 图片压缩可以通过前端或者后端都可以实现,这里主要闲扯一下我使用的前端图片压缩: 这里介绍的js压缩图片的主要思想是:首先求出上传的图片大小,然后判断是否大于限制的最大size,若大于,则将图片进行压缩.压缩的过程就是,使用canvas将要压缩的图片画出来. 首先使用FileReader对象读取图片,然后将图片进行压缩,将压缩之后的对象转换成blob对象(关于blob类型请参考ht

纯前端的图片预览

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John 一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前

Jersey后端服务接收ajax前端的图片上传

近期的项目里需要在前端上传图片后端接收处理.前端JSP页面使用Ajax上传图片后端使用Jersey框架提供restful接口接收处理图片. 一.前端的处理 jsp页面中图片上传没有使用form表单而是直接使用file类型的input控件 <input type="file" name="file" class="inpTxtA" value="" id="appLogo"/> <input