首先,毋庸置疑,需要引入如下文件:
<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;