实现海报合成工具，自定义背景图、位置、大小等 （html2canvas）

<template>
  <!-- 海报合成工具 -->
  <div class="all-tool">
    <div :style="bgStyle" class="course-container" id="myImage">
      <div class="course">
        <img :style="bgStyle" :src="imageUrl" />
      </div>
      <div :style="codeStyle" class="code">
        <img :style="ImgStyle" :src="imageUrl1" />
      </div>
    </div>
    <div class="madin-cha">
      <div>背景图操作</div>
      <div class="item-user">
        <span>上传 ：</span>
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-change="handleAvatarSuccess" :auto-upload="false">
          <img v-if="imageUrl" class="avatar-uploader-icon" :src="imageUrl" alt="" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <div class="item-user"><span>长 ：</span> <input v-model="widthBg" type="text" /> px</div>
      <div class="item-user"><span>高 ：</span> <input v-model="heightBg" type="text" /> px</div>
      <div>二维码操作</div>
      <div class="item-user">
        <span>上传 ：</span>
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-change="handleAvatarSuccess2" :auto-upload="false">
          <img v-if="imageUrl1" class="avatar-uploader-icon" :src="imageUrl1" alt="" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <div class="item-user"><span>长 ：</span><input v-model="widthImg" type="text" /> px</div>
      <div class="item-user"><span>高 ：</span><input v-model="heightImg" type="text" /> px</div>
      <div class="item-user"><span>距离底部：</span><input v-model="bottomImg" type="text" /> px</div>
      <div class="item-user"><span>距离左边：</span><input v-model="leftP" type="text" /> %</div>
      <div class="item-user"><span>回拉左边：</span><input v-model="leftImg" type="text" /> px</div>
      <div class="btn-all" type="button" @click="saveImage">合成下载</div>
      <a id="link"></a>
    </div>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      widthBg: 300,
      heightBg: 500,
      widthImg: 80,
      heightImg: 80,
      bottomImg: 66,
      leftP: 50,
      leftImg: 40,
      imageUrl: "",
      imageUrl1: "",
    };
  },
  computed: {
    bgStyle() {
      return {
        width: `${this.widthBg}px`,
        height: `${this.heightBg}px`,
      };
    },
    codeStyle() {
      return {
        bottom: ` ${this.bottomImg}px`,
        left: `${this.leftP}%`,
        marginLeft: `-${this.leftImg}px`,
      };
    },
    ImgStyle() {
      return {
        width: `${this.widthImg}px`,
        height: `${this.heightImg}px`,
      };
    },
  },
  created() {},
  destroyed() {},
  methods: {
    saveImage() {
      html2canvas(document.querySelector("#myImage")).then((canvas) => {
        var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        //save as download without name and extension
        //window.location.href = image;
        var link = document.getElementById("link");
        link.setAttribute("download", "海报.png");
        link.setAttribute("href", canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        link.click();
      });
    },
    handleAvatarSuccess(file, fileList) {
      console.log(file, fileList);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess2(file, fileList) {
      console.log(file, fileList);
      this.imageUrl1 = URL.createObjectURL(file.raw);
    },
  },
};
</script>

<style scoped>
.all-tool {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;
  background: #fff;
  height: 1000px;
  padding: 30px;
  box-sizing: border-box;
}
.course-container {
  height: 500px;
  width: 300px;
  position: relative;
}
.course {
  z-index: 1;
  position: absolute;
}

.code {
  z-index: 2;
  position: absolute;
}

.madin-cha {
  width: 400px;
  height: 800px !important;
  overflow: hidden;
}
.item-user {
  padding: 10px 30px;
  display: flex;
}
.item-user span {
  display: inline-block;
  width: 80px;
  text-align: right;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader-icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px solid #ccc;
}
.btn-all {
  background: rgb(5, 199, 224);
  text-align: center;
  padding: 5px;
  border-radius: 10px;
  color: #ffff;
  margin-top: 30px;
  width: 120px;
  margin: 30px auto 0;
  cursor: pointer;
}
</style>