如何将 HTML 5 Canvas 保存为服务器上的图像？

将 HTML 画布保存为图像非常简单，只需右键单击画布并将其保存为图像即可。但是将画布保存为服务器上的图像是完全不同的。本文将向您展示如何实现这一目标。有时需要在服务器处理后保存画布图像，本文将有助于通过服务器发送画布图像进行处理。

在这里，您将看到如何使用 JQuery 将 HTML 内容转换为图像。我们知道有一个插件 html2canvas，通过使用该插件，我们可以轻松地将 HTML 内容转换为图像内容，然后我们可以通过右键单击并选择保存图像选项来保存该文件。

之后，我们将 CANVAS 图像转换为 URL 格式，并使用 ajax 将其转换为服务器，之后主要部分将由PHP代码完成。 PHP代码会将该图像保存在您的服务器上。

以下步骤将清楚地说明该方法。

第 1 步：将画布转换为图像的 HTML 代码。

  

    
    
    
    
    
    
    
    
    
        .top {
            margin-top: 20px;
        }
          
        h1 {
            color: green;
        }
          
        input {
            background-color: transparent;
            border: 0px solid;
            width: 300;
        }
          
        body {
            text-align: center;
        }
    

  

  
    
        
            GeeksforGeeks
            How to save an HTML5 Canvas as an 
                           image on a server?
            
            
        
        
            Create Image
        
            
        
    
    
        $(function() {
            $("#geeks").click(function() {
                html2canvas($("#createImg"), {
                    onrendered: function(canvas) {
                        var imgsrc = canvas.toDataURL("image/png");
                        console.log(imgsrc);
                        $("#newimg").attr('src', imgsrc);
                        $("#img").show();
                        var dataURL = canvas.toDataURL();
                        $.ajax({
                            type: "POST",
                            url: "script.php",
                            data: {
                                imgBase64: dataURL
                            }
                        }).done(function(o) {
                            console.log('saved');
                        });
                    }
                });
            });
        });
    

  

第 2 步：显示输出以检查画布是否已成功转换为图像。

• 在点击按钮之前：
  
• 点击按钮后：
  

第 3 步：使用 canvas.toDataURL() 方法将图像转换为 URL 格式。

var dataURL = canvas.toDataURL();

第 4 步：通过 Ajax 将转换后的 URL 格式发送到您的服务器。

$.ajax({
    type: "POST",
    url: "script.php",
    data: { 
        imgBase64: dataURL
    }
}).done(function(o) {
    console.log('saved'); 
});

第 5 步：此PHP代码会将图像保存到服务器中。

在评论中写代码？请使用 ide.geeksforgeeks.org，生成链接并在此处分享链接。