html2Canvas生成图片

最新推荐文章于 2025-05-25 12:50:06 发布

chibimarukochan

最新推荐文章于 2025-05-25 12:50:06 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： html2Canvas canvas2image

本文链接：https://blog.youkuaiyun.com/ChibiMarukoChan/article/details/89562279

本文介绍了如何使用html2Canvas将HTML内容转化为canvas，再通过canvas2image将其保存为图片。文章详细阐述了两种方法：一是借助html2Canvas和download属性实现下载；二是直接绘制canvas并利用Canvas2Image保存。还列举了canvas的一些基本绘图方法，如fillStyle、fillRect、scale、fillText和drawImage。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，毋庸置疑，需要引入如下文件：

<script src="js/jquery-2.1.1.min.js"></script>
<!-- 引入html2canvas -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"</script>
<!-- 引入canvas2image -->
<script src="js/canvas2image.js"></script>

方法一:html转canvas，canvas转换成url，然后利用a标签的download属性，直接下载

1）html代码如下：

<div class="canvans-border" id="canvansBorder">
    <image src="./images/add.png" style="width:100%;height:300px;"></image>
    <div>下载内容1。。。。。。。。。</div>
    <div>下载内容2。。。。。。。。。</div>
</div>

2）js操作：

说明：JavaScript 使用 id 来寻找 canvas 元素：然后创建 context 对象，getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

   var canvas2 = document.createElement("canvas");
   var wid= document.querySelector('#canvansBorder');
   var w = document.body.clientWidth;

最低0.47元/天解锁文章

200万优质内容无限畅学