画布canvas

最新推荐文章于 2023-06-07 17:18:47 发布

GY程序源

最新推荐文章于 2023-06-07 17:18:47 发布

阅读量394

点赞数

分类专栏：前端代码整理-JS

本文链接：https://blog.csdn.net/jump_22/article/details/53842777

版权

前端代码整理-JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

画布(HTML转图片)

js:

<script src="../dist/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../dist/html2canvas.js"></script>

html:

<body style="margin:0px;">
<div id="content" style="float: left;width: 600px;height: 300px;">
    <h1>HTML网页内容</h1>
    <div>
        测试测试<strong>测试测试</strong>
        测试测试
        <div>
            <img src="hacker.jpg" alt="" style="width: 100px;height: 150px;"></div>
    </div>
</div>
<canvas style="float: left;display: none;"></canvas>
<div id="pngHolder" style="float: left;"></div>
<button onclick="HtmlToCanvas()">HtmlToCanvas</button>
<button onclick="CanvasToImage()">CanvasToImage</button>
<button onclick="DownloadImage()">DownloadImage</button>
</body>
</html>

HTML网页内容转canvas

var canvas = document.querySelector("canvas");
    //HTML网页内容转canvas
    function HtmlToCanvas(){
        canvas.width =document.querySelector("#content").clientWidth;
        canvas.height = document.querySelector("#content").clientHeight;
        html2canvas(document.querySelector("#content"), {
            canvas: canvas
        }).then(function(canvas) {
            console.log('Drew on the existing canvas');

        });
    }

canvas内容转图片

//canvas内容转图片
    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");//转成base64码
        return image;
    }
    function CanvasToImage(){
        document.getElementById("pngHolder").appendChild(convertCanvasToImage(canvas));//转成base64码
    }

保存图片到本地

//保存图片
    function _fixType(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };   
    function DownloadImage(){
        var type = 'png';
        var data = canvas.toDataURL(type);//转成base64码
        data = data.replace(_fixType(type),'image/octet-stream');
        var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;

        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
    };

导出图片

需要引入html2canvas.js：

解决跨域问题找到getPseudoElementClasses修改如下:
function getPseudoElementClasses(){
    ...
          for (var k = 0, l = rules.length; k < l; k++) {
            //sheets[i].href===null排除跨域的css样式
            if(findPsuedoEls.test(rules[k].selectorText)&&sheets[i].href===null) {
              classes.push(rules[k].selectorText);
            }
          }
    ...
     }

$(document).ready(function($) {
        $("#pngexport").click(function(event) {
            html2canvas(document.querySelector("#customers"), {
                    canvas: canvas,
                    useCORS: true,
                    allowTaint: true,
                    onrendered: function(canvas) {
                        /*var context = canvas.getContext("2d");
                            //然后将画布缩放，将图像放大两倍画到画布上
                            context.scale(200,200);
                            var screenshot;
                            screenshot = context.canvas.toDataURL( "image/png" );*/
                       var dataURL = canvas.toDataURL("image/png");
                       window.open(dataURL);
                       /*resolve(dataURL);*/
                    }
             });
        });
    });

GY程序源

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
画布canvas

画布(HTML转图片)导出图片需要引入html2canvas.js：解决跨域问题找到getPseudoElementClasses修改如下:function getPseudoElementClasses(){ ... for (var k = 0, l = rules.length; k < l; k++) { //sheets[i].href
复制链接

扫一扫