标签: html2canvas

我正在使用 html2canvas 将 html 内容渲染为图像。但它仅支持单词之间的单个空格，并且所有文本仅支持在一个中显示。

Example 1

if text is  `Word1      Word2` it become to `word1 word2`

Example 2

This is First line 
This is Second Line 

Image: 

THis is First line This is Second Line

我查看了 html2canvas 代码，我相信下面这两个函数负责绘制文本和空格。帮助我如何实现我的目标。

  function renderText(el, textNode, stack) {
    var ctx = stack.ctx,
    color = getCSS(el, "color"),
    textDecoration = getCSS(el, "textDecoration"),
    textAlign = getCSS(el, "textAlign"),
    metrics,
    textList,
    state = {
      node: textNode,
      textOffset: 0
    };

    if (Util.trimText(textNode.nodeValue).length > 0) {
      textNode.nodeValue = textTransform(textNode.nodeValue, getCSS(el, "textTransform")); …

我有 3 个画布，即 canvasTarget、canvasTarget2、canvasTarget3，如下所示：

        var canvas = document.getElementById("canvasTarget");
        var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        var canvas2 = document.getElementById("canvasTarget2");
        var img2 = canvas2.toDataURL("image/png").replace("image/png", "image/octet-stream");
        var canvas3 = document.getElementById("canvasTarget3");
        var img3 = canvas3.toDataURL("image/png").replace("image/png", "image/octet-stream");

我想将这些画布元素合二为一并下载为 JPEG 或 PDF 文件。我正在使用 /html2canvas.js 下载这个。任何立即回应将不胜感激。

我正在尝试将所有内容作为图像保存到另一个页面中。

我已经探索了执行此操作的方法，因此我认为我需要首先将该页面转换为画布。

因此，我尝试使用要先将其保存为 iframe 的链接，然后将 iframe 转换为画布，但它不起作用。

$(document).ready(function(){

    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
        html2canvas(element, {
            onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
            }
        });
    });

    $("#btn-Convert-Html2Image").on('click', function () {
        var imgageData = getCanvas.toDataURL("image/png");
        // Now browser starts downloading it instead of just showing it
        var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
        $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
    });

});

<script src="http://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="html-content-holder" width="100%" height="100%" src="http://api.marketanyware.com/chartv2/engine/index.html?{bodyColor:%27#000000',api:{params:[{Stock:'SET',Period:'2hour',ChartList:{OHLC:true,EODHLine:true,EMA: [5, 10, 25, 50, 75, …

我有一个显示图形的画布，我正在尝试使用 html2canvas() 和以下代码截取画布的屏幕截图：

<div class="chartContainer" id="chart1"></div>
<div id="displayCanvas" style="display:none;" class="stx-dialog"></div>

html2canvas($('#chart1'),{onrendered:function(canvas1) 
{$('#displayCanvas').append(canvas1)}});

在这里，当图表容器被加载时，它使用 id 为“displayCanvas”的 div 并附加画布的屏幕截图。

如何下载显示的画布的屏幕截图？ 我已经尝试使用类似下面的东西来下载图像：

var link = document.createElement('a');
link.download = stx.chart.symbol+".png";
link.href = stx.chart.canvas.toDataURL("png");
link.click();

但它只将画布上的数据下载为没有背景的图像（它不下载屏幕截图而只下载数据），下载后打开时会显示黑屏，其中包含数据。任何人都可以帮助我如何直接下载从 html2Canvas() 截取的屏幕截图的图像吗？

我知道已经提出了很多问题和问题。但我找不到明确的答案来解决这个问题。

我html2canvas用来截图我的页面 - 来自amazon s3（cloudfront，也是）

我尝试了几乎所有来自 SO 和 html2canvas 问题的答案。

我设置了我的 S3 CORS 以允许所有/还将我的存储桶设置为公共。我也给了所有人的所有公共访问权限（只是为了测试它是否有效。部署后我会阻止它们）

这是我的 s3 CORS

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

还有我的桶政策

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:PutObjectAcl",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::ubkorea/*"
        }
    ]
}

当我用 curl 向我的图像发送请求时，它有安静的正常响应Access-Control-Allow-Origin。下面是我的回复。

HTTP/1.1 200 OK
x-amz-id-2: 2v8iSfy/9yvLRe+CFiUqEjUz96IcRC86t1m7IBy1NDakkYIriumosvVYECeYgcPAcCW1axpwF00=
x-amz-request-id: 4ADD8456071CE5C3
Date: Fri, 13 …

我使用以下代码将可见图像保存为图像。

html2canvas(document.querySelector('.specific'), {
        onrendered: function(canvas) {
        theCanvas = canvas;
        Canvas2Image.saveAsPNG(canvas); 
    }
});

有什么办法可以保存隐藏的

html2canvas我正在尝试使用和从 HTML 创建 PDF jsPDF。首先，我获取所有想要传递给 PDF 的 html 元素image，然后将它们一一添加，如下所示：

   var quality = 1
   var report1 = null
   var report2 = null
   var report3 = null
   var report4 = null
   var report5 = null
   var header = null

   html2canvas(document.querySelector('header'), {scale: quality})
        .then(canvas => {
            header = canvas
            html2canvas(document.querySelector('#report-1'), {scale: quality})
            .then(canvas => {
                report1 = canvas
                html2canvas(document.querySelector('#report-2'), {scale: quality})
                .then(canvas => {
                    report2 = canvas
                    html2canvas(document.querySelector('#report-3'), {scale: quality})
                        .then(canvas => {
                            report3 = canvas
                            html2canvas(document.querySelector('#report-4'), {scale: quality}) …

我使用 html2canvas 2016 (0.5.0) 版本很长一段时间，因为它总是能很好地满足我的需要。现在我必须切换到当前版本，但我遇到了一些问题：

创建的图像不再有圆角。png 始终是矩形。现在我问自己是否做错了什么，或者这是否可能是当前版本的 html2canvas 中的一个错误？在将其作为“问题”发布到 GitHub 上之前，我想先在这里问一下。

2016 0.5.5版本的结果：https://i.stack.imgur.com/3IPcs.png（圆角）2019 1.0.0
版本 的结果： https: //i.stack.imgur.com /ba2JB.png（矩形角）

body {
  font-family: system-ui, Helvetica, Arial, sans-serif;
  margin: 19px 20px 0 20px;
  background-color: #000;
}
#wrapper {
  position: absolute;
  white-space: nowrap;
}
#badge {
  padding: 70px 67px 63px 71px;
  border: 13px solid #a6a6a6;
  border-radius: 110px;
  line-height: 1;
  background-color: #000;
  color: #fff;
}
.icon img {
  width: …