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

本文主要是介绍使用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>