vue搭建的H5页面长按保存为图片(不考虑像素比的简单实现)

• 1.安装包

yarn add html2canvas

• 2.要操作页面代码

<template>
  <div class="container">
    <div class="saveImg" v-show="firstFlag">save img</div>
    <img :src="dataURL" alt v-show="!firstFlag" />
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      firstFlag: true,
      dataURL: ""
    };
  },
  mounted() {
    html2canvas(document.querySelector(".saveImg")).then(canvas => {
      let imgUrl = canvas.toDataURL("image/png");
      this.dataURL = imgUrl;
      this.firstFlag = false;
    });
  }
};
</script>
<style lang="scss" scoped>
.saveImg {
  border: 1vw solid red;
}
</style>