CN112445991A

CN112445991A - 一种基于vue的web图片预览方法及系统

Info

Publication number: CN112445991A
Application number: CN202011471012.4A
Authority: CN
Inventors: 严涛; 候金明; 李尊状
Original assignee: Nanjing Zhongfu Information Technology Co Ltd
Current assignee: Nanjing Zhongfu Information Technology Co Ltd
Priority date: 2020-12-14
Filing date: 2020-12-14
Publication date: 2021-03-05

Abstract

本发明公开了一种基于VUE的WEB图片预览方法及系统，该方法包括以下步骤：S1、采用预设方法对页面中鼠标所选中的图片区域进行等比例放大；S2、对页面中存在多张图片时出现图片闪烁和定位错误的问题进行处理；S3、对存放等比例放大图片的预览框进行实时位置智能判断，并对预览框进行适应性调整。有益效果：本发明实现将图片完美还原并等比例缩放，且可以对图片进行实时预览及将鼠标停留的位置进行等比例放大，从而保证了图片预览的清晰度，进而使前端人员开发预览图效果更加完美；本发明在图片预览过程中，放大图出现的位置基于当前选中图片的位置，解决了同一页面多张图片需要用到预览时而产生图片位置错乱和闪烁的问题。

Description

一种基于VUE的WEB图片预览方法及系统

技术领域

本发明涉及图片预览技术领域，具体来说，涉及一种基于VUE的WEB图片预览方法及系统。

背景技术

前端人员的日常需求开发过程中经常会遇到一些需要实时预览的图片，目前市场上大部分预览插件，要么不能进行实时预览，仅仅是按照原图放大多少倍，要么多张图片重叠时会发生闪烁错乱的现象，要么鼠标停留原图的位置和放大图的放大的位置并不相同等各种细节问题，为了方便前端人员开发预览图效果更完美，研发便捷美观实时高效的预览插件是很有必要的。

针对相关技术中的问题，目前尚未提出有效的解决方案。

发明内容

针对相关技术中的问题，本发明提出一种基于VUE的WEB图片预览方法及系统，以克服现有相关技术所存在的上述技术问题。

为此，本发明采用的具体技术方案如下：

根据本发明的一个方面，提供了一种基于VUE(三维渲染解决方案产品)的WEB(万维网)图片预览方法，该方法包括以下步骤：

S1、采用预设方法对页面中鼠标所选中的图片区域进行等比例放大；

S2、对页面中存在多张图片时出现图片闪烁和定位错误的问题进行处理；

S3、对存放等比例放大图片的预览框进行实时位置智能判断，并对预览框进行适应性调整；

其中，所述采用预设方法对页面中鼠标所选中的图片区域进行等比例放大还包括以下步骤：

S11、插件传值；

S12、图片获取；

S13、设置图片的大小并通过计算得到预览框的背景图片大小；

S14、在预览框进行展示图片内容；

其中，所述对页面中存在多张图片时出现图片闪烁和定位错误的问题进行处理还包括以下步骤：

S21、根据鼠标滑入滑出，始终只创建一个预览框文档对象模型实例；

S22、根据鼠标当前所选中的位置信息作对比判定预览框图片的实时位置；

其中，所述对存放等比例放大图片的预览框进行实时位置智能判断，并对预览框进行适应性调整包括以下步骤：

S31、实时获取视口宽高和鼠标所选中的原始图片距离视口上下左右的距离；

S32、默认预览框位置靠原始图片右侧、底侧显示。

进一步的，所述插件传值包括设置以鼠标停留点为中心的小色块宽高、背景颜色、透明度以及预览框宽高。

进一步的，所述图片获取包括分别设置放大图和原始图片的图片路径，并在加载页面时提前获取静态资源。

进一步的，所述在预览框进行展示图片内容还包括以下步骤：

S141、获取鼠标所选原始图片信息；

S142、创建鼠标色块选择区域；

S143、创建预览框；

S144、注册鼠标移动事件并做出判断，精确显示鼠标色块对应的放大图区域；

S145、计算放大图和原始图片的比例并给预览框添加背景图片定位属性，等比例放大鼠标选中区域。

进一步的，所述根据鼠标滑入滑出，始终只创建一个预览框文档对象模型实例还包括以下步骤：

触发鼠标移出图片事件时销毁文档对象模型实例；

触发鼠标移入图片事件时创建实例。

进一步的，所述默认预览框位置靠原始图片右侧、底侧显示还包括以下步骤：

