本文共 2933 字，大约阅读时间需要 9 分钟。

画布(HTML转图片)

js:

html:

   
    
    
HTML网页内容
    
    
             测试测试
     测试测试        测试测试        
     
            
      
     
    
    
   
   
   
HtmlToCanvasCanvasToImageDownloadImage

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);*/                    }             });        });    });

转载地址：http://jddwb.baihongyu.com/