关于web网页截图的问题(html2canvas插件)

import html2canvas from 'html2canvas'

import jpg from '@/assets/1.jpg';

 

 

htmlToImage=(element, callback)=> {

  var width = element.offsetWidth;

  var height = element.offsetHeight;

  var canvas = document.createElement("canvas");

  canvas.width = width ;

  canvas.height = height ;

  var context = canvas.getContext("2d");

  var options = {

    scale: scale,

    canvas: canvas,

    // logging: true,

    width: width,

    height: height,

    taintTest: true, //在渲染前测试图片

    useCORS: true, //貌似与跨域有关，但和allowTaint不能共存

    dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比

    background: "#fff",

  };

  html2canvas(element, options).then(function (canvas) {

    var dataURL = canvas.toDataURL('image/jpeg', 0.5); //将图片转为base64, 0-1 表示清晰度

    console.log(dataURL)

    var base64String = dataURL.toString().substring(dataURL.indexOf(",") + 1); //截取base64以便上传

}

 

截图的图片

<img src={jpg} alt="" style={{width:'100%'}} className='aaa'/>

        

点击截取

                 < Button onClick = {

                   () => this.htmlToImage(document.getElementsByClassName("aaa")[0])

                 } > 点击截图 </Button>