vue 组件里面多个组件_Vue组件，用于多个图像比较

最新推荐文章于 2023-12-28 15:54:53 发布

cuk5239

最新推荐文章于 2023-12-28 15:54:53 发布

阅读量885

点赞数

文章标签： vue js python c# go ViewUI

原文链接：https://vuejsexamples.com/vue-component-for-multiple-image-comparison/

版权

vue 组件里面多个组件

视觉图像差异 (vue-image-diff)

vue component for multiple image comparison. currently supported only 8bit jpg and png format.

vue组件，用于多个图像比较。当前仅支持8位jpg和png格式。

Web-App: https://github.com/whwnsdlr1/image-diff jsfiddle1: https://jsfiddle.net/whwnsdlr1/xgz21e95/ jsfiddle2: https://jsfiddle.net/whwnsdlr1/84bkq2hy/

网络应用程序： https : //github.com/whwnsdlr1/image-diff jsfiddle1： https ://jsfiddle.net/whwnsdlr1/xgz21e95/ jsfiddle2： https ://jsfiddle.net/whwnsdlr1/84bkq2hy/

用法 (Usage)

如何包含组件 (how to include component)

in Vue Project

在Vue项目中

<template>
...
<vue-image-diff :data="data" :options="options" :options-tool-bar="optionsToolBar" />
...
</template>
<script>
import VueImageDiff from 'vue-image-diff'
export default {
  ...
  components: {
    'vue-image-diff': VueImageDiff
  }
  ...
}
</script>

in html

在HTML

<body>
<script src="vue.js"></script><!-- include vue.js first! -->
<script src="VueImageDiff.js"></script>
...
<vue-image-diff :data=data :options=options :options-tool-bar=optionsToolBar />
...
</body>

参数结构 (arguments structure)

data is array of object.

数据是对象的数组。

data = [
  {
    name: 'korea Mountains', // String: text to show overlay region
    blob: blob, // Blob: ImageBlob to show
    ext: 'jpg' // String: 'jpg' or 'png'
    params: {author: 'fxgsell'}, // Object, (optional): default value is {}. text to show overlay region
    id: id // String, (optional): default value is created by uuid4(). unique id 
  }
]

options is object

选项是对象

options = {
  coord: {
    x: 0, // Number, (optional): default value is 0. coordinate x
    y: 0 // Number, (optional): default value is 0. coordinate y
  },
  zoom: 1, // Number, (optional): default value is calculate by windows. zoom, scale value. 1 is original scale
  voi: {
    windowCenter: 127, // Number, (optional): default value is 127. range (0, 255]. adjust brightness
    windowWidth: 256 // Number, (optional): default value is 256. range (1, 256]. adjust contrast
  },
  predefinedImageSize: {
    width: undefined, // Number or undefined, (optional): default value in undefined. width to be resized. if not set, other images are resized based on the first image size.
    height: undefined // Number or undefined, (optional): default value in undefined. height to be resized. if not set, other images are resized based on the first image size.
  },
  diff: {
    activate: false, // Bool, (optional): default value is false. flag to show diff ovelary
    reference: {
      id: undefined, // String or undefined, (optional): default value is undefined. base image to diff. if not set, it is selected as the first image.
    },
    tolerance: 1, // Number, (optional): default value is 1. range [1, 441]. if difference value(Mean Square Error) is greater than or equal tolerance, pixel is set difference-tag. opposite, set same-tag less than tolerance. ![equation](http://latex.codecogs.com/png.latex?%5Csum_%7BP%7D%5E%7Bp%7D%28%5Csqrt%7B%28R_%7Bp1%7D-R_%7Bp2%7D%29%5E%7B2%7D%20&plus;%20%28G_%7Bp1%7D-G_%7Bp2%7D%29%5E%7B2%7D%20&plus;%20%28B_%7Bp1%7D-B_%7Bp2%7D%29%5E%7B2%7D%7D%29)
    opacity: 0.7, // Number, (optional): default value is 0.7. range (0, 1). opacity of diff overlay
    colors: {
      same: new Uint8ClampedArray([0, 0, 255]), // Array, (optional): default value is [0, 0, 255]. color rgb of same-tag pixel
      diff: new Uint8ClampedArray([255, 0, 0]) // Array, (optional): default value is [0, 0, 255]. color rgb of diff-tag pixel
    }
  },
  style: {
    borderWidth: 1, // Number, (optional): default value is [1, infty). border width between frames.
    borderColor: new Uint8ClampedArray([255, 0, 0]), // Array, (optional): default value is [255, 0, 0]. color rgb of border
    showOverlayText: true, // Bool, (optional): default value is true. flag to show overlay text
    frameRowCount: 3 // Number or undefined, (optional): default value is undefined. range [1, infty). frame row count. if not set, calcuate by data length.
  }
}

optionsToolBar is object

optionsToolBar是对象

optToolBar = {
  show: true, // Bool, (optional)
  pan: {
    show: true, // Bool, (optional)
    disabled: false // Bool, (optional)
  },
  zoom: {
    show: true, // Bool, (optional)
    disabled: false // Bool, (optional)
  },
  diff: {
    show: true, // Bool, (optional)
    ref: {
      show: true // Bool, (optional)
    },
    tolerance: {
      show: true // Bool, (optional)
    }
  }
}

功能 (functions)

open Control panel: openControlPanel()
打开控制面板：openControlPanel()

控制 (Control)

mouse & touch drag - panning
鼠标和触摸拖动-平移
mouse wheel & pinch to zoom - zoom in / out
鼠标滚轮并捏以缩放-放大/缩小
mouse doubleclick - change reference image for diff
鼠标双击-更改差异的参考图像

浏览器支持-(已测试) (Browser support - (tested))

Google Chrome 77+
谷歌浏览器77+
Google Chrome 77+ on Android 9+
Android 9以上版本的Google Chrome 77以上版本
Mozilla FireFox 68+
Mozilla FireFox 68+

项目设置 (Project setup)

建立 (Build)

build project as below

建立项目如下

git clone https://github.com/whwnsdlr1/vue-image-diff
cd vue-image-diff
yarn run build

翻译自: https://vuejsexamples.com/vue-component-for-multiple-image-comparison/

vue 组件里面多个组件

cuk5239

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue 组件里面多个组件_Vue组件，用于多个图像比较

vue 组件里面多个组件视觉图像差异 (vue-image-diff)vue component for multiple image comparison.currently supported only 8bit jpg and png format. vue组件，用于多个图像比较。当前仅支持8位jpg和png格式。 Web-App: https://github.com/wh...
复制链接

扫一扫