如何實(shí)現(xiàn)從照片中裁切自已的肖像呢？
更新時間：2007年03月04日 00:00:00 作者：
在會員注冊時，讓會員輸入頭像對后續(xù)的功能很重要。很難指望普通人具備photoshop的操作能力，讓他們提供合乎尺寸的個人照片不太現(xiàn)實(shí)。還好現(xiàn)在可以讓服務(wù)端支持圖片處理，我們只需要在客戶端提供用戶設(shè)計圖片的接口就可以了。
下面的程序?qū)崿F(xiàn)了裁切縮放部分圖片的功能。從技術(shù)上來看，主要是怎么讓半透明的摭罩中空，為了實(shí)現(xiàn)這一點(diǎn)，我使用了3*3的表格來模擬座標(biāo)上的矩形，通過指定左上單元格的寬高來設(shè)置矩形的座標(biāo)，而中心單元格的寬高則與矩形的尺寸相對應(yīng)。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面的程序?qū)崿F(xiàn)了裁切縮放部分圖片的功能。從技術(shù)上來看，主要是怎么讓半透明的摭罩中空，為了實(shí)現(xiàn)這一點(diǎn)，我使用了3*3的表格來模擬座標(biāo)上的矩形，通過指定左上單元格的寬高來設(shè)置矩形的座標(biāo)，而中心單元格的寬高則與矩形的尺寸相對應(yīng)。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
javascript在子頁面中函數(shù)無法調(diào)試問題解決方法
遇到在子頁面中提交的時候會無法能夠調(diào)試javascript代碼的情況出現(xiàn)，下面有個不錯的解決方法，希望對大家有所幫助2014-01-01
這篇文章主要介紹了js計算兩個時間差 天 時 分 秒 毫秒的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項目中用到了一款帶輪播組件，功能非常齊全，可以設(shè)置各種標(biāo)題樣式、動畫效果、輪播時間、開始暫停等功能，下面小編通過本文給大家詳細(xì)介紹下實(shí)現(xiàn)過程，需要的朋友參考下吧2016-11-11
基于JavaScript實(shí)現(xiàn)的插入排序算法分析
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)的插入排序算法,結(jié)合實(shí)例形式詳細(xì)分析了插入排序的原理、操作步驟及javascript相關(guān)實(shí)現(xiàn)技巧與注意事項,需要的朋友可以參考下2017-04-04
JS實(shí)現(xiàn)定時任務(wù)每隔N秒請求后臺setInterval定時和ajax請求問題
這篇文章主要介紹了JS實(shí)現(xiàn)定時任務(wù)每隔N秒請求后臺setInterval定時和ajax請求 的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文件拖拽事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-03-03
JavaScript實(shí)現(xiàn)班級隨機(jī)點(diǎn)名小應(yīng)用需求的具體分析
班級隨機(jī)點(diǎn)名小應(yīng)用，點(diǎn)擊開始按鈕，人員的顏色開始變化，當(dāng)停止的時候，會有一個顏色不同的位置，那么這個位置就是被點(diǎn)到的同學(xué)了2014-05-05
這篇文章主要介紹了JavaScript中的無阻塞加載性能優(yōu)化方案,本文講解了Deferred Scripts 延期腳本、Dynamic Script Elements 動態(tài)腳本元素、XMLHttpRequest Script Injection XHR腳本注入等內(nèi)容,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了BootStrap3中模態(tài)對話框的使用的相關(guān)資料,需要的朋友可以參考下2017-01-01
JavaScript輸出斐波那契數(shù)列的實(shí)現(xiàn)方法
斐波那契數(shù)列來源于兔子繁殖問題,所以也叫兔子序列,下面這篇文章主要給大家介紹了關(guān)于JavaScript輸出斐波那契數(shù)列的實(shí)現(xiàn)方法,需要的朋友可以參考下2021-06-06