Question

我想将一些Html代码渲染为我的网站下载的图像。我正在使用html2canvas，它可以很好地为文本创建图像，但我想从html div，img，text，paragraph创建图像。

我使用下面的代码将html渲染为图像

<!DOCTYPE html>
<html>
<head lang="en">



</head>
<body>
<div><h1>HTML content to render:</h1>

    <div id="content">
        <img src="./images/127597554.jpg" height="200" width="200">
        Hello <strong>visiting</strong> guest
    </div>

</div>
<h1>Existing canvas:</h1>
<canvas width="500" height="200"></canvas>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");
    var ctx = canvas.getContext('2d');
document.querySelector("button").addEventListener("click", function() {
        html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
            console.log('Drew on the existing canvas');
        });
    }, false);

</script>
</body>
</html>

我尝试了一些第三方api来实现图像但是它们是一个限制。所以我想使用代码实现这一点。我怎么能做到这一点。

我想要一张下面caode的图片

<div><h1>HTML content to render:</h1>

    <div id="content">
        <img src="./images/127597554.jpg" height="200" width="200">
        Hello <strong>visiting</strong> guest
    </div>

</div>

我想得到像这样的结果

Answer 1

使用rasterizeHTML.js：

来自示例：

<canvas id="canvas" width="400" height="200"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");

    rasterizeHTML.drawHTML(
        '<div><h1>HTML content to render:</h1>' + 
        '    <div id="content">' + 
        '        <img src="./images/127597554.jpg" height="200" width="200">' + 
        '        Hello <strong>visiting</strong> guest' + 
        '    </div>' + 
        '</div>',
        canvas);
</script>

或者只是：

rasterizeHTML.drawURL("http://example.net", canvas);

要下载图像，请使用canvas2image（带有隐藏的画布）：

Canvas2Image.saveAsPNG(canvas, width, height);

在客户端上进行渲染的主要优点是html可以是用户特定的，服务器不必渲染图像。

Answer 2

您可以将html嵌入到svg中以在画布上呈现它，例如

HTML：

<canvas id="canvas" style="border:2px solid black;" width="160" height="43"></canvas>

JS：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +
            '<foreignObject width="100%" height="100%">' +
            '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
                '<em>I</em> like ' +
                '<span style="color:white; text-shadow:0 0 2px blue;">' +
                'SO</span>' +
            '</div>' +
            '</foreignObject>' +
            '</svg>';

var DOMURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], { type: 'image/svg+xml;charset=utf-8' });
var url = DOMURL.createObjectURL(svg);

img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);
}

img.src = url;

小提琴：https://jsfiddle.net/qkvu7fmL/

我无法找到对此示例原始来源的引用 - 如果有人知道 - 请添加信用作为评论。

如何将包含（图像标记和某些文本）的HTML代码或数据转换为图像以供下载

2 个答案: