Javascript保存网页为图片借助于html2canvas库实现

最近老跟canvas打交道,处理图片:放大缩小,图片旋转,移动图片等等!

第一步,把网页保存为Canvas画布,借助于html2canvas库,http://html2canvas.hertzen.com/

重新温故下canvas的基础用法!

html2canvas(document.getElementById("id1"), { 
onrendered: function(canvas) { 
document.getElementById("id2").appendChild(canvas);//生成画布后如何处理,当然可以在新标签打开,在浮层展示等等 
}, 
canvas_id: 'canvas'//通过修改html2canvas源码添加canvas的id 
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            //绘制矩形并填充
            //前两个参数是正方形原点(左上角)的(x,y)坐标值,
            //其余的两个参数是矩形的宽和高,宽是矩形向右绘制的距离,高是矩形向下绘制的距离
            //context.fillRect(x, y, width, height);
            context.fillStyle = "rgb(255,0,0)"; //rgb(红,绿,蓝);   设置填充颜色
            context.fillRect(200, 300, 200, 100);
            //绘制矩形相框
            context.lineWidth = 5; //加粗绘制线条   默认值为1
            context.strokeStyle = "blue";    //设置线条颜色
            context.strokeRect(40, 40, 200, 100);

            //绘制线条
            context.beginPath();  //开始路径
            context.moveTo(40, 40);//设置路径原点
            context.lineTo(340, 340);//设置路径终点
            context.closePath(); //结束路径
            context.strokeStyle = "#00ff00";
            context.stroke(); //绘出路径轮廓

            //绘制圆形
            context.beginPath(); //开始路径
            //前两个参数是圆点的坐标值;第三个是半径;第四个是开始角度;第五个是结束角度;
            //第六个是一个布尔值,为true时:按逆时值方向绘制;为false时:按顺时针方向绘制。
            //Canvas中的角度是以弧度为单位的,而非角度。
            //context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 
            context.arc(230, 90, 50, 0, Math.PI * 2, false); //绘制一个圆形
            context.closePath(); //结束路径
            context.fill(); //填充路径

            //角度转换弧度
            var degree = 1; //1度
            var radians = degree * (Math.PI / 180); //0.0175弧度

            //绘制文本
            var txt = "Hello World!";
            context.font = "italic 30px serif";  //修改字号和字体  默认值:10px sans-serif   该值可接收与css的font完全相同的字符串
            //第一个参数:准备绘制的文本,第二三个参数:文本原点(左下角)的(x,y)针坐标
            context.fillText(txt, 20, 90);
            context.lineWidth = 1;
            context.font = "italic 60px serif";
            context.strokeText(txt, 20, 190);  //创建描边文本

            //擦除Canvas
            setTimeout(function () {
                    context.clearRect(0, 0, 500, 500);
            }, 10000);

            //如果重新设置Canvas的宽和高,Canvas会恢复到初始状态。也就等于擦除了Canvas
        }
    </script>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500">

    </canvas>
</body>
</html>

Note:html2canvas()第一个参数为要生成canvas的区域,如果整个网页生成canvas,则是document.body。第二个参数详见官网设置canvas的各种属性,当然修改源代码可以添加自己想要的属性,如给canvas添加id等。

 交流群:225443677

第二步,把第一步中生成的canvas保存成图片

相关文章