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

在審

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

本發明公開了一種基于VUE的WEB圖片預覽方法及系統，該方法包括以下步驟：S1、采用預設方法對頁面中鼠標所選中的圖片區域進行等比例放大；S2、對頁面中存在多張圖片時出現圖片閃爍和定位錯誤的問題進行處理；S3、對存放等比例放大圖片的預覽框進行實時位置智能判斷，并對預覽框進行適應性調整。有益效果：本發明實現將圖片完美還原并等比例縮放，且可以對圖片進行實時預覽及將鼠標停留的位置進行等比例放大，從而保證了圖片預覽的清晰度，進而使前端人員開發預覽圖效果更加完美；本發明在圖片預覽過程中，放大圖出現的位置基于當前選中圖片的位置，解決了同一頁面多張圖片需要用到預覽時而產生圖片位置錯亂和閃爍的問題。

技術領域

本發明涉及圖片預覽技術領域，具體來說，涉及一種基于VUE的WEB圖片預覽方法及系統。

背景技術

前端人員的日常需求開發過程中經常會遇到一些需要實時預覽的圖片，目前市場上大部分預覽插件，要么不能進行實時預覽，僅僅是按照原圖放大多少倍，要么多張圖片重疊時會發生閃爍錯亂的現象，要么鼠標停留原圖的位置和放大圖的放大的位置并不相同等各種細節問題，為了方便前端人員開發預覽圖效果更完美，研發便捷美觀實時高效的預覽插件是很有必要的。

針對相關技術中的問題，目前尚未提出有效的解決方案。

發明內容

針對相關技術中的問題，本發明提出一種基于VUE的WEB圖片預覽方法及系統，以克服現有相關技術所存在的上述技術問題。

為此，本發明采用的具體技術方案如下：

根據本發明的一個方面，提供了一種基于VUE(三維渲染解決方案產品)的WEB(萬維網)圖片預覽方法，該方法包括以下步驟：

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

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

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

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

S11、插件傳值；

S12、圖片獲取；

S13、設置圖片的大小并通過計算得到預覽框的背景圖片大?。?/p>

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

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

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

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

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

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

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

進一步的，所述插件傳值包括設置以鼠標停留點為中心的小色塊寬高、背景顏色、透明度以及預覽框寬高。

進一步的，所述圖片獲取包括分別設置放大圖和原始圖片的圖片路徑，并在加載頁面時提前獲取靜態資源。

進一步的，所述在預覽框進行展示圖片內容還包括以下步驟：

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

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

S143、創建預覽框；