最终效果

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

步骤

先将两张图片使用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将两张图片叠加再保存为一张图片下载相关推荐

学习如何使用html和css样式将两张图片叠加到另一张图片上，实现微信扫一扫二维码效果
学习如何使用html和css样式将两张图片叠加到另一张图片上,实现微信扫一扫二维码效果 <!DOCTYPE html> <html> <head><meta ...
教你如何保存机密文件（将压缩包保存为一张图片）
前言此方案用需要保护的文档,不被其它人直接发现.其原理就是在图片的结尾处,增加zip的文件.因为图片解析会在前面的数据,所以最终的文件显示为一张图片的样式,而修改后缀后又可以变成zip压缩包被解压. ...
PHP网页截取快照：PHP截取网站网页保存为一张图片实现。
phantomjs截取网页截图场景有一个视频播放地址,需要对该网页进行截图解决思路: 1.将视频下载到本地,使用ffmpeg进行处理 2.使用phantomjs,phantomjs内置了webk ...
Matplotlib、PIL Image如何将多张图片整合保存为一张图片
目录 1. 法一:生成多行多列图 2. 法二:生成单行/单列图在这篇文章中介绍了如何生成多张图,但是很多时候我们需要将图片综合对比展示,因此需要合并在一张图里. 以下给了2种方法:法一是通常展示 ...
使用Java实现，PDF转换成图片（每一页保存为一张图片）
基于maven项目 1.引入jar包  <de ...
VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整实现
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. VUE+ELEMENTUI el-upload照片墙手动上传多张图片保存和修改功能前后端完整 ...
python怎样把两个图画到一起_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...
css将两张图片叠加（简易方法）
@开启博客之旅,记录生活 css将两张图片叠加本质上的原理其实是,一个作为背景图片,另一个作为DOM节点元素添加进去.这是我本人的第一篇正式博客,我觉得,现在分享学习到的知识还不晚.刮风了,待会去吃 ...
python图像拼接_python实现两张图片拼接为一张图片并保存
本文实例为大家分享了python实现两张图片拼接为一张图片并保存的具体代码,供大家参考,具体内容如下这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 f ...

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

最终效果

步骤

代码

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

最新文章

热门文章