1. web前端图片处理。请求大神。。。。。。
<img src="" onMouseMove="onOver(this)" onMouseOut="onOut(this)"/>
<script type="text/javascript">
function onOver(postion){
postion.src = "";
}
function onOut(postion){
postion.src = "";
}
</script>
2. 前端怎么实现生成内容为图片的二维码
<!DOCTYPE html> 2 <html> 3 <head> 4 <script charset='utf-8' type='text/javascript' src='./jquery.js'></script> 5 <script src="./jquery.qrcode.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(document).ready(function(){ 8 $('#qr_gen').click(function()
9 {10 $('#qr_container').qrcode({render:"canvas",height:120, width:120,correctLevel:0,text:$('#qr_link').val()});
11 });12 });13 </script>14 </head>15 <body>16 <h1>QR CODER</h1>17 <div>18 <label for="qr_link">URL:</label> 19 <input id="qr_link" type="text" value="I am going to be a quick response code." style="width:450px;" /> 20 <button id="qr_gen" value="Generate">Generate</button> <br />21 </div>22 <div id="qr_container" style="margin:auto; position:relative;"></div>23 </div>24 </body>25 </html>
3. 前端图片处理
我的理解应该是生成图片的时候,在不影响图片质量的情况下,尽量用体积小的格式,比如在不透明的情况下尽量把图片保存成png格式。
在css中有一种技术叫做图片精灵,就是把一些背景图做成集合的形式。图片只需加载一次。
最后网上好像是有插件(浏览器也有插件)可以对图片进行压缩处理。
4. 前端如何将jfif怎么渲染成图片
在html里,我们要输出显示一个图片,正常是使用img标签,然后src写上图片的地址。
5. 怎样提高前端工程师开发效率,都在这里
前端工程师其实是一个工作很杂的职位,除了要负责切图、写html/css/js外,还要解决一系列的浏览器兼容性、网页性能优化等问题,所以提高前端工程师的开发效率是势在必行的,也是前端工程化的体现。
对于开发效率,我个人理解是
开发效率 = 新增代码的效率 + 修改代码的效率 + 维护代码的效率
那么如何提高前端开发效率便可以按照前端工程化的理念来进行划分。下面我就介绍下7个提高前端开发效率的方法。
1.切图
切图是一个前端最基础的技能,一般我们使用Photoshop或者FireWorks基本都能搞定设计师交付给我们的设计图,但是要提高切图效率的话就得使用一些诀窍了,比如利用PS里的动作来实现“一键切图”功能,这里除了切图外还介绍了其他的实用方法和工具。
2.编码
对于编写代码部分我们首先要找到一款合适自己的IDE工具,建议不要使用Notepad++或者Dreamweaver,这些工具已经不符合前端潮流了,无法让自己优雅地敲代码。这里我主要推荐Sublime Text、Atom或者Webstrom,因为它们除了人性化的界面和支持大多数语法的高亮外,还可以安装各种各样的插件来拓展你的IDE工具,下面我主要介绍几款Sublime Text提高开发效率的插件:
其中Element是用于快速编写html/CSS的,比如输入 ul>li 后按下tab键便可以生成一个ul标签里面包含一个li标签
JSFormat用于格式化JS;CSScomb用于对样式属性进行一键排序;HTML-CSS-JS Prettify可以一键规范我们的HTML/CSS/JS,甚至JSON格式;SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用于调用本地调色板功能。这些工具都非常实用,一定程度上可以提高我们的编码效率。
3.自动化
说到提高开发效率,这里不得不提一些前端的自动化工具,毕竟前端自动化是目前及未来的趋势,能够很大程度上缩减前端不必要的工作量,使我们能够专注前端本身。
这里我们可以使用NPM来管理我们的项目包文件;利用webpack来打包压缩我们的代码;利用Node.js来实现构建本地服务器;利用Karma、Jasmine来测试我们的前端代码。
用好前端自动化工具可以帮助我们处理很多琐碎的事情,比如一键压缩代码、图片,一键合并JS,检测文件更新等。
4.模块化
随着web2.0时代的到来,Ajax技术得到广泛应用,前端代码日益膨胀,而前端模块化能够方便我们对项目代码的维护,进行按需加载,从长远角度来看对我们提高项目的开发效率同样大有益处。
在ES6出来之前应该说前端代码本身不具备实现模块的功能,我们必须要使用一些模块化加载器来实现,比如RequireJS、SeaJs等。而随着ES6的普及,目前像RequireJS、SeaJs这样的工具已经没有存在的必要了。所以在基于ES6的开发环境下我建议使用ES6的模块化功能来实现我们的前端模块化。
5.组件化
前端组件化的概念也是由来已久,我们可以通过将我们的代码划分成不同组件来实现功能公用,一个同样的功能我们可能不用再次编写相同的代码,同时也可以提高前端代码的可维护性和清晰度。以下是目前流行的前端框架Vue的单文件组件的概念图:
我们可以将公用的组件抽离,将大组件拆分成小组件的形式实现前端组件化,组件与组件之间可以存在父子关系,也可以存在兄弟关系。在Vue的单文件组件中,一个组件包含了其HTML、CSS、JS的代码片段。
6.前后端分离
前后端分离的项目对提升前端开发效率非常有帮助,因为前端不再需要后台配置路由、搭建服务器环境、编写模板等,这样一来前端的生产力就会得到很大程度的解放,但是前后端分离的项目有利也有弊,如下图所示:
最终我们需要根据项目需求衡量利弊来决定是否使用前后端分离的模式。
7.规范与模式
团队协作离不开编码规范和开发模式的帮助。遵循编码规范文档可以帮助我们在团队开发时提高合作开发的效率。一个团队遵循一套编码规范可以使每个人的代码写出一个人的风格,这样团队间相互审查、测试、完善功能时会非常高效。下方是一些开源的前端编码规范文档:
网页链接
首页-TGuide
网页链接
网页链接
除了编码规范我们在开发时经常会沿袭了一些已经存在的模式来解决问题,比如当用JS编写弹框时我们往往会用到单例模式,用CSS编写动画时直接套用动画的常用属性等,我们不再需要从头开始思考某一个功能的实现,这就是模式带来的意义。
结语
当然除了以上7点,对于前端来说需要提高开发效率的地方还有很多,可谓任重而道远。只有将前端无序、繁杂的操作组织起来,利用工具简化、规范前端流程,才能实现项目构建、开发、维护的一体化。希望本文能够给初识前端的同学带来启发并付诸实践。
6. 类似于这样的图片展示,前端是如何做的,只截取图片的中间部分
我不知道自己理解对没?只是屏幕上的截屏?
窗口调整合适大小,QQ随意打开一个对话框,用截屏按钮。或者电脑右上角PrtSc按钮全屏复制,打开windows附件自带的画图板,粘贴,即可得到图片,编辑之。
7. 前端技术 文字生成图片
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<BODY>
<v:Rect style="position:relative;width:400px;height:400px">
<v:fill on="True" color="red"/>
<v:path textpathok="True"/>
<v:textpath on="True" string="VML Text"
style="v-rotate-letters:True;font:normal normal normal 36pt Arial"/>
</v:Rect>
</BODY>
</HTML>
8. 怎么在前端生成缩略图,只上传缩小后的图片
需要浏览器支持html5。
用FileReader读取本地文件,再用Image加载此文件并缩放绘制到canvas上。最后canvas.ToDataURL()取得缩放后文件的Base64编码,将此编码上传到服务端,解码为byte[]后,写入文件。
9. web前端开发,网站上很多图片力图各种按钮图,都是哪个职位负责做出来的
这种一般情况下都是美工负责这个东西,但是如果公司对这块儿要求比较高的话那就有专门的UI设计师专门负责做这种按钮啊,背景之类的东西。