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設計師專門負責做這種按鈕啊,背景之類的東西。