Skip to content

Commit 47617f8

Browse files
codingfishmancodingfishman
committed
初始化工程
0 parents  commit 47617f8

18 files changed

+2037
-0
lines changed

‎.eslintrc.js

Lines changed: 246 additions & 0 deletions
Large diffs are not rendered by default.

‎.gitignore

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
web/build/.module-cache/
2+
tmp.txt
3+
.*.swp
4+
._*
5+
.DS_Store
6+
.git
7+
.hg
8+
.lock-wscript
9+
.svn
10+
.wafpickle-*
11+
CVS
12+
npm-debug.log
13+
logs
14+
*.log
15+
coverage
16+
.grunt
17+
build/Release
18+
node_modules
19+
.lock-wscript
20+
temp
21+
dist

‎help.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
## 简介
2+
开发-视觉稿对比工具是一个用于比对视觉设计稿和实现后的网页差异的小工具，基于两张图片像素级别的不同，进行差异区域的着色，方便视觉的验收和前端同学自己的视觉稿比对。
3+
4+
## 查看示例
5+
刚进入到对比小工具后，在左下角有一个“查看示例”的可点击文字，通过它可以直观地看到小工具的使用效果。
6+
7+
## 颜色区分 New~
8+
对比后的图片，对视觉稿和开发稿进行了颜色区分，目前，视觉稿的不同点用`蓝色`，而开发稿的不同点用`红色`来标记
9+
10+
## 使用小帮助
11+
#### 选择对比区域
12+
通过默认的示例，或者自己上传的素材图片，可以看到图片区域周围有一条蓝色的边框，其实这整个区域都是可已通过拖拽来选择的。
13+
14+
> 每次对比实际上都是对选择区域的对比，如果两个选择区域的大小不一致，比对工具会将两侧的区域都进行相应缩放，使其一致。
15+
16+
============此处有图片=====
17+
18+
#### 移动素材图片
19+
有时候，我们不只是想要在已有的图片上进行区域选择，我们也会需要移动背景图片。通过在**非图片**的透明区域内`双击`, 我们即可拖动背景图片，再次双击，又会变成“选择对比区域”
20+
21+
#### 辅助基准线
22+
在小工具的顶端，有一条蓝色的线（实际上是3条），可以通过鼠标拖动到图片区域，方便选择区域时作为基准辅助线。
23+
24+
#### 放大和缩小图片
25+
对上传后的图片可以进行放大和缩小，工具本身提供了两个按钮来对实际图片进行缩放。同时也提供了“重置图片”的按钮来方便将图片还原到初始状态。
26+
27+
#### 放大整个选择细节
28+
我们可能并不是想放大图片，而只是想放大我们的“操作细节”，比如将整个页面放大。此时，我们做了一件“偷懒”的事情，那就是直接放大浏览器页面。通过mac的触摸板，双指放大当前页面，即可放大我们的“操作细节”，方便选择区域。如果是Windows可能取决于电脑的支持。
29+
30+
#### 对比多张图片
31+
对比小工具也支持同时上传多张图片，通过`command/shift` + `鼠标` 来直接选择多张图片，此时对比区域的底部会列举出所有已上传的图片，并高亮出当前正在比对的图片。每次比对，都只对当前高亮的图片进行比对。
32+
33+
## Chrome网页截图插件
34+
Chrome有一个很方便的网页截图插件，推荐安装。插件可[点此安装](https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj?utm_source=plus)。

