[發明專利]一種基于VUE的WEB圖片預覽方法及系統

在審

• 申請號: 202011471012.4
• 申請日: 2020-12-14
• 公開（公告）號: CN112445991A
• 公開（公告）日: 2021-03-05
• 發明（設計）人: 嚴濤;候金明;李尊狀
• 申請（專利權）人: 南京中孚信息技術有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F3/0484;G06F3/0487
• 代理公司: 南京中盟科創知識產權代理事務所(特殊普通合伙) 32279
• 代理人: 孫麗君

1.一種基于VUE的WEB圖片預覽方法，其特征在于，該方法包括以下步驟：

S1、采用預設方法對頁面中鼠標所選中的圖片區域進行等比例放大；

S2、對頁面中存在多張圖片時出現圖片閃爍和定位錯誤的問題進行處理；

S3、對存放等比例放大圖片的預覽框進行實時位置智能判斷，并對預覽框進行適應性調整；

其中，所述采用預設方法對頁面中鼠標所選中的圖片區域進行等比例放大還包括以下步驟：

S11、插件傳值；

S12、圖片獲取；

S13、設置圖片的大小并通過計算得到預覽框的背景圖片大小；

S14、在預覽框進行展示圖片內容；

其中，所述對頁面中存在多張圖片時出現圖片閃爍和定位錯誤的問題進行處理還包括以下步驟：

S21、根據鼠標滑入滑出，始終只創建一個預覽框文檔對象模型實例；

S22、根據鼠標當前所選中的位置信息作對比判定預覽框圖片的實時位置；

其中，所述對存放等比例放大圖片的預覽框進行實時位置智能判斷，并對預覽框進行適應性調整包括以下步驟：

S31、實時獲取視口寬高和鼠標所選中的原始圖片距離視口上下左右的距離；

S32、默認預覽框位置靠原始圖片右側、底側顯示。

2.根據權利要求1所述的一種基于VUE的WEB圖片預覽方法，其特征在于，所述插件傳值包括設置以鼠標停留點為中心的小色塊寬高、背景顏色、透明度以及預覽框寬高。

3.根據權利要求1所述的一種基于VUE的WEB圖片預覽方法，其特征在于，所述圖片獲取包括分別設置放大圖和原始圖片的圖片路徑，并在加載頁面時提前獲取靜態資源。

4.根據權利要求1所述的一種基于VUE的WEB圖片預覽方法，其特征在于，所述在預覽框進行展示圖片內容還包括以下步驟：

S141、獲取鼠標所選原始圖片信息；

S142、創建鼠標色塊選擇區域；

S143、創建預覽框；

S144、注冊鼠標移動事件并做出判斷，精確顯示鼠標色塊對應的放大圖區域；

S145、計算放大圖與原始圖片的比例并給預覽框添加背景圖片定位屬性，等比例放大鼠標選中區域。

5.根據權利要求1所述的一種基于VUE的WEB圖片預覽方法，其特征在于，所述根據鼠標滑入滑出，始終只創建一個預覽框文檔對象模型實例還包括以下步驟：

觸發鼠標移出圖片事件時銷毀文檔對象模型實例；

觸發鼠標移入圖片事件時創建實例。

6.根據權利要求1所述的一種基于VUE的WEB圖片預覽方法，其特征在于，所述默認預覽框位置靠原始圖右側、底側顯示還包括以下步驟：

右側邊距離不足顯示預覽框自身位置時則顯示在左邊，其他位置依次推導。

7.根據權利要求1所述的一種基于VUE的WEB圖片預覽方法，其特征在于，所述設置圖片的大小包括默認圖片寬57px、高81px，并根據實際需求適應性改動傳值大小。