js canvas实现将html页面或div生成图片

责编:menVScode 2018-10-24 11:27 阅读(80)

参考文章:js实现截图并保存图片在本地(html转canvas、canvas转image)

html2canvas.js和canvas2image.js的下载地址:

    html2canvas.js: http://html2canvas.hertzen.com/dist/html2canvas.min.js

    canvas2image.js: https://github.com/SuperAL/canvas2image

1、html转canvas

html代码

<h2>原始HTML</h2>
<div style="background:red;width: 100%;" class="test">
    <div style="background:green;">
        <div style="background:blue;">
            <div style="background:yellow;">
                <div style="background:orange;">
                    <img src="https://f.51fanbei.com/h5/app/activity/2018/07/ofo/ofo_bg1.jpg" width="100%" alt="">
                    canvas实现将html页面或div生成图片
                </div>
            </div>
        </div>
    </div>
</div>
<h2 class="toCanvas"> <a href="javascript:void(0);"> 转成canvas </a></h2>
<h2 class="toPic"><a href="javascript:void(0);"> 转成图片 </a></h2>
<h5>
    <label for="imgW">宽度:</label>
    <input type="number" value="" id="imgW" placeholder="默认是原图宽度" />
    <label for="imgH">高度:</label>
    <input type="number" value="" id="imgH" placeholder="默认是原图高度" />
    <label for="imgFileName">文件名:</label>
    <input type="text" placeholder="文件名" id="imgFileName" />
    <select id="sel">
                <option value="png">png</option>
                <option value="jpeg">jpeg</option>
                <option value="bmp">bmp</option>
            </select>
    <button id="save">保存</button>
</h5>

css代码

* {
    margin: 0;
    padding: 0;
}

div {
    padding: 10px;
    box-sizing: border-box;
    border: 5px solid black;
}

h2 {
    background: #efefef;
    margin: 10px;
}
.toPic {
    display: none;
}

js代码

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript">
    var test = $(".test").get(0); //将jQuery对象转换为dom对象
    // 点击转成canvas
    $('.toCanvas').click(function(e) {
        // 调用html2canvas插件
        html2canvas(test).then(function(canvas) {
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            // 渲染canvas
            $('.toCanvas').after(canvas);
            // 显示‘转成图片’按钮
            $('.toPic').show(1000);
            // 点击转成图片
            $('.toPic').click(function(e) {
                // 调用Canvas2Image插件
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                // 渲染图片
                $(".toPic").after(img);
                // 点击保存
                $('#save').click(function(e) {
                    let type = $('#sel').val(); //图片类型
                    let w = $('#imgW').val(); //图片宽度
                    let h = $('#imgH').val(); //图片高度
                    let f = $('#imgFileName').val(); //图片文件名
                    w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空,为空时保持原来的值
                    h = (h === '') ? canvasHeight : h;
                    // 调用Canvas2Image插件
                    Canvas2Image.saveAsImage(canvas, w, h, type, f);
                });
            });


        });
    });
</script>


注意:当要保存HTML中图片img的格式不是base64格式的时候,保存结果的是没有图片的,必须要先将img以base64格式写入。

接下来我们就来实现上面说的需求。

html代码

<div id="getPic">
    <p>menvscode.com</p>
    <img src="" alt="" id="pic">
    <p>menvscode.com</p>
</div>
<button class="toPic">转成图片</button>
<img src="" id="newPic" alt="">
<canvas id="canvas" style="display: none;"></canvas>

js代码

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="./html2canvas.min.js"></script>
<script type="text/javascript" src="./canvas2image.js"></script>
<script>
	getBase64Image()

	let test = document.getElementById('getPic')
    setTimeout(()=>{
        html2canvas(test).then(function(canvas) {
            $('.toPic').click(function(e) {

                // 调用Canvas2Image插件
                var canvasWidth = canvas.width;
                // canvas高度
                var canvasHeight = canvas.height;
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                // 渲染图片
                $('#newPic').attr('src',$(img).attr('src'))
            });
        })
    },1000)
    //
    function getBase64Image() {
        let originImgUrl = 'http://f.51fanbei.com/test/64d6481fa49025a4.png'
        let canvas=document.getElementById("canvas"),//获取canvas
        ctx = canvas.getContext("2d"), //对应的CanvasRenderingContext2D对象(画笔)
        img = new Image();//创建新的图片对象
        img.setAttribute("crossOrigin",'Anonymous')
        img.src = originImgUrl;
        img.onload = function(){//图片加载完,再draw 和 toDataURL
            ctx.drawImage(img,0,0);
            let base64 = canvas.toDataURL("image/png");
            console.log(base64)
            $('#pic').attr('src',base64)
        };
    }
</script>
标签: canvas js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码