使用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将两张图片叠加再保存为一张图片下载的主要内容,如果未能解决你的问题,请参考以下文章