相关疑难解决方法(0)

我正在使用HTML2canvas .4.1渲染屏幕截图,并希望将图像保存到用户的本地计算机.如何实现这一目标？请注意我是初学者,因此实际代码对我最有帮助.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="html2canvas.js"></script>

<button id="save_image_locally">download img</button>

   <div id="imagesave">
      <img id='local_image' src='img1.jpg'>
   </div>

<script>

    $('#save_image_locally').click(function(){

            html2canvas($('#imagesave'), 
             {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png");
                    alert('This will currently open image in a new window called "data:". Instead I want to save to users local computer. Ideally as a jpg instead of png.');
                    window.open(img);
                }
             });
            });

</script>

我在通过 html2canvas 将 div 渲染为图像时遇到问题。

这是我的 javascript 代码：

function saveImages(i)
        {
            html2canvas($("#page"+i), {
                logging:true,
                onrendered: function(canvas){
                    var url = canvas.toDataURL();
                    $.post("saveImage.php", {"path": url, "index":i}, function(data){
                        var p = Math.round(((i+1)/totalPages)*100);
                        $("#progressGraphical").css("width", p+"%");
                        if(p>=100){p = "fertig!"}else{p += "%";}
                        $("#progress").html((i+1)+"/"+totalPages+" Seiten gespeichert - "+p);
                        if(i<totalPages) saveImages(i+1);
                    });
                }
            });
        }
        $(document).ready(function(){
            saveImages(0);
        });

由于使用 jquery 函数完成后请求，我不得不递归地工作。请求的 php 文件采用由 canvas.toDataUrl-Method 生成的 base64 编码 url，对其进行解码并将其保存到名为“page0/1/2/.../n.png”的图像文件中。

所有这些工作正常 - 直到超过大约 24 次递归调用的总数。如果是这种情况，那么 html2canvas 生成的所有图像（甚至是第 24 次递归调用之前的图像）都被绘制为空白。我已经看过 base64 编码的 url - 只有两个相等的字符串交替出现。

错误在哪里？

我正在使用javascript库html2canvas来保存我的项目表.它工作正常,但是当我保存图像时,它显示PNG的透明背景颜色和jpeg的背景颜色黑色.这是我做的:

<script>
        window.onload = function(){
              html2canvas(document.getElementById("tablePng"),{
                    onrendered: function(canvas){
                    var img = canvas.toDataURL('image/jpeg');
                    $('#saveTable').attr('href',img);
                  }
              });
      };
</script>

执行上述操作将保存图像,但背景颜色将为黑色,更改var img = canvas.toDataURL('image/png');背景时将保持透明.并在文档中添加背景说:

    <script>
        window.onload = function(){
              html2canvas(document.getElementById("tablePng"),{
                    background: "#fff",
                    onrendered: function(canvas){                     
                    var img = canvas.toDataURL('image/jpeg');
                    $('#saveTable').attr('href',img);
                  }
              });
      };
</script>

什么都不会改变......给予透明.

那么如何更改背景底色以便保存的图像可以轻松读取？

这看起来应该是一件简单的事情，但它非常困难。

我只是有一个 div DOM 元素，里面有一些文本。

我正在调用 html2canvas 方法，它正在查找。

唯一的问题，画布有白色背景！

我试过：

• 将选项对象上的背景属性设置为 null
• 在画布和生成它的 DOM 元素上显式地将 CSS 背景属性更改为透明

不幸的是，似乎没有任何效果。

希望有一个优雅的解决方案，但快速破解是可以的。