vue2中屏幕截图 自己裁剪大小 并显示图片完整代码
时间: 2024-01-27 15:31:19 浏览: 91
以下是在Vue2中实现屏幕截图、自定义裁剪大小并显示图片的完整代码:
```vue
<template>
<div>
<div="screenshotArea">
<!-- 组件内容 -->
div>
<button @click="captureScreenshot">截图</button> <!-- 触发截图的按钮 -->
<!-- 截图预览模态框 -->
<div class="modal" v-if="previewImage">
<img :src="previewImage" alt="截图预览">
<button @click="saveScreenshot">保存截图</button>
</div>
</div>
</template>
<script>
import html2canvas from 'html2canvas'
import Cropper from 'cropperjs'
export default {
data() {
return {
previewImage: null,
cropper: null
}
},
methods: {
captureScreenshot() {
html2canvas(this.$refs.screenshotArea).then(canvas => {
const screenshotDataUrl = canvas.toDataURL()
this.previewImage = screenshotDataUrl
this.cropper = new Cropper(this.$refs.previewImage, {
aspectRatio: 16 / 9, // 裁剪框的宽高比例
viewMode: 1, // 显示裁剪区域,不允许移动裁剪框外
dragMode: 'move', // 移动裁剪框时,只能移动裁剪区域内的图片
autoCropArea: 1, // 默认裁剪区域为图片的完整显示
cropBoxResizable: true, // 允许调整裁剪框的大小
cropBoxMovable: false, // 不允许移动裁剪框
minCropBoxWidth: 100, // 最小裁剪框宽度
minCropBoxHeight: 100, // 最小裁剪框高度
ready() {
// 设置初始裁剪框的大小和位置
this.cropper.setCropBoxData({
width: 300,
height: 200,
left: (this.cropper.containerData.width - 300) / 2,
top: (this.cropper.containerData.height - 200) / 2
})
}
})
})
},
saveScreenshot() {
const croppedCanvas = this.cropper.getCroppedCanvas()
const croppedDataUrl = croppedCanvas.toDataURL()
// 在这里可以将 croppedDataUrl 发送到服务器保存,或者进行其他操作
this.previewImage = null
this.cropper.destroy()
}
}
}
</script>
<style>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.modal img {
max-width: 100%;
max-height: 100%;
}
button {
margin-top: 10px;
}
</style>
```
在这个示例代码中,通过引入 html2canvas 和 cropperjs 库,我们实现了在Vue2中进行屏幕截图并自定义裁剪大小的功能。
在模板中,我们有一个用于截图的区域(`<div ref="screenshotArea">`)和一个触发截图的按钮。当点击按钮时,我们使用 html2canvas 将指定的区域转为 canvas,并将其转换为图片的 base64 数据URL。然后,我们使用 cropperjs 创建一个裁剪框,并在截图预览模态框中显示截图结果。用户可以通过拖动和调整裁剪框的大小来选择需要的裁剪区域。最后,用户可以点击保存截图按钮,获取裁剪后的 canvas,并将其转为图片的 base64 数据URL。
请确保在使用这段代码之前,已经正确安装了 html2canvas 和 cropperjs 库,并在组件中正确引入了这两个库。
阅读全文