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

Posted 2022-10-29 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>