vue 截图功能的实现

vue 截图功能的实现

<span @click="toImage()">导出图片</span><!-- 需要截图的区域 -->
<div class="imageBox">
....
</div>

    import html2canvas from 'html2canvas'// 截图crossTabletoImage () {const canvas = ateElement('canvas')const canvasBox = document.querySelector('.imageBox')const width = canvasBox.clientWidthconst height = canvasBox.clientHeight// 宽高 * 2 并放大 2 倍 是为了防止图片模糊// canvas.width = width * 2// canvas.height = height * 2canvas.width = widthcanvas.height = heightcanvas.style.width = width + 'px'canvas.style.height = height + 'px'const context = Context('2d')// context.scale(2, 2)context.scale(1, 1)const options = {backgroundColor: null,canvas: canvas,useCORS: true}html2canvas(canvasBox, options).then((canvas) => {const dataURL = DataURL('image/png') // 图片格式转成base64this.downloadImage(dataURL)})},// 下载图片downloadImage (url) {const a = ateElement('a')a.href = urla.download = '图片命名'a.click()}