Javascript DOM将屏幕截图创建为PNG文件

我正在使用

html2canvas.js

创建网页的屏幕截图。唯一的问题是，我不知道如何将这些数据转换为图像文件格式，以便保存并链接到数据库中

这是我当前的代码：

setInterval（函数（）{
html2canvas（document.body{
onrendered:函数（canvas2）{
drawImage（视频，0,0,240,180）；
美元邮政(
“'.self:：获取链接（'保存屏幕截图'）”，
“用户\u id=”。模块\u安全：：获取\u日志数据\u id（）。
“&screenshot=“+encodeURI（canvas2.toDataURL（））
);
document.body.appendChild（canvas2）
}
})
}, 1*60*1000);

这可能会帮助您：

<?php
    // requires php5
    define('UPLOAD_DIR', 'your/images/directory/');
    $img = $_POST['img'];
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $img_file = UPLOAD_DIR . uniqid() . '.png';
    $success = file_put_contents($img_file, $data);
    if($img_file){
        // store the link to database
    } else{
       //return error msg
    }

?>

---

您应该让jQuery为您处理请求编码：

$.post(url, {
    user_id: 123,
    screenshot: canvas2.toDataURL()
}, function() {
    // success
    document.body.appendChild(canvas2);
});

然后，在服务器端对其进行解码：

$data = base64_decode(substr(
    $_POST['screenshot'], 
    strpos($_POST['screenshot'], ',') + 1
));

---

在toDataURl（“image/png”）之后，您将获得base64格式的数据。您的意思是如何在服务器端处理此base64数据吗？是的，最初的想法是通过PHP脚本运行base64数据并将其上载到数据库。但如果不可能，我希望将数据保存为.png文件，并将其存储在带有数据库链接的images目录中。这是可能的，但我不认为将图像数据存储到数据库中是最佳实践。所以我建议把它存到图片目录里。我不完全理解你的帖子。请你再解释一下好吗？@jfh6哪一部分你不懂？@jfh6好吧，

canvas2.toDataURL（）

的值由jQuery编码，以确保

+

不会意外地变成空格。。。它在内部使用

encodeURIComponent（）。。。请求主体看起来像“user_id=123&screenshot=data%3Aimage/png%3Bbase64%2C”。哦，好吧，我不知道jquery是在内部这么做的。谢谢你提供的信息。我不能对你的帖子投赞成票，因为我在堆栈溢出方面的声誉很低，或者我会的，谢谢你提供的这个有用的提示。