html2Canvas生成图片

本文介绍了如何使用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;
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值