js(网页，代码，canvas）转图片

一般来说html代码不能直接转换成图片，需要先转换成canvas在由canvas转换成图片。

本文将介绍以下几种情况：

     1.图片转换成canvas

2. canvas转换成图片

3. Html代码转换成canvas

4. HTML代码转换成图片

1.图片转换成canvas

function convertImageToCanvas(image) {

        var canvas = document.createElement("canvas");

        canvas.width = image.width;

        canvas.height = image.height;

        canvas.getContext("2d").drawImage(image, 0, 0);

        return canvas;

}

2.canvas转换成图片

注明：需要运行在服务器

function convertCanvasToImage(canvas) {

        var image = new Image();

        image.crossOrigin = '*’; //用以解决跨域问题

        image.src = canvas.toDataURL("image/png");

        return image;

}

3.Html代码转换成canvas

需要借助一个三方工具html2canvas.js

view代表想要渲染的html代码区域

html2canvas(document.getElementById('view'), {

    onrendered: function(canvas) {

        document.body.appendChild(canvas);

    },

});

4.HTML代码转换成图片

思路，先把html代码转换成canvas，再将canvas转换成图片，但是这样要经过两步，而一般的需求都是一次性将html代码转换成图片。

经过试验，发现，在html2canvas工具中可以直接集成.canvas转换成图片的代码，如下：

html2canvas(document.getElementById('view'), {

    onrendered: function(canvas) {

        var image = new Image();

        image.crossOrigin = '*'; //用以解决跨域问题

        image.src = canvas.toDataURL("image/png");

        document.body.appendChild(image);

    },

});