‎index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>视觉对比小工具</title>
5+
<meta charset="UTF-8" />
6+
<!-- <link rel="icon" type="image/png" href="/favico.png"> -->
7+
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
8+
9+
<style type="text/css">
10+
#root {
11+
width: 100%;
12+
max-width: 1200px;
13+
overflow: auto;
14+
margin: 0 auto;
15+
}
16+
17+
html, body {
18+
height: 100%;
19+
width: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="root"></div>
25+
</body>

‎package.json

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
{
2+
"name": "ImageDiff",
3+
"version": "0.0.1",
4+
"description": "通过JS对不同图片进行diff比较.",
5+
"dependencies": {
6+
"cropperjs": "^0.8.1",
7+
"less": "^2.7.1",
8+
"less-loader": "^2.2.3",
9+
"react": "^15.4.0",
10+
"react-cropper": "^0.9.4",
11+
"react-dom": "^15.4.0",
12+
"react-tap-event-plugin": "^1.0.0",
13+
"style-loader": "^0.13.1"
14+
},
15+
"devDependencies": {
16+
"autoprefixer": "^6.4.1",
17+
"babel-core": "^6.14.0",
18+
"babel-eslint": "^7.0.0",
19+
"babel-loader": "^6.2.5",
20+
"babel-plugin-import": "^1.0.0",
21+
"babel-plugin-transform-runtime": "^6.15.0",
22+
"babel-polyfill": "^6.13.0",
23+
"babel-preset-es2015": "^6.13.2",
24+
"babel-preset-react": "^6.11.1",
25+
"babel-preset-stage-0": "^6.5.0",
26+
"babel-register": "^6.11.6",
27+
"babel-runtime": "^6.11.6",
28+
"css-loader": "^0.23.1",
29+
"eslint": "^3.5.0",
30+
"extract-text-webpack-plugin": "^1.0.1",
31+
"file-loader": "^0.9.0",
32+
"html-webpack-plugin": "^2.24.1",
33+
"imports-loader": "^0.6.5",
34+
"postcss-loader": "^0.13.0",
35+
"svg-inline-loader": "^0.7.1",
36+
"url-loader": "^0.5.7",
37+
"webpack": "^1.12.9"
38+
},
39+
"scripts": {
40+
"build": "set NODE_ENV=production && webpack --config webpack.config.js --process --colors",
41+
"watch": "set NODE_ENV=test && webpack --config webpack.config.js --process --colors --watch"
42+
},
43+
"repository": {
44+
"type": "git",
45+
"url": "https://github.com/codingfishman/image-diff"
46+
},
47+
"author": "[email protected]",
48+
"license": "MIT"
49+
}

‎readme.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
## 图片对比小工具
2+
小工具用于比对两张图片的差异，在开发人员开发好一个页面后，需要交于视觉验收以前进行自己验证将会比较有效，同时视觉也可以用其来进行验收。
3+
4+
图片比对使用的是[Resemble.js](https://github.com/HuddleEng/Resemble.js)， 纯依赖浏览器。但是对其进行了小改，以实现在视觉对比时，用不同的颜色来区分不同的图片，比如蓝色为视觉稿，红色为开发稿。

‎src/assets/demo-changed.png

305 KB
Loading

‎src/assets/demo.png

324 KB
Loading

‎src/component/compare-line.jsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/*
2+
* 创建对比线的组件
3+
*
4+
*/
5+
6+
import React, { PropTypes } from 'react';
7+
import ReactDOM from 'react-dom';
8+
import CommonStyle from '../style/common.less';
9+
import Style from './compare-line.less';
10+
11+
class CompareLine extends React.Component {
12+
constructor () {
13+
super ();
14+
this.state = {
15+
dragBarTop: ''
16+
};
17+
18+
this.onDragbarMoveUp = this.onDragbarMoveUp.bind(this);
19+
this.onDragbarMove = this.onDragbarMove.bind(this);
20+
this.onDragbarMoveDown = this.onDragbarMoveDown.bind(this);
21+
}
22+
23+
static propTypes = {
24+
25+
}
26+
27+
onDragbarMove(event) {
28+
this.setState({
29+
dragBarTop: event.pageY
30+
});
31+
}
32+
33+
onDragbarMoveUp(event) {
34+
console.info(`event`,event);
35+
this.setState({
36+
contentLeft: event.pageX
37+
});
38+
39+
document.removeEventListener('mousemove', this.onDragbarMove);
40+
document.removeEventListener('mouseup', this.onDragbarMoveUp);
41+
}
42+
43+
onDragbarMoveDown(event) {
44+
document.addEventListener('mousemove', this.onDragbarMove);
45+
46+
document.addEventListener('mouseup', this.onDragbarMoveUp);
47+
}
48+
49+
render () {
50+
51+
const dragBarStyle = {
52+
top: this.state.dragBarTop
53+
};
54+
55+
return (
56+
<div
57+
className={Style.dragBar}
58+
style={dragBarStyle}
59+
onMouseDown={this.onDragbarMoveDown}
60+
>
61+
<div className={Style.line} />
62+
</div>
63+
);
64+
}
65+
}
66+
67+
export default CompareLine;

‎src/component/compare-line.less

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import '../style/constant.less';
2+
.dragBar {
3+
position: absolute;
4+
left: 0;
5+
top: 0;
6+
right: 0;
7+
height: 10px;
8+
opacity: 0.5;
9+
z-index: 2000;
10+
cursor: row-resize;
11+
border-left: 10px solid @primary-color;
12+
border-right: 10px solid @primary-color;
13+
&:hover {
14+
opacity: 0.87;
15+
}
16+
}
17+
18+
.line {
19+
position: relative;
20+
width: 100;
21+
height: 2px;
22+
margin-top: 4px;
23+
background-color: @primary-color;
24+
}

0 commit comments

Comments
 (0)