[發明專利]一種H5圖片裁剪方法

在審

• 申請號: 201811520905.6
• 申請日: 2018-12-12
• 公開（公告）號: CN109785402A
• 公開（公告）日: 2019-05-21
• 發明（設計）人: 石在;左紫陽
• 申請（專利權）人: 四川商通實業有限公司
• 主分類號: G06T11/00
• 分類號: G06T11/00
• 代理公司: 成都環泰知識產權代理事務所(特殊普通合伙) 51242
• 代理人: 李斌;黃青

本發明公開了一種H5圖片裁剪方法，包括如下步驟：a、調用input[file]獲取圖片路徑；b、將圖片轉化成base64數據；c、根據圖片裁剪框涉及的位置計算出重新組合成一張完整圖片所需的base64數據；d、將計算后的base64數據轉化成裁剪后的圖片。該H5圖片裁剪方法沒有引用jQuery所以相對輕量，同時也適合于PC端，在需要此功能時只需要引用一個js庫，在頁面中引用調用就可使用。

技術領域

本發明涉及HTML5技術領域，特別是一種H5圖片裁剪方法。

背景技術

目前H5圖片裁剪大多依賴jQuery庫比較重不利于移動端開發，技術人員引用也相對煩瑣，另外用戶在上傳圖片的同時，因手機像素不同長寬比例也不同，所以上傳圖片的大小比例不同。

發明內容

為解決現有技術中存在的問題，本發明提供了一種H5圖片裁剪方法，該方法比現有的代碼輕量且沒有基于jQuery，使現在移動端不兼容jQuery的框架問題得到了更好的解決，同時他兼容PC端，引用框架也相當簡單，對選擇的框的裁剪也可以調整比例。

本發明采用的技術方案是：

一種H5圖片裁剪方法，包括如下步驟：

a、調用input[file]獲取圖片路徑；

b、將圖片轉化成base64數據；

c、根據圖片裁剪框涉及的位置計算出重新組合成一張完整圖片所需的base64數據；

d、將計算后的base64數據轉化成裁剪后的圖片。

優選地，基于JavaScript開發實現。

優選地，步驟b包括如下步驟：

以待裁剪圖片的圖片區域內的一個點為原點建立二維直角坐標系，計算待裁剪圖片的四條邊的直線方程。

優選地，步驟c包括如下步驟：

根據裁剪框的位置信息，確定在同一二維直角坐標系下裁剪框的四個端點的坐標值；

根據直線方程及坐標值，判斷所述裁剪框的四個端點是否位于所述直線方程構成的區域內，

如果是，則裁剪框的覆蓋區域完全位于待裁剪圖片的圖片區域內，使用裁剪框進行計算；

否則不完全位于，將裁剪框的覆蓋區域調整至待裁剪的圖片區域內，使用調整后的裁剪框進行計算。

優選地，根據直線方程及坐標值，判斷所述裁剪框的四個端點是否位于所述直線方程構成的區域內，包括：

根據直線方程，生成對應于待裁剪的圖片的四條邊的四個函數；

將裁剪框的四個端點分別代入待裁剪的圖片的四條邊所對應的四個函數中；

針對每個函數，判斷裁剪框的四個端點代入該函數的結果是否同號；

如果均同號，進一步針對每組互為對邊的邊所對應的兩個函數，判斷裁剪框的四個端點代入該兩個函數的結果是否異號，如果均異號，則所述裁剪框的四個端點位于所述直線方程構成的區域內。

優選地，將裁剪框的覆蓋區域調整至待裁剪的圖片區域之前，還包括：

向用戶展示用于提示裁剪框已超出待裁剪圖片的圖片區域的第一消息提示。

優選地，將裁剪框的覆蓋區域調整至待裁剪的圖片區域之前，還包括：

向用戶展示用于詢問是否接受系統自動將覆蓋區域調整至圖片區域內的第二消息提示；