那些遇到过的问题

标签: html2canvas

模态对话框中可滚动 div 上的 HTML2canvas

嗨，我正在使用 HTML2canvas 插件在模态对话框中转换 DIV。转换工作正常。但是那个 div 有垂直滚动。所以在最终图像上，滚动隐藏区域后没有任何转换。只有 div 的可见顶部在渲染图像中。那么如何将整个 div（与滚动无关）转换为图像..这是我的代码

            $('#modal_sidebyside .modal-content').html2canvas({
            onrendered: function (canvas) {
                //Set hidden field's value to image data (base-64 string)
                $('.export-sidebyside').hide();
                //$('#modal_sidebyside .modal-body').css({ 'overflow-y': 'auto', 'height': 'auto' });
                //$('#modal_sidebyside .modal-content').css({ 'overflow-y': 'auto', 'height': 'auto' });

                var img = canvas.toDataURL('image/jpeg');
                var link = document.getElementById("download-sidebyside");
                link.download = "SidebySide.jpg"; //Setup name file
                $(link).html("Download");
                link.href = img.replace(/^data[:]image\/(png|jpg|jpeg)[;]/i, "data:application/octet-stream;");
                $('.export-sidebyside').show();
               // $('#modal_sidebyside .modal-body').css({ 'overflow-y': 'auto', 'height': '80%' });
               // $('#modal_sidebyside .modal-content').css({ 'overflow-y': 'auto', 'height': '100%' });

                //document.body.appendChild(link);

            }
        });
Run Code Online (Sandbox Code Playgroud)

jquery html2canvas

San*_*mas
lucky-day
6
推荐指数
0
解决办法
1525
查看次数

html2canvas、jsPDF - 如何为“合法信函”PDF 页面缩放/调整页面大小？

我用整个创建PDF document.body，把它变成一个画布，并传递一个到jsPDF。但是图像/画布太宽了。我想为页面缩放它，但jsPDF没有像素大小作为度量。

选项是：pt、mm、cm。我如何正确调整大小？如果需要，我如何缩放我的图像？

我应该使用该addImage函数进行缩放，还是通过使用 canvas.getContect("2d") 并在新画布上绘图？