右侧边距离不足显示预览框自身位置时则显示在左边，其他位置依次推导。

进一步的，所述设置图片的大小包括默认图片宽57px、高81px，并根据实际需求适应性改动传值大小。

根据本发明的另一个方面，还提供了一种基于VUE的WEB图片预览系统，该系统包括：

放大模块，用于采用预设方法对页面中鼠标所选中的图片区域进行等比例放大；

处理模块，用于对页面中存在多张图片时出现图片闪烁和定位错误的问题进行处理；

调整模块，用于对存放等比例放大图片的预览框进行实时位置智能判断，并对预览框进行适应性调整；

S11、插件传值；

S12、图片获取；

S14、在预览框进行展示图片内容；

S32、默认预览框位置靠原始图片右侧、底侧显示。

本发明的有益效果为：

(1)、本发明实现将图片完美还原并等比例缩放，且可以对图片进行实时预览及将鼠标停留的位置进行等比例放大，从而保证了图片预览的清晰度，进而使前端人员开发预览图效果更加完美。

(2)、本发明在图片预览过程中，可根据原始图片在浏览器视口中的位置信息智能判断预览框出现的位置并实时调整出现在新的位置，放大图出现的位置基于当前选中图片的位置，解决了同一页面多张图片需要用到预览时而产生图片位置错乱和闪烁的问题。

(3)、本发明放大图的位置根据当前屏幕大小和选中图片的位置适当实时调整以完全形态展示在屏幕中，不以固定在哪一侧，从而避免出现放大图超出屏幕显示区域的问题。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据本发明实施例的一种基于VUE的WEB图片预览方法的流程图；

图2是根据本发明实施例的一种基于VUE的WEB图片预览系统的原理框图。

图中：

1、放大模块；2、处理模块；3、调整模块。

具体实施方式

为进一步说明各实施例，本发明提供有附图，这些附图为本发明揭露内容的一部分，其主要用以说明实施例，并可配合说明书的相关描述来解释实施例的运作原理，配合参考这些内容，本领域普通技术人员应能理解其他可能的实施方式以及本发明的优点，图中的组件并未按比例绘制，而类似的组件符号通常用来表示类似的组件。

根据本发明的实施例，提供了一种基于VUE的WEB图片预览方法及系统。

现结合附图和具体实施方式对本发明进一步说明，如图1所示，根据本发明实施例的基于VUE的WEB图片预览方法，该方法包括以下步骤：

具体的，对存放等比例放大图片的预览框进行实时位置智能判断，并对预览框进行适应性调整的程序为：

S11、插件传值；

S12、图片获取；

S14、在预览框进行展示图片内容；

S32、默认预览框位置靠原始图片右侧、底侧显示。

在一个实施例中，所述插件传值包括设置以鼠标停留点为中心的小色块宽高、背景颜色、透明度以及预览框宽高。

具体的，插件需要的传参为：

在一个实施例中，所述图片获取包括分别设置放大图和原始图片的图片路径，并在加载页面时提前获取静态资源。

在一个实施例中，所述在预览框进行展示图片内容还包括以下步骤：

S141、获取鼠标所选原始图片信息；

此步骤的运行程序为：

“this.imgObj＝this.$el.getElementsByTagName('img')[0]

this.imgRect＝this.imgObj.getBoundingClientRect()”；

S142、创建鼠标色块选择区域；

此步骤的运行程序为：：

“//手动创建虚拟dom色块表示鼠标选择区域并添加相关属性

this.mouseMask＝document.createElement('div')

//设置类名，用于设置样式

this.mouseMask.className＝'_magnifier_zoom'

//设置小色块背景色、宽、高、透明度

this.mouseMask.style.background＝this.configs.maskColor

this.mouseMask.style.height＝this.configs.maskWidth+'px'

this.mouseMask.style.width＝this.configs.maskHeight+'px'

this.mouseMask.style.opacity＝this.configs.maskOpacity

//将鼠标色块添加进图片的父盒子用作选择区域

this.imgObj.parentNode.appendChild(this.mouseMask)”；

S143、创建预览框；

此步骤的运行程序为：

“//创建预览框

const imgLayer＝document.createElement('div')

this.imgLayer＝imgLayer

//预览框添加相关id和属性值,固定定位(相对于浏览器视口)

imgLayer.id＝`_magnifier_layer${this.fileData.md5}`

imgLayer.className＝'_magnifier_layer'

imgLayer.style.position＝'fixed'

//预览框宽高可提前预设

