If you win a silver medal, you’ll always be forgotten. If you win a gold medal, you’ll be the poster child

preface

1 introduction

Configuration items

options

ScrollY: 0, scrollX: 0, scrollX: 0, scrollY: 0, scrollX: 0 True, / / canvas / / solve the problem of incomplete picture shows high height: BaseScreenshot. ScrollHeight, / / canvas wide width: BaseScreenshot. ScrollWidth}Copy the code

Commonly used method

html2canvas

Html2canvas (el, options)Copy the code

2 use

The installation

npm install html2canvas  --save
Copy the code

Screenshots to share

<template> <div class="BaseScreenshot" ref=" BaseScreenshot" >< p><span> Hope </p> is a good thing, maybe the best thing in the world </p> <p> Hope is a good thing, </p> <img width="100%" : SRC =" SRC "/> </div> </template> <script> import html2canvas from 'html2canvas' export  default { data() { return { src: }}, Mounted () {this.$nextTick() => {const BaseScreenshot = this.$refs. BaseScreenshot, const [x, Y] = [window.scrollx, window.scrolly] // The initial position of scrolling window.scrollto (0, 0) ScrollX 0:0, / / open cross-domain configuration useCORS: true, / / canvas high height: BaseScreenshot. ScrollHeight, / / canvas wide width: BaseScreenshot.scrollWidth }).then(canvas => { // document.body.appendChild(canvas) this.src = Canvas. ToDataURL ('image/jpeg', 1.0) // Restore the scrolling position window.scrollto (x, y) }) }) } } </script> <style lang="scss" scoped> .BaseScreenshot { position: relative; width: 110vw; height: 110vh; background-image: linear-gradient(45deg, chocolate, lightpink, red); overflow: scroll; -webkit-overflow-scrolling: touch; p { white-space: nowrap; margin-top: 20px; span { font-size: 24px; } } img { position: absolute; top: 0; left: 0; Opacity: 0.5; } } </style>Copy the code

3. Pay attention to

1. If the screenshot is incomplete with a scroll bar, scroll to the original position (0, 0) 2. When an image is blurred, enlarge it first and then set DPI to reduce it. 3. When an image crosses domains, add crossorigin to the IMG tag

The end of the

If life is hard, don’t hide in my sweet dreams ~

Good night ^_^

Refer to the link

  • Html2canvas document
  • Solve html2Canvas screenshot incomplete problem
  • Solve html2Canvas screenshot blur problem
  • Solve html2Canvas screenshot cross – domain problem

Review past

  • Learn a Vue plugin (1) every day — Better scroll
  • Learn a VUE plugin (2) every day — vue-awesome-swiper
  • Learn a vUE plugin every day (3) — esLint + prettier + stylelint
  • Learn a VUE plugin (4) every day — the V-Viewer
  • Learn a vUE plugin (5) every day — PostCSs-pxtorem
  • Learn a Vue plugin every day (6) — Momentjs
  • Learn a Vue plugin (7) every day — HammerJS
  • Learn a vUE plugin (8) — McAnvas every day
  • Learn a VUE plugin (9) — MathJax every day
  • Learn a vUE plugin every day (10) — VUe-aPlayer
  • Learn a vUE plugin every day (11) — vue-drag-resize
  • Learn a vUE plugin every day (12) — VUe-fullPage