CN116340676A - 一种在网页浏览器中对比展示图片的方法 - Google Patents

一种在网页浏览器中对比展示图片的方法 Download PDF

Info

Publication number
CN116340676A
CN116340676A CN202310618600.3A CN202310618600A CN116340676A CN 116340676 A CN116340676 A CN 116340676A CN 202310618600 A CN202310618600 A CN 202310618600A CN 116340676 A CN116340676 A CN 116340676A
Authority
CN
China
Prior art keywords
picture
display
canvas
component
pictures
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN202310618600.3A
Other languages
English (en)
Other versions
CN116340676B (zh
Inventor
江慧宁
刘伟
唐光辉
龚琪慧
李金平
刘浩
肖维
肖文
梁云昊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Changjiang Xinda Software Technology Wuhan Co ltd
Original Assignee
Changjiang Xinda Software Technology Wuhan Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Changjiang Xinda Software Technology Wuhan Co ltd filed Critical Changjiang Xinda Software Technology Wuhan Co ltd
Priority to CN202310618600.3A priority Critical patent/CN116340676B/zh
Publication of CN116340676A publication Critical patent/CN116340676A/zh
Application granted granted Critical
Publication of CN116340676B publication Critical patent/CN116340676B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明公开了一种基于VUE2.6+canvas在网页浏览器中对比展示图片的方法。它包括如下步骤，步骤一：创建一个VUE 2.6项目，作为组件的运行环境；步骤二：运用VUE组件思维，基于canvas封装单图片展示组件，用支持查看、缩放、平移、旋转操作；步骤三：基于单图片展示组件，进一步封装对比展示图片组件，支持同步缩放、平移、旋转操作；步骤四：指定两张类似的图片用于对比展示。本发明克服了现有技术复用性较差、代码量较多、操作复杂的缺陷；具有能在网页浏览器中方便地查看图片细节以及同步对比查看两张图片，且操作便捷、代码简洁及复用性高的优点。

Description

一种在网页浏览器中对比展示图片的方法
技术领域
本发明涉及计算机技术领域，具体涉及一种在网页浏览器中对比展示图片的方法，更具体地说它是一种基于VUE 2.6 + canvas 在网页浏览器中对比展示图片的方法。
背景技术
随着信息网络与计算机技术的蓬勃发展，用户使用网页来浏览和处理图片的频率越来越高。然而，传统的网页展示图片的方法主要是通过img标签来实现，而这种方式存在一些缺陷，例如无法对图片进行编辑、无法动态展示等。现有Html+js+css技术通过img标签展示图片，一般情况下图片大小是固定的，且不支持拖动，无法实现查看图片细节以及同步对比查看并编辑两张图片。近年来，出现了一些基于canvas的图片编辑方法，支持在网页上进行图片裁剪、旋转、缩放等操作，并且具有动态展示图片的功能，但canvas技术的难度较高，需要开发者具备一定的编程知识储备和实践经验，对普通开发人员来说使用门槛比较高。且在传统开发技术路线（html+js+css）下，在进行前端开发时，都是编写一个html文档，如果多个页面都需要图片对比展示，则需要将该功能的html代码复制粘贴过去（html无法复用），故代码量较多，只能复用部分js和css代码，复用性差、操作复杂；因此，开发一种能在网页浏览器中方便地查看图片细节以及同步对比查看两张图片，操作便捷、代码简洁及复用性高的适用于网页浏览器图片编辑的方法很有必要。
发明内容
本发明的目的是为了克服背景技术的不足之处，而提供一种基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，能在网页浏览器中方便地查看图片细节以及同步对比查看两张图片，且具有操作便捷、代码简洁及复用性高等特点；本发明方法在canvas技术的基础上，结合VUE的组件化思维，在进一步优化了用户体验和可用性的同时，降低开发技术门槛、提升复用性。
为了实现上述目的，本发明的技术方案为：一种基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：包括如下步骤，
步骤一：创建一个VUE 2.6项目，作为组件的运行环境；
步骤二：运用VUE组件思维，基于canvas封装单图片展示组件，支持查看、缩放、平移、旋转等操作；
步骤三：基于单图片展示组件，进一步封装对比展示图片组件，支持同步缩放、平移、旋转等操作；
步骤四：指定两张类似的图片用于对比展示。
在上述技术方案中，在步骤一中，借助vue-cli脚手架，快速创建一个vue2.6项目。
在上述技术方案中，在步骤二中，基于canvas封装单图片展示组件，包括如下步骤：
S21，确定响应事件；
响应事件包括：
Mousewheel，该事件用于监控鼠标滚轮的上下滚动；
Mousedown，该事件用于监控鼠标的按下，在事件处理函数中，通过参数e.pageX和e.pageY，获取鼠标按下的位置，并分别记录到startX、startY中；
Mousemove，该事件用于监控鼠标的移动，通过参数e.pageX和e.pageY，结合mousedown事件中记录的startX、startY，计算图片在x方向偏移量、y方向偏移量；
S22，确定封装的属性；
封装的属性包括：
imgUrl，数据类型为String，用于业务层调用此组件时，指定显示的图片；
zoom，数据类型为Number，默认值1，用于存储当前的缩放级别；
rect，数据类型为Object，默认值为{x: 0,y: 0,width: 0,height: 0}，其值分别存储x方向偏移量、y方向偏移量、显示宽度、显示高度；
nowRotateStep，数据类型为Number，默认值为0，可选值为0、1、2、3，分别对应不旋转、向右旋转90度、向右旋转180度、向右旋转270度；
S23，确定封装方法；
封装方法，包括如下步骤：
1）定义一个方法rotateImg(direction)，向外界提供接口，用于支持图片的旋转，重新计算nowRotateStep；direction为String类型，可选值为left、right，其值为left时，计算方式为nowRotateStep = nowRotateStep - 1，否则计算方式为nowRotateStep =nowRotateStep + 1；
此外，当计算后nowRotateStep的值等于4时，应调整为0，当计算后nowRotateStep的值为-1时，应调整为3；
2）增加一个方法getImageRect()，用于计算图片在canvas中的原始显示区域；
如果图片长度或宽度大于可用显示区域，需要先将图片等比缩小，否则不变大小，再居中显示；后续步骤中，绘制图片时会以此大小、位置为基准再经缩放、位移；
设图片实际宽度、高度分别为imgWidth、imgHeight，可用显示区域宽度、高度分别为rectWidth、rectHeight，X方向和Y方向的大小比例分别为zoomx、zoomy，其计算方法为：zoomx=imgWidth/rectWidth、zoomy= imgHeight/rectHeight；
3）增加一个方法draw()，在canvas中重新绘制图片，当zoom|、rect、nowRotateStep等数据改变后进行调用；绘制图片的重点，是结合getImageRect()返回的图片原始显示区域、缩放级别、x方向偏移量、y方向偏移量、旋转角度等信息，计算出应该显示的大小、位置后，再调用canvas的2d上下文进行绘制；
4）在zoom、rect、nowRotateStep的值改变时，发射事件zoomAndOffsetChanged，用于通知业务层组件的缩放、平移、旋转的状态有改变，并将最新的值传递出去；
5）增加一个方法updateZoomAndOffsetByParent(zoom,x,y,route)，支持上层通过方法直接设置缩放、平移、旋转的状态。
在上述技术方案中，在步骤S21中，图片在x方向偏移量、y方向偏移量的位移计算方式如下：
Figure SMS_1
。
在上述技术方案中，在canvas中重新绘制图片，具体的实现过程为：
Ⅰ）获取2d上下文：const ctx = canvas.getContext('2d')；
Ⅱ）清除老的绘制结果：ctx.clearRect(0, 0, this.rect.width,this.rect.height)；
Ⅲ）计算图片原始区域：const rect = this.getImageRect()；
Ⅳ）进行放大：ctx.scale(this.zoom, this.zoom)；
Ⅴ）进行平移：ctx.translate(-this.rect.x / this.zoom, -this.rect.y /this.zoom)；
Ⅵ）输出图片：ctx.drawImage(this.img, rect.x, rect.y, rect.width,rect.height)。
在上述技术方案中，在步骤三中，封装对比展示图片组件，具体方法如下：
S31：基于单图片展示组件进一步封装对比展示图片组件，并通过css布局，将对比展示图片组件的可用区域分为左右相等的两部分，各放入一个单图片展示组件，设置引用名分别为ip1、ip2；
S32：定义属性imgUrl1、imgUrl2，类型为String，用于业务层调用此对比展示图片组件时，指定要对比显示的两张图片；
S33：响应ip1、ip2的事件zoomAndOffsetChanged，在事件处理函数中，一个对比展示图片组件的状态改变时，通过updateZoomAndOffsetByParent方法同步修改另外一个对比展示图片组件的状态并让其重新绘制。
在所述步骤四中，开发人员可在任意VUE项目复用该组件，即该组件何在任意VUE项目复用，使用时指定展示图片即可。
与传统的图片编辑工具相比，本发明的有益效果在于：
一是开发门槛低，普通开发人员也可以轻松地进行图片编辑操作、操作便捷；本发明的图片展示组件，支持对图片进行缩放、拖拽等操作，实现灵活的展示图片细节，能实现在网页浏览器中方便地查看图片细节以及同步对比查看并编辑两张图片；克服了现有技术通过img标签展示图片，一般情况下图片大小是固定的，且不支持拖动，无法实现查看图片细节以及同步对比查看并编辑两张图片的缺点；
二是高复用性，开发人员无需重复编写代码；本发明运用了VUE框架，结合VUE的组件化思维，将图片对比展示功能的代码（html，js，css）封装为一个vue组件，其他页面需要使用这个功能时，只需要注册并引用该VUE组件即可，通过此方式实现了代码复用，代码简洁及复用性高，操作便捷，便于维护；克服了现有传统方式下，在进行前端开发时，都是编写一个html文档，如果多个页面都需要图片对比展示，则需要将该功能的html代码复制粘贴过去，故代码量较多，只能复用部分js和css代码，复用性差、不好维护的缺陷；
三是支持动态展示图片的效果，使得用户可以直观地了解编辑后的效果；
四是操作友好，可用性高，用户只需要在网页上进行操作即可完成图片编辑，无需下载和安装任何软件；本发明使用的VUE、canvas等技术属于B/S技术路线，用户只需访问网页即可；克服了传统方式中的一些图片处理软件，如photoshop等，使用C/S技术路线，需要下载客户端使用，操作不友好，可用性差的缺陷。
附图说明
图1为本发明的技术流程示意图；
图2为本发明实施例1中展示单张图片并进行标注的应用图；
图3为本发明实施例1中同比例展示原图和标注后原图进行对比的应用图；
图4为本发明实施例1中同步展示不同时段的多张图片进行对比的应用图；
图5为本发明实施例2中同步展示不同时段的多张图片、且选中某时段的原图与标记后的原图进行对比的应用图。
实施方式
下面结合附图详细说明本发明的实施情况，但它们并不构成对本发明的限定，仅作举例而已。同时通过说明使本发明的优点更加清楚和容易理解。
参阅附图可知：如图1所示，本发明提供了一种基于VUE 2.6 + canvas 在网页浏览器中对比展示图片的方法，包括如下步骤：
S1：创建一个VUE2.6项目，作为组件的运行环境；组件的定义是实现应用中局部功能代码（html，css，js）和资源的集合，其优势是能复用编码，简化项目代码，提高运行效率，降低程序员重复编码；本发明中的组件指实现图片对比展示功能的代码集合；
S2：运用VUE组件思维，基于canvas封装单图片展示组件，用支持查看、缩放、平移、旋转等操作；
S3：基于单图片展示组件，进一步封装对比展示图片组件（本步骤的封装方法同步骤S2的封装方法），支持同步缩放、平移、旋转等操作；
S4：指定两张类似的图片用于对比展示。
需要进一步说明的是，在所述步骤S1中，可以借助vue-cli脚手架，快速创建一个vue2.6项目。
在所述步骤S2中，包括如下步骤：
S21，基于canvas封装单图片展示组件，需要响应事件如下：
表1 响应事件
Figure SMS_2
需要说明的是，图片在x方向偏移量、y方向偏移量的位移计算方式如下：
Figure SMS_3
；S22，需要封装的属性如下：
表2 单图片组件封装属性
Figure SMS_4
；23，需要封装的属性如下：
1）定义一个方法rotateImg(direction)，向外界提供接口，用于支持图片的旋转，重新计算nowRotateStep。direction为String类型，可选值为left、right，其值为left时，计算方式为nowRotateStep = nowRotateStep - 1，否则计算方式为nowRotateStep =nowRotateStep + 1；此外，当计算后nowRotateStep的值等于4时，应调整为0，当计算后nowRotateStep的值为-1时，应调整为3；
2）增加一个方法getImageRect()，用于计算图片在canvas中的原始显示区域。如果图片长度或宽度大于可用显示区域，需要先将图片等比缩小，否则不变大小，再居中显示。后续步骤中，绘制图片时会以此大小、位置为基准再经缩放、位移。设图片实际宽度、高度分别为imgWidth、imgHeight，可用显示区域宽度、高度分别为rectWidth、rectHeight，X方向和Y方向的大小比例分别为zoomx、zoomy，其计算方法为：zoomx = imgWidth /rectWidth、zoomy = imgHeight / rectHeight。设原始显示区域为rect，则计算代码如下：
if (zoomx>1 || zoomy>1) {
if (zoomx>zoomy) {
imgWidth = rectWidth
imgHeight /= zoomx
} else {
imgHeight = rectHeight
imgWidth /= zoomy
}
}
return {
x: (rectWidth - imgWidth) / 2,
y: (rectHeight - imgHeight) / 2,
width: imgWidth,
height: imgHeight
}
3）增加一个方法draw()，在canvas中重新绘制图片，当zoom|、rect、nowRotateStep等数据改变后进行调用。绘制图片的重点，是结合getImageRect()返回的图片原始显示区域、缩放级别、x方向偏移量、y方向偏移量、旋转角度等信息，计算出应该显示的大小、位置后，再调用canvas的2d上下文进行绘制。具体的实现过程为：
Ⅰ）获取2d上下文：const ctx = canvas.getContext('2d')；
Ⅱ）清除老的绘制结果：ctx.clearRect(0, 0, this.rect.width,this.rect.height)；
Ⅲ）计算图片原始区域：const rect = this.getImageRect()；
Ⅳ）进行放大：ctx.scale(this.zoom, this.zoom)；
Ⅴ）进行平移：ctx.translate(-this.rect.x / this.zoom, -this.rect.y /this.zoom)；
Ⅵ）输出图片：ctx.drawImage(this.img, rect.x, rect.y, rect.width,rect.height)；
4）在zoom、rect、nowRotateStep的值改变时，发射事件zoomAndOffsetChanged，用于通知业务层组件的缩放、平移、旋转的状态有改变，并将最新的值传递出去；
5）增加一个方法updateZoomAndOffsetByParent(zoom, x, y, route)，支持上层通过方法直接设置缩放、平移、旋转的状态；
在所述步骤S3中，包括以下步骤：
S31：基于单图片展示组件进一步封装对比展示图片组件，并通过css布局，将对比展示图片组件的可用区域分为左右相等的两部分，各放入一个单图片展示组件，设置引用名分别为ip1、ip2；
S32：定义属性imgUrl1、imgUrl2，类型为String，用于业务层调用此对比展示图片组件时，指定要对比显示的两张图片；
S33：响应ip1、ip2的事件zoomAndOffsetChanged，在事件处理函数中，一个对比展示图片组件的状态改变时，通过updateZoomAndOffsetByParent方法同步修改另外一个对比展示图片组件的状态并让其重新绘制。
在所述步骤S4中，开发人员可在任意VUE项目复用该组件。
实施例：现以本发明分别试用于某河道进行采砂监控、某工地报警监控为实施例对本发明进行详细说明，对本发明应用于其他区域进行监控和报警等同样具有指导作用。
实施例1：本实施例将本发明应用于某河道进行采砂监控
本实施例中，某河道上有大量的运输船只运行，但有少量船只混入其中进行违规违法操作（如采砂船，当存在短期停留和/或存在疑似采砂装备的船只即判定为疑似采砂船），现有技术监控中采用的是Html+js+css技术进行图片展示，图片大小是固定的，且不支持拖动，无法实现查看图片细节，导致图片上标记出的疑似似违规违法船只误差较大、且导致图片上标记出的疑似违规违法船只轮廓的误差较大，标记精度低；且在多个页面都需要图片对比展示，则需要将该功能的html代码复制粘贴过去（html无法复用），故代码量较多、操作复杂，耗工耗时，无法及时展示监控（识别）结果。
本实施例采用本发明方法进行图片展示，具体方法包括：
S1：创建一个VUE2.6项目，作为组件的运行环境；
S2：运用VUE组件思维，基于canvas封装单图片展示组件，用支持查看、缩放、平移、旋转等操作；
S21，基于canvas封装单图片展示组件，需要响应事件如表1所示的响应事件；
需要说明的是，图片在x方向偏移量、y方向偏移量的位移计算方式如下：
Figure SMS_5
；S22，需要封装的属性如表2所示的单图片组件封装属性；
S23，需要封装的属性如下：
1）定义一个方法rotateImg(direction)，向外界提供接口，用于支持图片的旋转，重新计算nowRotateStep。direction为String类型，可选值为left、right，其值为left时，计算方式为nowRotateStep = nowRotateStep - 1，否则计算方式为nowRotateStep =nowRotateStep + 1；此外，当计算后nowRotateStep的值等于4时，应调整为0，当计算后nowRotateStep的值为-1时，应调整为3；
2）增加一个方法getImageRect()，用于计算图片在canvas中的原始显示区域。如果图片长度或宽度大于可用显示区域，需要先将图片等比缩小，否则不变大小，再居中显示。后续步骤中，绘制图片时会以此大小、位置为基准再经缩放、位移。设图片实际宽度、高度分别为imgWidth、imgHeight，可用显示区域宽度、高度分别为rectWidth、rectHeight，X方向和Y方向的大小比例分别为zoomx、zoomy，其计算方法为：zoomx = imgWidth /rectWidth、zoomy = imgHeight / rectHeight；
3）增加一个方法draw()，在canvas中重新绘制图片，当zoom|、rect、nowRotateStep等数据改变后进行调用。绘制图片的重点，是结合getImageRect()返回的图片原始显示区域、缩放级别、x方向偏移量、y方向偏移量、旋转角度等信息，计算出应该显示的大小、位置后，再调用canvas的2d上下文进行绘制。具体的实现过程为：
Ⅰ）获取2d上下文：const ctx = canvas.getContext('2d')；
Ⅱ）清除老的绘制结果：ctx.clearRect(0, 0, this.rect.width,this.rect.height)；
Ⅲ）计算图片原始区域：const rect = this.getImageRect()；
Ⅳ）进行放大：ctx.scale(this.zoom, this.zoom)；
Ⅴ）进行平移：ctx.translate(-this.rect.x / this.zoom, -this.rect.y /this.zoom)；
Ⅵ）输出图片：ctx.drawImage(this.img, rect.x, rect.y, rect.width,rect.height)；
4）在zoom、rect、nowRotateStep的值改变时，发射事件zoomAndOffsetChanged，用于通知业务层组件的缩放、平移、旋转的状态有改变，并将最新的值传递出去；
5）增加一个方法updateZoomAndOffsetByParent(zoom, x, y, route)，支持上层通过方法直接设置缩放、平移、旋转的状态；
S3：基于单图片展示组件，进一步封装对比展示图片组件，支持同步缩放、平移、旋转等操作；
S31：基于单图片展示组件进一步封装对比展示图片组件，并通过css布局，将对比展示图片组件的可用区域分为左右相等的两部分，各放入一个单图片展示组件，设置引用名分别为ip1、ip2；
S32：定义属性imgUrl1、imgUrl2，类型为String，用于业务层调用此对比展示图片组件时，指定要对比显示的两张图片；
S33：响应ip1、ip2的事件zoomAndOffsetChanged，在事件处理函数中，一个对比展示图片组件的状态改变时，通过updateZoomAndOffsetByParent方法同步修改另外一个对比展示图片组件的状态并让其重新绘制；
S4：指定两张类似的图片用于对比展示，展示结果分别如图2、图3和图4所示；
如图2所示，图2为使用单图片组件展示摄像头抓拍的图片，本发明可通过鼠标拖拽实现图片的平移、通过图片上的旋转按钮实现图片的旋转、通过鼠标滚轮实现图片的缩放，查看图片细节，可实现精准地在图片中标记（如图2中的正方形灰色框线处所示）存在疑似违规违法现象的采砂船；
如图3所示，图3使用对比展示组件展示视频中的原始图片（如图3的左图所示）和原图片标注后的图片（如图3的右图所示，本发明采用多边形标注线精准地标注出了疑似违规违法船只），可以对图3左图和右图进行同步平移、旋转、缩放查看图片细节，比较原图片与原图片标注后的图片，分析结果，展示视频报警分析结果。从图3可以看出，正常行驶的船只两侧的船只均为疑似采砂船，如图3中右图的A、B框线所示，图3中，A框线和B框线内精准地标注了疑似采砂船的轮廓线；
如图4，可以多次复用单图片组件，通过遍历展示对比同一区域不同时间的图片；
从图2和图3可以看出，本实施例某河道上不同的时间点出现的采砂船数目不同。从图2、图3和图4可以看出，经过本发明连续实现多张图片的同步展示、同步进行缩放、平移、旋转操作，可以精准地标记、识别出所有的疑似采砂船，能及时展示监控识别结果；克服了现有Html+js+css技术，无法实现查看图片细节，导致图片上标记、监控识别误差较大，精度低的问题。
为了能够更加清楚的说明本发明所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法与现有的Html+js+css技术相比所具有的优点，工作人员将这两种技术方案进行了对比，其对比结果如下表3所示：
表3 对比结果
Figure SMS_6
；由上表可知，本发明所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法与现有的Html+js+css技术相比，可以实现单张图片展示以及对比展示两个及更多图片，能对单张图片进行缩放、旋转、编辑等操作，能支持同比旋转、缩放以对比图片细节，并具有高复用性，操作简便。
实施例2：本实施例将本发明应用于某工地报警监控
本实施例中，某工地不允许人员逗留，当监控识别出人员逗留时会报警。现有技术采用canvas技术展示图片，其支持在网页上进行图片裁剪、旋转、缩放等操作，并且具有动态展示图片的功能，但其只适用于单张图片的展示，也无法同步对比查看并编辑两张图片，不具备复用性，无法连续实现多张图片的同步展示、同步进行缩放、平移、旋转操作，无法及时实现报警监控结果。
本实施例采用本发明方法进行图片展示的方法同实施例1。本实施例采用本发明的展示结果分别如图5所示。图5中图展示的是某时段监控对象原始图片（如图5左上图所示）、某时段标注后的监控对象原始图片（如图5右上图所示）以及监控对象不同时段的多张图片。图5使用对比展示组件展示视频中的原始图片（如图5的左图所示）和原图片标注后的图片（如图5的右图所示，本发明采用多边形标注线精准地标注出了疑似违规违法人员），可以对图5左图和右图进行同步平移、旋转、缩放查看图片细节，比较原图片与原图片标注后的图片，分析结果，展示视频报警分析结果；从图5可以看出，本实施例某工地出现的疑似人员已通过框线框出，且框线内精准地标注了疑似人员的轮廓线。从图5可以看出，本实施例采用本发明方法复用性好，能同时展示多张图片，能同步对比查看并编辑两张图片，能连续实现多张图片的同步展示、同步进行缩放、平移、旋转操作，及时且精准地实现报警监控结果。
其它未说明的部分均属于现有技术。

Claims (6)

1.一种基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：包括如下步骤，
步骤一：创建一个VUE 2.6项目，作为组件的运行环境；
步骤二：运用VUE组件思维，基于canvas封装单图片展示组件，支持查看、缩放、平移、旋转操作；
步骤三：基于单图片展示组件，进一步封装对比展示图片组件，支持同步缩放、平移、旋转操作；
步骤四：指定两张类似的图片用于对比展示。
2.根据权利要求1所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：在步骤一中，借助vue-cli脚手架，快速创建一个vue2.6项目。
3.根据权利要求1或2所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：在步骤二中，基于canvas封装单图片展示组件，包括如下步骤：
S21，确定响应事件；
响应事件包括：
Mousewheel，该事件用于监控鼠标滚轮的上下滚动；
Mousedown，该事件用于监控鼠标的按下，在事件处理函数中，通过参数e.pageX和e.pageY，获取鼠标按下的位置，并分别记录到startX、startY中；
Mousemove，该事件用于监控鼠标的移动，通过参数e.pageX和e.pageY，结合mousedown事件中记录的startX、startY，计算图片在x方向偏移量、y方向偏移量；
S22，确定封装的属性；
封装的属性包括：
imgUrl，数据类型为String，用于业务层调用此组件时，指定显示的图片；
zoom，数据类型为Number，默认值1，用于存储当前的缩放级别；
rect，数据类型为Object，默认值为{x: 0,y: 0,width: 0,height: 0}，其值分别存储x方向偏移量、y方向偏移量、显示宽度、显示高度；
nowRotateStep，数据类型为Number，默认值为0，选值为0、1、2、3，分别对应不旋转、向右旋转90度、向右旋转180度、向右旋转270度；
S23，确定封装方法；
封装方法，包括如下步骤：
（1）定义一个方法rotateImg(direction)，向外界提供接口，用于支持图片的旋转，重新计算nowRotateStep；direction为String类型，选值为left、right，其值为left时，计算方式为nowRotateStep=nowRotateStep -1，否则计算方式为nowRotateStep=nowRotateStep+1；
此外，当计算后nowRotateStep的值等于4时，调整为0，当计算后nowRotateStep的值为-1时，调整为3；
（2）增加一个方法getImageRect()，用于计算图片在canvas中的原始显示区域；
如果图片长度或宽度大于可用显示区域，先将图片等比缩小，否则不变大小，再居中显示；后续步骤中，绘制图片时以此大小、位置为基准再经缩放、位移；
设图片实际宽度、高度分别为imgWidth、imgHeight，可用显示区域宽度、高度分别为rectWidth、rectHeight，X方向和Y方向的大小比例分别为zoomx、zoomy，其计算方法为：zoomx=imgWidth/rectWidth、zoomy= imgHeight/rectHeight；
（3）增加一个方法draw()，在canvas中重新绘制图片，当zoom|、rect、nowRotateStep数据改变后进行调用；绘制图片是结合getImageRect()返回的图片原始显示区域、缩放级别、x方向偏移量、y方向偏移量、旋转角度信息，计算出应该显示的大小、位置后，再调用canvas的2d上下文进行绘制；
（4）在zoom、rect、nowRotateStep的值改变时，发射事件zoomAndOffsetChanged，用于通知业务层组件的缩放、平移、旋转的状态有改变，并将最新的值传递出去；
（5）增加一个方法updateZoomAndOffsetByParent(zoom,x,y,route)，支持上层通过此增加的方法直接设置缩放、平移、旋转的状态。
4.根据权利要求3所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：在步骤S21中，图片在x方向偏移量、y方向偏移量的位移计算方式如下：
Figure QLYQS_1
。
5.根据权利要求4所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：在canvas中重新绘制图片，具体的实现过程为：
（Ⅰ）获取2d上下文：const ctx = canvas.getContext('2d')；
（Ⅱ）清除上一次的绘制结果：ctx.clearRect(0, 0, this.rect.width,this.rect.height)；
（Ⅲ）计算图片原始区域：const rect = this.getImageRect()；
（Ⅳ）进行放大：ctx.scale(this.zoom, this.zoom)；
（Ⅴ）进行平移：ctx.translate(-this.rect.x / this.zoom, -this.rect.y /this.zoom)；
（Ⅵ）输出图片：ctx.drawImage(this.img, rect.x, rect.y, rect.width,rect.height)。
6.根据权利要求5所述的基于VUE2.6+canvas在网页浏览器中对比展示图片的方法，其特征在于：在步骤三中，封装对比展示图片组件，具体方法如下：
S31：基于单图片展示组件进一步封装对比展示图片组件，并通过css布局，将对比展示图片组件的可用区域分为左右相等的两部分，各放入一个单图片展示组件，设置引用名分别为ip1、ip2；
S32：定义属性imgUrl1、imgUrl2，类型为String，用于业务层调用此对比展示图片组件时，指定要对比显示的两张图片；
S33：响应ip1、ip2的事件zoomAndOffsetChanged，在事件处理函数中，一个对比展示图片组件的状态改变时，通过updateZoomAndOffsetByParent方法同步修改另外一个对比展示图片组件的状态并让其重新绘制。
CN202310618600.3A 2023-05-30 2023-05-30 一种在网页浏览器中对比展示图片的方法 Active CN116340676B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310618600.3A CN116340676B (zh) 2023-05-30 2023-05-30 一种在网页浏览器中对比展示图片的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310618600.3A CN116340676B (zh) 2023-05-30 2023-05-30 一种在网页浏览器中对比展示图片的方法

Publications (2)

Publication Number Publication Date
CN116340676A true CN116340676A (zh) 2023-06-27
CN116340676B CN116340676B (zh) 2023-08-04

Family

ID=86876304

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310618600.3A Active CN116340676B (zh) 2023-05-30 2023-05-30 一种在网页浏览器中对比展示图片的方法

Country Status (1)

Country Link
CN (1) CN116340676B (zh)

Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020054115A1 (en) * 2000-06-12 2002-05-09 Mack Stephen T. System for creating on a computer display screen composite images from diverse sources
CN103955469A (zh) * 2014-03-28 2014-07-30 北京奇虎科技有限公司 一种浏览器中进行页面缩放的方法和装置
US20180113604A1 (en) * 2016-10-23 2018-04-26 Oracle International Corporation Visualizations supporting unlimited rows and columns
CN111753227A (zh) * 2019-03-26 2020-10-09 北京宸信征信有限公司 一种基于异步加载数据信息的屏幕展示系统和方法
CN112445991A (zh) * 2020-12-14 2021-03-05 南京中孚信息技术有限公司 一种基于vue的web图片预览方法及系统
CN115061680A (zh) * 2022-05-31 2022-09-16 珠海高凌信息科技股份有限公司 一种基于ECharts地图组件实现自定义展示面板的方法
CN115576547A (zh) * 2022-06-28 2023-01-06 浪潮云信息技术股份公司 基于Vue和Canvas的分屏合屏实现方法及系统
CN115878935A (zh) * 2023-01-29 2023-03-31 北京全路通信信号研究设计院集团有限公司 一种图表的局部刷新方法、系统、装置、设备及介质
CN115964591A (zh) * 2023-02-13 2023-04-14 南京中孚信息技术有限公司 页面多屏展示方法、装置、设备及存储介质

Patent Citations (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20020054115A1 (en) * 2000-06-12 2002-05-09 Mack Stephen T. System for creating on a computer display screen composite images from diverse sources
CN103955469A (zh) * 2014-03-28 2014-07-30 北京奇虎科技有限公司 一种浏览器中进行页面缩放的方法和装置
US20180113604A1 (en) * 2016-10-23 2018-04-26 Oracle International Corporation Visualizations supporting unlimited rows and columns
CN111753227A (zh) * 2019-03-26 2020-10-09 北京宸信征信有限公司 一种基于异步加载数据信息的屏幕展示系统和方法
CN112445991A (zh) * 2020-12-14 2021-03-05 南京中孚信息技术有限公司 一种基于vue的web图片预览方法及系统
CN115061680A (zh) * 2022-05-31 2022-09-16 珠海高凌信息科技股份有限公司 一种基于ECharts地图组件实现自定义展示面板的方法
CN115576547A (zh) * 2022-06-28 2023-01-06 浪潮云信息技术股份公司 基于Vue和Canvas的分屏合屏实现方法及系统
CN115878935A (zh) * 2023-01-29 2023-03-31 北京全路通信信号研究设计院集团有限公司 一种图表的局部刷新方法、系统、装置、设备及介质
CN115964591A (zh) * 2023-02-13 2023-04-14 南京中孚信息技术有限公司 页面多屏展示方法、装置、设备及存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
吴键成;周旭宇;陈怡芯;: "类MVVM架构应用于在线教学平台的设计与实现", 电脑知识与技术, no. 05 *

Also Published As

Publication number Publication date
CN116340676B (zh) 2023-08-04

Similar Documents

Publication Publication Date Title
US8711147B2 (en) Method and system for generating and displaying an interactive dynamic graph view of multiply connected objects
CN111241454B (zh) 一种生成网页代码的方法、系统和装置
US8112705B2 (en) Magnifying the text of a link while still retaining browser function in the magnified display
US8194075B2 (en) Method and system for generating and displaying an interactive dynamic list view of multiply connected objects
US8370750B2 (en) Technology for generating service program
CN113095995B (zh) 网页水印添加方法、装置、电子设备及存储介质
US8711148B2 (en) Method and system for generating and displaying an interactive dynamic selective view of multiply connected objects
US20080256468A1 (en) Method and apparatus for displaying a user interface on multiple devices simultaneously
US20110307828A1 (en) Memory allocation visualization for unmanaged languages
US20030179231A1 (en) Method for browsing virtual three-dimensional information, computer program and storage medium
WO2013184423A1 (en) Managing objects in panorama display to navigate spreadsheet
CN112272109A (zh) 一种网络拓扑图生成方法、设备及系统
CN111651966A (zh) 数据报告文件生成方法、装置与电子设备
US20150019977A1 (en) Object selection in web page authoring
CN115878935B (zh) 一种图表的局部刷新方法、系统、装置、设备及介质
CA2714228C (en) Complex input to image transformation for distribution
CN116245052A (zh) 一种图纸迁移方法、装置、设备和存储介质
CN115061680A (zh) 一种基于ECharts地图组件实现自定义展示面板的方法
KR20090096698A (ko) 그래픽 이미지를 조작하기 위한 방법 및 장치
CN116340676B (zh) 一种在网页浏览器中对比展示图片的方法
CN110162301A (zh) 一种表单渲染方法、装置和存储介质
KR102039422B1 (ko) 이미지 자동 처리 장치 및 방법
CN113672143B (zh) 图像标注方法、系统、设备和存储介质
US20030154462A1 (en) Software maintenance material generation apparatus and generation program therefor
CN113821278B (zh) 调用图像尺寸方法、装置、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant