add screenshot

Author: usecodelee

.browserslistrc

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 leechaojiang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

.eslintrc.js

@@ -1,17 +1,76 @@
-# Vue-jigsawPuzzle
+# JavaScript-screenshot  
 
-Jigsaw puzzle based on Vue  
-基于Vue的拼图小游戏  
-  
-带有打乱时很炫酷的动画  
-![example](https://github.com/usecodelee/Vue-jigsawPuzzle/blob/master/img/20190327.gif) 
+[![star this repo](http://githubbadges.com/star.svg?user=usecodelee&repo=JavaScript-screenshot&style=default)](https://github.com/usecodelee/JavaScript-screenshot)[![fork this repo](http://githubbadges.com/fork.svg?user=usecodelee&repo=JavaScript-screenshot&style=default)](https://github.com/usecodelee/JavaScript-screenshot/fork) [![npm](https://img.shields.io/npm/v/js_screen_shots.svg)](https://www.npmjs.com/package/js_screen_shots) [![languages](https://img.shields.io/badge/javascript-81.4%25-green.svg)](https://github.com/usecodelee/JavaScript-screenshot) [![node](https://img.shields.io/badge/node-%3E1.0.0-green.svg)](https://github.com/usecodelee/JavaScript-screenshot) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
 
-## 增加自动拼图功能
+[中文](https://github.com/usecodelee/JavaScript-screenshot/blob/master/README_zh.md) 
 
-## 增加自动重新打乱开始功能
+## Introduction
 
-## 使用：
+JavaScript implementation screenshot,There are two libraries used:
 
-1. npm install
+> [Html2Canvas.js](https://github.com/niklasvh/html2canvas)  
+> [Canvas2Image.js](https://github.com/SuperAL/canvas2image)
 
-2. npm run serve
+I mainly made two demos and one NPM package:
+
+1. [Simple Version](https://github.com/usecodelee/JavaScript-screenshot/tree/master/simple)
+2. [Webpack+Vue+Element Version](https://github.com/usecodelee/JavaScript-screenshot/tree/master/simple)
+3. [js-screenshot-for-npm](https://github.com/usecodelee/JavaScript-screenshot/tree/master/js-screenshot-for-npm)
+
+## Simple Version Of Use 
+
+> Open `index.html` directly in your browser.
+
+## Webpack+Vue+Element Version Of Use
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+
+# build for production and view the bundle analyzer report
+npm run build --report
+```
+
+### Example 
+
+> **The original html is like this：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/1%E4%B8%8A.png" width="400" hegiht="500" align=center style="border:2px #ccc dashed;"/>
+
+> **This is the element node：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/1%E4%B8%8B.jpg" width="400" hegiht="500" align=center />
+
+> **This is after converting to canvas：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/2%E4%B8%8A.jpg" width="400" hegiht="500" align=center />
+
+> **This is the element node：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/2%E4%B8%8B.jpg" width="400" hegiht="500" align=center />
+
+> **This is after converting to img：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/3%E4%B8%8A.jpg" width="400" hegiht="500" align=center />
+
+> **This is the element node：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/3%E4%B8%8B.jpg" width="400" hegiht="500" align=center />
+
+> **This is the final result：**
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/4.jpg" width="400" hegiht="500" align=center />
+
+## js-screenshot-for-npm
+
+```bash
+npm install --save js_screen_shots
+```
+
+For details, see the document [README.md](https://github.com/usecodelee/JavaScript-screenshot/tree/master/js-screenshot-for-npm).

LICENSE

@@ -0,0 +1,74 @@
+# JavaScript实现截图
+
+[![star this repo](http://githubbadges.com/star.svg?user=usecodelee&repo=JavaScript-screenshot&style=default)](https://github.com/usecodelee/JavaScript-screenshot)[![fork this repo](http://githubbadges.com/fork.svg?user=usecodelee&repo=JavaScript-screenshot&style=default)](https://github.com/usecodelee/JavaScript-screenshot/fork) [![npm](https://img.shields.io/npm/v/js_screen_shots.svg)](https://www.npmjs.com/package/js_screen_shots) [![languages](https://img.shields.io/badge/javascript-81.4%25-green.svg)](https://github.com/usecodelee/JavaScript-screenshot) [![node](https://img.shields.io/badge/node-%3E1.0.0-green.svg)](https://github.com/usecodelee/JavaScript-screenshot) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
+
+## 简介
+
+JavaScript实现网页截图，使用的库有两个：
+
+> [Html2Canvas.js](https://github.com/niklasvh/html2canvas)  
+> [Canvas2Image.js](https://github.com/SuperAL/canvas2image)
+
+我主要是做了两个demo和一个npm包：
+
+1. [简单版的实现](https://github.com/usecodelee/JavaScript-screenshot/tree/master/simple)
+2. [Webpack+Vue+Element版的实现](https://github.com/usecodelee/JavaScript-screenshot/tree/master/simple)
+3. [js-screenshot-for-npm](https://github.com/usecodelee/JavaScript-screenshot/tree/master/js-screenshot-for-npm)
+
+## 如何使用简单版
+
+> 直接打开`index.html`即可
+
+## 如何使用Webpack+Vue+Element版
+
+``` bash
+# 安装依赖
+npm install
+
+# 在localhost：8080进行热重新加载
+npm run dev
+
+# 压缩构建为生产环境代码
+npm run build
+
+# 构建为生产环境代码并查看捆绑分析器报告
+npm run build --report
+```
+
+### 使用示例
+
+> 原始html是这样的：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/1%E4%B8%8A.png" width="500" hegiht="313" align=center />
+
+> 这是元素节点：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/1%E4%B8%8B.jpg" width="500" hegiht="313" align=center />
+
+> 这是转成canvas之后：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/2%E4%B8%8A.jpg" width="500" hegiht="313" align=center />
+
+> 这是元素节点：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/2%E4%B8%8B.jpg" width="500" hegiht="313" align=center />
+
+> 这是转成img之后：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/3%E4%B8%8A.jpg" width="500" hegiht="313" align=center />
+
+> 这是元素节点：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/3%E4%B8%8B.jpg" width="500" hegiht="313" align=center />
+
+> 这是最终截图结果：
+
+<img src="https://github.com/usecodelee/JavaScript-screenshot/blob/master/img/4.jpg" width="500" hegiht="313" align=center />
+
+## 使用npm安装js_screen_shots
+
+```bash
+npm install --save js_screen_shots
+```
+
+详情见[README.md](https://github.com/usecodelee/JavaScript-screenshot/tree/master/js-screenshot-for-npm)

README.md

@@ -0,0 +1,35 @@
+# js_screen_shots
+
+> 一个基于 JavaScript 的 DOM 截图工具。  
+
+[![star this repo](http://githubbadges.com/star.svg?user=usecodelee&repo=JavaScript-screenshot&style=default)](https://github.com/usecodelee/JavaScript-screenshot)[![fork this repo](http://githubbadges.com/fork.svg?user=usecodelee&repo=JavaScript-screenshot&style=default)](https://github.com/usecodelee/JavaScript-screenshot/fork) [![npm](https://img.shields.io/npm/v/js_screen_shots.svg)](https://www.npmjs.com/package/js_screen_shots) [![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)
+
+## 如何使用
+
+1.安装
+
+```bash
+# 使用npm安装
+npm install --save js_screen_shots
+```
+
+2.导入
+
+```javascript
+import all from '../node_modules/js_screen_shots'
+console.log(all);
+// {html2canvas: ƒ, Canvas2Image: {…}}
+// Canvas2Image: {saveAsImage: ƒ, saveAsPNG: ƒ, saveAsJPEG: ƒ, saveAsGIF: ƒ, saveAsBMP: ƒ, …}
+// html2canvas: ƒ html2canvas(element, conf)
+```
+
+3.使用
+
+可以看见all对象里面有两个方法：html2canvas和Canvas2Image。  
+html2canvas的作用是把html标签转化为canvas元素。  
+Canvas2Image的作用是把canvas元素转化为img元素。
+
+## 参考文档
+
+ [html2canvas文档](http://html2canvas.hertzen.com/documentation)  
+ [Canvas2Image文档](https://github.com/hongru/canvas2image)