這是使用HTML5 canvas 標簽進行圖片裁剪、旋轉(zhuǎn)、縮放示例代碼下載,html5 給我們帶來了極大驚喜的canvas標簽,有了它我們可以在瀏覽器客戶端處理圖片,不需要經(jīng)過服務(wù)器周轉(zhuǎn)。
使用HTML5 canvas標簽進行圖片裁剪、旋轉(zhuǎn)、縮放示例代碼,基本都知道。bootstrap是一個響應(yīng)式的前端ui框架。使用它是為了在手機端查看頁面時能夠自適應(yīng)寬高。lrz是一個前端的js壓縮圖片的插件。
1、照片本地處理,ps有的一些基本功能都有
2、結(jié)合js可以實現(xiàn)一些很炫的動畫效果
使用HTML5 canvas標簽進行圖片裁剪、旋轉(zhuǎn)、縮放示例代碼是4條直接+4個圓角+2條斜線就可實現(xiàn)。直線和斜線好畫,關(guān)鍵在于圓角,有人說直接用lineJoin不就搞定了嗎,大家要清楚,lineJoin畫出來的圓角角度大小是根據(jù)lineWidth確定的,要達到我們要實現(xiàn)的圓角角度,上面畫正方形的圓角lineWidth=10,可我們的圖片邊框要這么粗?顯然不符合要求,且難以控制圓角角度。最佳的辦法就是用quadraticCurveTo畫曲線替換,關(guān)鍵在于確定曲線的三個點:起點,控制點和終點,下面是完整的代碼。