html-screenshot-tool

基于html2canvas插件的网页截图工具

Installation

npm install --save html-screenshot-tool

Demo

demo

usage

template

<div>
  <img src="https://cn.vuejs.org/images/logo.png" style="width:150px">
  <h1>Welcome to Your Vue.js App</h1>
  <button @click="fullscreen()">全屏截图</button>
  <button @click="startScreenshot()">开始截图</button>
</div>

script

import 'html-screenshot-tool/lib/screenshot.css'
import screenshot from 'html-screenshot-tool'
export default {
  methods: {
    fullscreen: function(){
      screenshot.fullscreen({
        successCallback: this.finishClip // 成功回调 
      })
    },
    startScreenshot: function(){
      screenshot.start({
        successCallback: this.finishClip, // 成功回调 
        cancelCallback: this.cancelClip // 取消截图回调 
      })
    },
    finishClip: function(data){
      console.log(data)
    },
    cancelClip: function(){
      console.log('取消截图')
    }
  }
}

method

1. start(options) 开始截图
2. fullscreen(options) 直接截取网页全屏内容

options

var options = {
  uploadUrl: '', // 上传截图的接口
  width:300, // 截图框初始宽度，默认300px
  height: 200, // 截图框初始高度，默认200px
  minWidth: 10, // 截图框最小宽度，默认10px
  minHeight: 10, // 截图框最小高度，默认10px
  successCallback: function(result){ // 成功回调
    // result说明
    // 当uploadUrl有传值，返回uploadUrl接口的返回值
    // 当uploadUrl没传值，返回base64图片格式
  },
  failCallback: function(){ // 上传失败回调
  },
  cancelCallback: function(){ // 取消按钮回调
  }
}