纯前端实现截图功能

纯前端实现截图功能

一、插件

一、安装html2canvas、vue-cropper
npm i html2canvas --save //用于将指定区域转为图片
npm i vue-cropper -S//将图片进行裁剪

二、在main.js注册vue-cropper组件
import VueCropper from'vue-cropper'
Vue.use(VueCropper)

三、页面中引入html2canvas
import html2canvas from"html2canvas"

二、主要代码

<template><div><h2 style="font-size: 20px" @click="tailoring">裁剪</h2><!--继续写页面的其他内容 pop_alert可封装成组件使用--><p>截图展示的图片</p><img style="border: 5px solid #000000":src="uploadImg" alt=""/><div class="pop_alert" v-if="show"><vueCropper
                @mouseenter.native="enter"
                @mouseleave.native="leave"
                ref="cropper":img="uploadImg":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox"
                style="background-image: none"></vueCropper><div class="btn_box"><div @click="save">确认截图</div><div @click="close">取消</div></div></div></div></template><script>import html2canvas from'html2canvas'exportdefault{data(){return{option:{info:true,// 裁剪框的大小信息outputSize:0.8,// 裁剪生成图片的质量outputType:'jpeg',// 裁剪生成图片的格式canScale:false,// 图片是否允许滚轮缩放autoCrop:false,// 是否默认生成截图框fixedBox:false,// 固定截图框大小 不允许改变fixed:false,// 是否开启截图框宽高固定比例fixedNumber:[7,5],// 截图框的宽高比例full:true,// 是否输出原图比例的截图canMove:false,//时候可以移动原图canMoveBox:true,// 截图框能否拖动original:false,// 上传图片按照原始比例渲染centerBox:false,// 截图框是否被限制在图片里面infoTrue:true,// true 为展示真实输出图片宽高 false 展示看到的截图框宽高},uploadImg:'',show:false,}},methods:{tailoring(){//裁剪this.$nextTick(()=>{html2canvas(document.body,{}).then(canvas=>{let dataURL = canvas.toDataURL('image/png')
                    console.log(dataURL,'dataURL')this.uploadImg = dataURL
                    this.show =true})})},enter(){if(this.uploadImg ==''){return}this.$refs.cropper.startCrop()//开始裁剪},leave(){this.$refs.cropper.stopCrop()//停止裁剪},save(){//确认截图this.$refs.cropper.getCropData(data=>{//获取截图的base64格式数据
                console.log(data)this.show =false})// this.$refs.cropper.getCropBlob(data => { //获取截图的Blob格式数据//   this.cutImg = data;// });},close(){//取消this.show =false},},}</script><style>.pop_alert {width:100%;height:100%;position: absolute;top:0;left:0;border: 1px dashed red;
    background-color: #000000;}.btn_box {position: absolute;top:0;color: red;right:0;
    font-size: 30px;display: flex;
    align-items: center;
    z-index:6666;}</style>

链接: https://www.cnblogs.com/zwbsoft/p/16657954.html