使用Vue将两张图片叠加再保存为一张图片下载

Posted 2021-08-16 starjuly

最终效果

• 将一张课程图片和一张二维码图片叠加（网上图片随便乱找，勿对号入座！！！）
  

步骤

• 先将两张图片使用css进行叠加，然后按照自己需求将图片移动到合理位置
• 要使用到一个插件将两张图片转为canvas，插件链接：html2canvas
• 最后将canvas保存下载。

代码

<template>
  <div>
    <button type="button" @click="save()">保存</button>
    <a id="link"></a>
    <div class="course-container" id="myImage"> 
      <div class="course">
          <img src="@/assets/course.jpeg"/>
      </div>
      <div class="code">
          <img src="@/assets/code.jpg"/>
      </div>
    </div>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
  export default {
    data() {
      return {
      }
    },
    created() {
        
    },
    destroyed() {
     
    },
    methods: {
      save() {
        html2canvas(document.querySelector("#myImage")).then(canvas => {
          var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.

        //save as download without name and extension
        //window.location.href = image; 
        var link = document.getElementById('link');
        link.setAttribute('download', 'my.png');
        link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        link.click();
        });
      }
    }
  }
</script>

<style scoped>
.course-container {
  height: 1024px;
  width: 724px;
}
 .course {
     z-index: 1;
     position: absolute;
 }
 .code {
    z-index: 2;
    position: absolute;
    margin-top: 700px;
    margin-left: 400px;
    width: 150px;
    height: 150px;
 }
</style>