vue 使用html2canvas实现图片合成，将两张图片合成一张,并下载海报

最新推荐文章于 2024-04-10 14:04:41 发布

原创

最新推荐文章于 2024-04-10 14:04:41 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍如何在 Vue 项目中利用 html2canvas 合成两张图片为一张，并实现海报的下载功能。详细讲解了安装和使用步骤，并提供了部分相关面试知识点。

使用html2canvas将两张图片合成一张,并下载海报（效果图）

1、安装 html2标题canvas

html2canvas屏幕截图基于 DOM，因此可能不是 100% 准确到真实表示，因为它不会制作实际的屏幕截图，而是根据页面上可用的信息构建屏幕截图。

1.es6 模块化引入方式，项目中使用

 npm install --save html2canvas

2.js直引方式

<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>

2、使用

// 基础语法：
html2canvas(element, options);

 <div><div class="all-tool"><div style="width:250px;height:400px;" class="course-container" id="myImage"><div class="course"><img style="width:250px;height:400px;" :src="coverImg" /></div><div style="bottom:66px;left:50px;margin-left:50px" class="code"><img style="width:100px;height:100px;"