日常笔记

1, 网页截屏插件 html2canvas

     html2canvas(document.getElementById("chart")).then(function (canvas) {
        let dataURL = canvas.toDataURL("image/png");
    });

2, 图片裁剪插件 VueCropper

    // 引入方式 不要去掉花括号不然会报错
    import { VueCropper } from "vue-cropper";
    
    // VueCropper 参数配置
    option: {
            img: "", // 裁剪图片的地址
            info: true, // 裁剪框的大小信息
            outputSize: 0.8, // 裁剪生成图片的质量
            outputType: "jpeg", // 裁剪生成图片的格式
            canScale: false, // 图片是否允许滚轮缩放
            autoCrop: true, // 是否默认生成截图框
            // autoCropWidth: 300, // 默认生成截图框宽度
            // autoCropHeight: 200, // 默认生成截图框高度
            fixedBox: false, // 固定截图框大小 不允许改变
            fixed: false, // 是否开启截图框宽高固定比例
            fixedNumber: [7, 5], // 截图框的宽高比例
            full: true, // 是否输出原图比例的截图
            canMoveBox: true, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: true, // 截图框是否被限制在图片里面
            infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        }
    // 获取截取后的图片base64
    this.$refs.cropper.getCropData((data) => {
        console.log(data)
    })