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>