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

Posted starjuly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Vue将两张图片叠加再保存为一张图片下载相关的知识,希望对你有一定的参考价值。

最终效果

  • 将一张课程图片和一张二维码图片叠加(网上图片随便乱找,勿对号入座!!!)

步骤

  • 先将两张图片使用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>

以上是关于使用Vue将两张图片叠加再保存为一张图片下载的主要内容,如果未能解决你的问题,请参考以下文章

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

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

CSS如何将图片叠加到一起?

将两张照片合二为一[重复]

如何把两张图片拼接在一起?

将两张重叠的图片合二为一,iOS