Question

我正在使用html2canvas将div转换为image。这是工作
谷歌字体效果中的精细预期这是图像，你可以看到它如何删除
文字的效果。

这是我正在使用的代码。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to canvas to HTML</title>

    <link rel="stylesheet" type="text/css"
          href="https://fonts.googleapis.com/css?family=Anton
                &effect=ice">

    <script src="jquery-3.1.0.min.js"></script>
    <script src="html2canvas.js"></script>
    <script src="main.js"></script>
    </head>
<body>
<div id="canvas">
    <span class="font-effect-ice" style="font-family: Anton; font-size:50px">This is some text.</span>
</div>
<button onclick="generateImage()">Click</button>

<div id="img-out"></div>

</body>
</html>

以下是javascript代码。

function generateImage(){

var imageContainer = $('#canvas');

html2canvas(imageContainer, {
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image
            $("#img-out").append(canvas);
            // Clean up
            //document.body.removeChild(canvas);
        }
});     

}

任何人都可以告诉我为什么这不起作用。

Answer 1

我已尝试过代码。我相信它的发生是因为冰效果实际上是使用-webkit-mask-image覆盖在文本上的图像。

意思是它不完全是文本的一部分，而是文本顶部的图像。 HTML2canvas使用canvas div中的内容，而不是它上面的任何图像。

使用javascript将HTML转换为图像

1 个答案: