使用JavaScript将Div图像保存至主机时生成空白图的问题解决

我希望通过JavaScript将指定Div的内容保存为图片并上传至主机，当前代码可将图像展示在Div中，但保存后的图片为空白状态。

原代码 #

index.php #

var bottleCanvas = document.getElementById('kanepe');
var dataURL = bottleCanvas.toDataURL("image/png");
var anchor = document.createElement('a');
anchor.href = dataURL;
anchor.download = 'screenshot.png';
anchor.innerHTML = '<img width="100" height="100" src=' + dataURL + '>download';
document.getElementById('output').appendChild(anchor);


$.ajax({
    url: "upload.php",
    type: "POST",
    data: 'image=' + dataURL,
    success: function(cikti2){
        alert(cikti2);
    }
})

upload.php #

if ( isset($_POST["image"]) && !empty($_POST["image"]) ) {    

    // get the dataURL
    $dataURL = $_POST["image"];  

    // the dataURL has a prefix (mimetype+datatype) 
    // that we don't want, so strip that prefix off
    $parts = explode(',', $dataURL);  
    $data = $parts[1];  

    // Decode base64 data, resulting in an image
    $data = base64_decode($data);  

    // create a temporary unique file name
    $file = "resimler/" . uniqid() . '.png';

    // write the file to the upload directory
    $success = file_put_contents($file, $data);

    
    print $success ? $file : "Unable to save this image."; 
}

toDataURL()是Canvas元素的专属方法，普通Div元素没有这个方法，直接调用会生成无效的dataURL，最终导致保存的图片空白。

要把Div内容转为图片，需要先将Div渲染到Canvas上，再通过Canvas生成有效的dataURL。以下是两种可行方案：

方案一：使用html2canvas（推荐） #

这是处理Div转图片最常用的轻量库，对复杂样式、图片的兼容性更好。

1. 先引入html2canvas库（可通过CDN或本地文件引入）
2. 修改JavaScript代码，将Div内容绘制到Canvas后再生成dataURL

修改后的index.php代码 #

// 引入html2canvas后执行以下代码
html2canvas(document.getElementById('kanepe'), { useCORS: true }).then(canvas => {
    var dataURL = canvas.toDataURL("image/png");
    
    // 创建下载链接
    var anchor = document.createElement('a');
    anchor.href = dataURL;
    anchor.download = 'screenshot.png';
    anchor.innerHTML = '<img width="100" height="100" src="' + dataURL + '">download';
    document.getElementById('output').appendChild(anchor);
    
    // 上传图片（用对象传参避免编码问题）
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: { image: dataURL },
        success: function(cikti2){
            alert(cikti2);
        }
    });
});

方案二：原生API实现（仅适用于简单Div内容） #

如果不想引入第三方库，可手动通过SVG转Canvas的方式实现，但对复杂样式、跨域图片支持有限：

var targetDiv = document.getElementById('kanepe');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 设置Canvas宽高与Div一致
canvas.width = targetDiv.offsetWidth;
canvas.height = targetDiv.offsetHeight;

// 将Div转为SVG后绘制到Canvas
var svg = new XMLSerializer().serializeToString(targetDiv);
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    
    // 创建下载链接
    var anchor = document.createElement('a');
    anchor.href = dataURL;
    anchor.download = 'screenshot.png';
    anchor.innerHTML = '<img width="100" height="100" src="' + dataURL + '">download';
    document.getElementById('output').appendChild(anchor);
    
    // 上传图片
    $.ajax({
        url: "upload.php",
        type: "POST",
        data: { image: dataURL },
        success: function(cikti2){
            alert(cikti2);
        }
    });
};
img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);

额外注意事项 #

1. 确保服务器上的resimler目录存在且具备写入权限，否则upload.php无法保存图片
2. 如果Div包含跨域图片，html2canvas需添加useCORS: true参数才能正常渲染图片
3. 用对象形式传递POST数据（{ image: dataURL }），避免直接拼接字符串导致的URL编码问题

内容的提问来源于stack exchange，提问作者fcozsargin