html2canvas(
    document.body,
    {
        //When the canvas is created, our callback
        onrendered: function(canvas)
        {         
            //Create jsPDF with what measurements?
            var doc = new jsPDF('p', 'pt');

            /*
             * Put image on page. Are these measurements
             * in pts? How does that compare to pixels?
             *
             * Is the x/y (the 10, 10) the x and y in the image?
             * Or in the …
Run Code Online (Sandbox Code Playgroud)

html javascript canvas html2canvas jspdf

Don*_*mmy
lucky-day
6
推荐指数
1
解决办法
2867
查看次数

使用 html2canvas 截屏 MapBox 创建黑色 jpg

我设法在硬盘上保存了使用 html2canvas 通过 Google Maps API 生成的地图的屏幕截图。我现在尝试使用 MapBox API 做同样的事情，但我在硬盘上得到的只是一张黑屏 jpg。

这是我的 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
        <script src="js/html2canvas.js"></script>
    </head>

    <body onload="initialize()">
        <div id="map"></div>
        <script src="js/coordinates.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

使用此 CSS 全屏显示：

html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { width: 100%; height: 100%; }
Run Code Online (Sandbox Code Playgroud)

这个 JS 脚本用于创建地图并截取屏幕截图：

mapboxgl.accessToken = 'pk.eyJ1IjoiZ2luZ2FsYWJ2IiwiYSI6ImNpaWluNXIzbDAwMjB3ZG02c2hmNGhhMnUifQ.5SC9qnrK7eEdAtwv5Z0S_Q';

var latitude = 48.858565;
var longitude = 2.347198;

function initialize()
{
    var map = new mapboxgl.Map( …
Run Code Online (Sandbox Code Playgroud)

javascript html2canvas mapbox

Bil*_*age
2017 05-23
6
推荐指数
2
解决办法
5899
查看次数

盒影问题？

我正在尝试使 CSS box-shadow 在 html2canvas 中工作。在最后一个包（1.0.0 alpha 12）中搜索我找不到 boxShadow 的提及。事实上，我发现它只有在我使用旧版本 0.5.6 时才有效（https://cdn.jsdelivr.net/npm/html2canvas-fixes@0.5.6/dist/html2canvas.js）：我很困惑，因为在那个版本中有一个用于 boxShadow 渲染的部分。在以下版本中它似乎消失了。

当我将 cdn 链接添加到 0.5.6 时，框阴影仅呈现 x（水平）。我可以知道其他人是否有这个问题吗？谢谢你。

html2canvas

MRO*_*VIC
2018 05-26
6
推荐指数
0
解决办法
754
查看次数

如何使用 JavaScript 在 PDF 中截取屏幕截图

我正在使用 Html2Canvas 捕获屏幕截图 我想以 PDF 文件形式输出 现在我正在以 png 图像输出 如何转换或获取 pdf 输出

function genScreenshot() {
    html2canvas(document.body, {
      onrendered: function(canvas) {
      $('#box1').html("");
            $('#box1').append(canvas);

      if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                    navigator.userAgent.match(/Trident.*rv\:11\./)) 
            {
        var blob = canvas.msToBlob();
        window.navigator.msSaveBlob(blob,'Test file.png');

      }
      else {

        $('#test').attr('href', canvas.toDataURL("image/png"));
        $('#test').attr('download','Test file.png');
        $('#test')[0].click();
         }


      }
    });
}
Run Code Online (Sandbox Code Playgroud)

html javascript pdf png html2canvas

The*_*Bus
lucky-day
6
推荐指数
1
解决办法
2万
查看次数

html2canvas 未定义

我正在使用 angularjs 和 php 开发我的项目，需要保存一个将在最后生成的证书，带有内容的证书是动态创建的，但right click->save as由于它不是图像而无法创建，所以我为此使用了画布，但它似乎没有帮助。

我将它包含在我的 HTML 文件的 head 标签中

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js">
</script>
Run Code Online (Sandbox Code Playgroud)

但它仍然说“未定义 html2canvas”

我的 HTML 代码：

<div class="userCertificate" id="html-content-holder">
    <div class="secondborder">
        <img src="images/ISRO_Logo.png" height="80px" alt="ISRO_LOGO" style="text-align: left">
        <div class="content">
            <h2 style="color:#f47216">NATIONAL REMOTE SENSING CENTRE</h2>
            <br>
            <h1>Certificate Of Appreciation</h1>
            <br>
            <p>This certificate is awarded to </p>
            <h1><span class="Name"> {{studentname}} </span></h1>
            <p>from <span class="collegeName">{{collegeName}}</span> for succesfully qualifying online quiz exam with score of <span class="collegeName">{{marks}}</span> %</p>
            <p> conducted on 6/06/2019</p>
        </div>
        <img src="images/stamp.PNG" height="80px" alt="ISRO_LOGO" style="float: …
Run Code Online (Sandbox Code Playgroud)

canvas html2canvas

Nik*_*lbv
2019 06-11
6
推荐指数
0
解决办法
3037
查看次数

html2pdf 取消隐藏后不会打印隐藏的 div 吗？

我正在尝试使用 html2pdf 创建 PDF。我希望 html2pdf 捕获隐藏的 div，为此，我尝试在创建 PDF 时短暂“取消隐藏”我的 div，然后在生成 PDF 后“重新隐藏”div：

function generatePDF() {
    // Choose the element that our invoice is rendered in.
    const element = document.getElementById("nodeToRenderAsPDF");
    // Display the PDF div
    $(element).css("display", "block");
    // Choose the element and save the PDF for our user.
    html2pdf(element);
    //Hide the PDF div
    $(element).css("display", "none");
}
Run Code Online (Sandbox Code Playgroud)

但是当 PDF 打印时，我的 div 不在那里。我相信我曾经尝试使用 html2pdf 提供的回调函数重新隐藏 div，并且它有效；但是，我隐藏的 div 会短暂出现在屏幕上（0.5-1 秒），而 PDF 会在消失之前生成。我不能让这种事发生。另外，我不太喜欢将 div 放置在远离视口的地方来补偿隐藏问题，因为我听说这种方法与某些浏览器发生冲突。

我有什么办法可以解决这个问题吗？非常感谢任何帮助。谢谢！

javascript pdf-generation html2pdf html2canvas jspdf

Aar*_*den
lucky-day
6
推荐指数
1
解决办法
4967
查看次数

如何修复 Angular 中的“错误 TS2349：此表达式不可调用”

我试图使用 Canvas 制作报告。ng serve 但是当我使用“我需要修复此问题”启动服务器时发生此错误。那么，我该如何修复这个错误呢？

在文件代码.ts如下，

import * as html2canvas from 'html2canvas';
Run Code Online (Sandbox Code Playgroud) 
 html2canvas(document.getElementById('result-table')).then(canvas => {
      let dateX = new Date();
      var imgWidth = 208;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      const contentDataURL = canvas.toDataURL('image/png')
      let pdf = new jsPDF('p', 'mm', 'a4'); 
      var position = 30;

      pdf.line(1, 1, 208, 1);
      pdf.text("Results", (imgWidth / 3.3), 12)
      pdf.line((imgWidth / 2.5) - 4, 15, 121, 15);
      pdf.setFontSize(9);
      pdf.text(`Category: ${this.dataArrr[0].cat_id}`, 5, 17) …
Run Code Online (Sandbox Code Playgroud)

html2canvas typescript angular

Tha*_*han
lucky-day
6
推荐指数
1
解决办法
3477
查看次数

Html2canvas 忽略图像的对象拟合

我一直在尝试利用 html2canvas 来截取元素的屏幕截图

我注意到 div 元素内使用 object-fit 属性的图像在 html2canvas 屏幕截图后被拉伸

有没有为此散步。这是我的代码

<script>window.addEventListener('load', function () {

      
 var bigCanvas = $("<div>").appendTo('body');
 var scaledElement = $("#Element").clone()
 .css({
  'transform': 'scale(1,1)',
  'transform-origin': '0 0'
 })
 .appendTo(bigCanvas);
 
 var oldWidth = scaledElement.width();
 var oldHeight = scaledElement.height();

 var newWidth = oldWidth * 1;
 var newHeight = oldHeight * 1;
 
 bigCanvas.css({
   'width': newWidth,
   'height': newHeight
 })


 html2canvas(bigCanvas, {
   onrendered: function(canvasq) {
   var image = document.getElementById('image');
  image.style.width='300px';
 
   image.src = canvasq.toDataURL();
   
    bigCanvas.remove() ;
   }
 });}) </script>
Run Code Online (Sandbox Code Playgroud)

虽然 html 是这样的

<div id="Element" …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery html5-canvas html2canvas

pre*_*us_
2023 05-05
6
推荐指数
1
解决办法
3097
查看次数

jsPDF/html2canvas 通常会丢失空格和文本错位

我正在使用 html2canvas 和 jsPDF 生成 pdf 客户端。无论我选择什么设置，我都会在 html 到 pdf 渲染中丢失字母空格。

有设置可以解决这个问题吗？我已经检查了 API 并更改了我能想到的所有可能的设置，但间距没有改变。

显示空间损失的图像

之前（在浏览器中为 html）：

在此输入图像描述

之后（pdf）：

在此输入图像描述

代码

代码使用 html2canvas 和 jsPDF。

async pdfOrder() {
    const doc = new jsPDF({
      orientation: "p",
      unit: "mm",
      format: "a4",
      precision: 5
    });
    const options = {
      background: "white",
      scale: 3
    };

    for (let i = 0; i < this.numberOfPages; i++) {
      const div = document.getElementById("html2Pdf-" + i.toString());
      // create array of promises
      await this.addPage(doc, div, options, i);
    }

    // Name of pdf …
Run Code Online (Sandbox Code Playgroud)

html2canvas jspdf angular

And*_*len
2021 10-25
6
推荐指数
1
解决办法
4499
查看次数

标签 统计

html2canvas ×10

javascript ×5

html ×3

jspdf ×3

angular ×2

canvas ×2

jquery ×2

html2pdf ×1

html5-canvas ×1

mapbox ×1

pdf ×1

pdf-generation ×1

png ×1

typescript ×1