cropperjs实现放大缩小图片后配合canvas合成图片

原图：（这是两张图片，小车所在的图片是相框，芭比娃娃是可缩放的图片）

 放大后合成导出：

html：

<div class="lila">
    <img src="~@/static/images/lila/lila_two.png" id="image" class="image">
    <img src="~@/static/images/test/studo_2.png" id="bg1" class="bg1" />
</div>
<el-button type="success" @click="daochu" style="margin-top:50px">导出图片</el-button>

css：

.lila {
    height: 300px;
    width: 300px;
    margin: 50px auto 0;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    img {
        width: 100%;
        height: auto;
        border-radius: 15px;
    }
    .bg1 {
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }
    .image {
        pointer-events: auto;
    }
}

 js实现：

首先，下载cropperjs：

npm install cropper jquery

导入：

import Cropper from "cropperjs";

对cropperjs进行配置：

let image = document.getElementById("image")
this.cropper = new Cropper(image, {
    viewMode: 3,
    dragMode: 'move',
    autoCrop: 1,
    autoCropArea: 1,
    restore: false,
    modal: false,
    guides: false,
    highlight: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    guides: false,
    modal: false
})

cropperjs配置大全：

https://blog.csdn.net/qq_38048243/article/details/82013533

导出方法：

daochu() {
    var man1 = document.getElementById("image"),
        canvasBg = document.getElementById("bg1");
    let canvas = this.cropper.getCroppedCanvas({ width: 300, height: 300 })
    let ctx = canvas.getContext("2d").drawImage(canvasBg, 0, 0,300,300);
    let mybase = this.convertCanvasToImage(canvas)
    this.mybase = mybase
},
// 从 canvas 提取图片 image  
convertCanvasToImage(canvas) {
    return canvas.toDataURL("image/jpeg", 1);
}