imgLayer.style.width＝this.configs.width+'px'

imgLayer.style.height＝this.configs.height+'px'

//预览框默认出现在图片右侧(预览左侧距视口左距离＝图片距视口左边距离+图片宽度)

imgLayer.style.left＝this.imgRect.left+this.imgRect.width+'px'

//将放大图的地址赋值为预览框的背景图片并设置不重叠

imgLayer.style.backgroundImage＝`url('${this.bigSrc}')`

imgLayer.style.backgroundRepeat＝'no-repeat'

//计算背景图片的实际宽高并赋值(上面有介绍方法)

this.bgWidth＝this.configs.width/this.configs.maskWidth*this.imgRect.width

this.bgHeight＝this.configs.height/this.configs.maskHeight*this.imgRect.height

imgLayer.style.backgroundSize＝`${this.bgWidth}px${this.bgHeight}px`

//将预览框添加进外层body

document.body.appendChild(imgLayer)”；

S144、注册鼠标移动事件并做相应判断，精确显示鼠标色块对应的放大图区域；

具体的，分别获取鼠标距离图片上下左右的距离，判断色块侧边是否超出图片边缘，准确定位色块左上角距离原图的左边距离及上边距离；

上边超出：top为0；下边超出：top为图片自身高度-色块自身高度；

左边超出：left为0；右边超出：left为图片自身宽度-色块自身宽度；

S145、计算放大图和原始图的比例并给预览框添加背景图片定位属性，等比例放大鼠标选中区域；

此步骤的运行程序为：

“this.imgLayer.style.backgroundPositionX＝`-${backgroundX}px`

