Nonstop Progressive Marxism
Wondering what’s next for npm?Check out our public roadmap! »

html-screenshot-tool

1.2.3 • Public • Published

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(){ // 取消按钮回调
  }
}

Install

npm i html-screenshot-tool

DownloadsWeekly Downloads

2

Version

1.2.3

License

MIT

Unpacked Size

998 kB

Total Files

10

Last publish

Collaborators

  • avatar