当前位置：文江博客话题详情

使用JavaScript获取用于移动视图的HTML元素的屏幕截图

发布于 2025-01-22 00:24:13 字数 1021 浏览 4 评论 0原文

几天前，我开始与HTML2Canvas合作，经过一些研究，我设法编码了一些脚本，可以将特定的HTML Div保存为PNG。（我在这里保存一张表）

我从桌面上获得的图像。

桌面屏幕截图

但是，当我从移动视图中获取屏幕截图时，它显示了元素时，它显示了元素是。

移动屏幕截图

现在我知道，我知道canvas会像显示的那样绘制屏幕/div，但我想保存，但我想保存整个桌子而不是一半滚动。有什么办法可以在不更改桌子样式的情况下做到这一点？

代码

    $(document).on('click', '#takePic', function(){
   html2canvas(document.getElementById("final_order"),{
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
        var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
        $.ajax({
        url: 'save-image.php',
        type: 'post',
        data: {action: "download",image: base64URL},
        success: function(data){
            alert("Success");
        }
        });
    });
});

任何帮助或指导将不胜感激。

原文

I started working with HTML2Canvas a few days ago and with some research, I managed to code a little script with which I can save a specific HTML div as a png. (I'm saving a table here)

The image I get from the desktop.

Desktop Screenshot

But the issue is, when I take the screenshot from mobile view, it shows the element as it is.

Mobile Screenshot

Now I know the canvas will paint the screen/div as displayed but I want to save the whole table instead of half scrolled. Is there any way to do this without changing the style of the table?

Code

    $(document).on('click', '#takePic', function(){
   html2canvas(document.getElementById("final_order"),{
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
        var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
        $.ajax({
        url: 'save-image.php',
        type: 'post',
        data: {action: "download",image: base64URL},
        success: function(data){
            alert("Success");
        }
        });
    });
});

Any assistance or guidance would be greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凉栀 2025-01-29 00:24:13

可能有更好的方法来解决它，但这是我使用的方法。

首先删除html表响应类

document.getElementById('table-you-want-convert').classList.remove("table-responsive");

将html2canvas函数更改为

html2canvas(document.getElementById("table-you-want-convert"),{
    windowHeight: window.outerHeight + window.innerHeight,
    windowWidth: window.outerWidth + window.innerWidth,
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
         //save or download image
         //add responsive class again
        document.getElementById('table-you-want-convert').classList.add("table-responsive");       

   }

There might be better ways to solve it but this is the one I used.

First remove Html table responsive class

document.getElementById('table-you-want-convert').classList.remove("table-responsive");

Change html2canvas function to

html2canvas(document.getElementById("table-you-want-convert"),{
    windowHeight: window.outerHeight + window.innerHeight,
    windowWidth: window.outerWidth + window.innerWidth,
    allowTaint: true,
    useCORS: true,
   })
    .then(function(canvas) {
         //save or download image
         //add responsive class again
        document.getElementById('table-you-want-convert').classList.add("table-responsive");       

   }

回复收藏 0 原文

~没有更多了~