this.imgLayer.style.backgroundPositionY＝`-${backgroundY}px”。

在一个实施例中，所述处理页面存在多张图片时可能会出现图片闪烁和定位错误的问题还包括以下步骤：

S21、根据鼠标滑入滑出，始终只创建一个预览框dom实例，触发mouseout事件时销毁dom实例，触发mouseout事件时创建实例；

S22、根据鼠标当前所选中的位置信息做对比判定预览框图片的实时位置。

在一个实施例中，所述根据鼠标滑入滑出，始终只创建一个预览框文档对象模型实例还包括以下步骤：

触发鼠标移出图片事件时销毁文档对象模型实例；

触发鼠标移入图片事件时创建实例。

在一个实施例中，所述默认预览框位置靠原始图片右侧、底侧显示还包括以下步骤：

在一个实施例中，所述设置图片的大小包括默认图片宽57px、高81px，并根据实际需求适应性改动传值大小。

具体的，通过计算可以得到放大图的宽高，其中放大图宽＝原图宽×小色块宽/预览框宽，放大图高＝原图高×小色块高/预览框高。

根据本发明的另一个实施例，如图2所示，还提供了一种基于VUE的WEB图片预览系统，该系统包括：

放大模块1，用于采用预设方法对页面中鼠标所选中的图片区域进行等比例放大；

处理模块2，用于对页面中存在多张图片时出现图片闪烁和定位错误的问题进行处理；

调整模块3，用于对存放等比例放大图片的预览框进行实时位置智能判断，并对预览框进行适应性调整；

S11、插件传值；

S12、图片获取；

S14、在预览框进行展示图片内容；

S32、默认预览框位置靠原始图片右侧、底侧显示。

以下对上述出现的英文单词释义以及部分javascript(一种直译式脚本语言)语法进行解释：

dom：DOM是网页中用来表示文档中对象的标准模型，通过JavaScript可以对网页中的所有DOM对象进行操作，是由万维网联盟W3C组织制定的标准编程接口。文档对象模型(Document Object Model，简称DOM)。

配置：

Configs：当前放大图和原始图片所需但不是必填的位置信息(不填会有默认值)；

Configs：{

width：预览框的宽度，单位px；

height：预览框的高度，单位px；

maskWidth：鼠标当前选中小色块的宽度，单位px；

maskHeight：鼠标当前选中小色块的高度，单位px；

maskColor：鼠标当前选中小色块的背景色，色值；

maskOpacity：鼠标当前选中小色块的透明度，百分比。

}

变量：

imgObj：当前鼠标所选中的图片实例dom信息；

ImgRect(rect)：选中的图片信息的位置对象信息；

mouseMask：鼠标选择区域小色块的dom对象；

imgLayer：预览框的dom对象；

bgWidth：计算背景图片的宽度值；

bgHeight：计算背景图片的高度值；

docw：浏览器视口的宽度；

doch：浏览器视口的高度；

isLeft：判断左右距离大小；

isTop：判断上下距离大小；

scrollW：页面卷曲的宽度；

loc_isright：判断图片左边距离大还是右边。

属性：

parentNode：dom对象父节点；

position：dom对象的位置信息；

backgroundImg：背景图片；

backgroundRepeat：设置是否及如何重复背景图像；

backgroundSize：设置背景图片的尺寸；

backgroundPositionX：背景图片的横坐标位置信息；

backgroundPositionY：背景图片的横坐标位置信息；

document.documentElement.scrollLef、window.pageXOffset、document.body.scrollLeft：该元素的显示(可见)的内容与该元素实际的内容的距离；

document.documentElement.clientHeight：获取当前视口宽度。

方法：

mouseOut：鼠标移出选中原始图片时触发的事件；

mouseEnter：鼠标进入选中原始图片时触发的事件；

getElementsByTagName：通过标签名获取dom信息的方法；

getBoundingClientRect:：用于获取某个元素相对于浏览器视窗的位置集合(上，下，左，右)的方法；

documnet.body.appendChild：将dom对象添加入html即网页的最外层盒子(body)中的方法；

Math.Max：比较两个数的大小，输出较大的那一个。

综上所述，借助于本发明的上述技术方案，本发明实现将图片完美还原并等比例缩放，且可以对图片进行实时预览及将鼠标停留的位置进行等比例放大，从而保证了图片预览的清晰度，进而使前端人员开发预览图效果更加完美；本发明在图片预览过程中，可根据原始图片在浏览器视口中的位置信息智能判断预览框出现的位置并实时调整出现在新的位置，放大图出现的位置基于当前选中图片的位置，解决了同一页面多张图片需要用到预览时而产生图片位置错乱和闪烁的问题；本发明放大图的位置根据当前屏幕大小和选中图片的位置适当实时调整以完全形态展示在屏幕中，不以固定在哪一侧，从而避免出现放大图超出屏幕显示区域的问题。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种基于VUE的WEB图片预览方法，其特征在于，该方法包括以下步骤：

S11、插件传值；

S12、图片获取；

S14、在预览框进行展示图片内容；

S32、默认预览框位置靠原始图片右侧、底侧显示。

2.根据权利要求1所述的一种基于VUE的WEB图片预览方法，其特征在于，所述插件传值包括设置以鼠标停留点为中心的小色块宽高、背景颜色、透明度以及预览框宽高。

3.根据权利要求1所述的一种基于VUE的WEB图片预览方法，其特征在于，所述图片获取包括分别设置放大图和原始图片的图片路径，并在加载页面时提前获取静态资源。

4.根据权利要求1所述的一种基于VUE的WEB图片预览方法，其特征在于，所述在预览框进行展示图片内容还包括以下步骤：

S141、获取鼠标所选原始图片信息；

S142、创建鼠标色块选择区域；

S143、创建预览框；

S145、计算放大图与原始图片的比例并给预览框添加背景图片定位属性，等比例放大鼠标选中区域。

5.根据权利要求1所述的一种基于VUE的WEB图片预览方法，其特征在于，所述根据鼠标滑入滑出，始终只创建一个预览框文档对象模型实例还包括以下步骤：

触发鼠标移出图片事件时销毁文档对象模型实例；

触发鼠标移入图片事件时创建实例。

6.根据权利要求1所述的一种基于VUE的WEB图片预览方法，其特征在于，所述默认预览框位置靠原始图右侧、底侧显示还包括以下步骤：

7.根据权利要求1所述的一种基于VUE的WEB图片预览方法，其特征在于，所述设置图片的大小包括默认图片宽57px、高81px，并根据实际需求适应性改动传值大小。

8.一种基于VUE的WEB图片预览系统，以实现权利要求1-7中任一项所述的基于VUE的WEB图片预览方法的步骤，其特征在于，该系统包括：

S11、插件传值；

S12、图片获取；

S14、在预览框进行展示图片内容；

S32、默认预览框位置靠原始图片右侧、底侧显示。

9.根据权利要求8所述的一种基于VUE的WEB图片预览系统，其特征在于，所述图片获取包括分别设置放大图和原始图片的图片路径，并在加载页面时提前获取静态资源。

10.根据权利要求9所述的一种基于VUE的WEB图片预览系统，其特征在于，所述插件传值包括设置以鼠标停留点为中心的小色块宽高、背景颜色、透明度以及预览框宽高。