PHP 實現截圖粘貼上傳：前端 clipboardData + 後端 Base64 解碼

原理：監聽 paste 事件 → FileReader 讀取圖片 → Base64 → AJAX POST → PHP 解碼保存

前端 HTML + JavaScript

<div id="box" contenteditable></div>
<input type="hidden" name="img" value="" id="img_puth"/>
<script>
document.querySelector('#box').addEventListener('paste', function(e) {
    if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
        var that = this, reader = new FileReader();
        var file = e.clipboardData.items[0].getAsFile();
        reader.onload = function(e) {
            var xhr = new XMLHttpRequest(), fd = new FormData();
            xhr.open('POST', '', true);
            xhr.onload = function() {
                var img = new Image();
                img.src = xhr.responseText;
                document.getElementById("img_puth").value = img.src;
                that.innerHTML = '<img src="' + img.src + '" alt=""/>';
            };
            fd.append('file', this.result); // Base64 字符串
            xhr.send(fd);
        };
        reader.readAsDataURL(file);
    }
}, false);
</script>

後端 PHP 接收並保存

<?php
header("Access-Control-Allow-Origin:*");
$url = 'https://' . $_SERVER['HTTP_HOST'];
$file = isset($_POST["file"]) ? $_POST["file"] : '';
if ($file) {
    // 移除 data:image/png;base64, 前綴
    $data = base64_decode(str_replace('data:image/png;base64,', '', $file));
    $name = md5(time()) . '.png';
    file_put_contents($name, $data);
    echo $url . '/' . $name;
    exit;
}
?>

注意：僅處理 PNG 格式（截圖默認 PNG），生產環境需增加文件類型驗證、大小限制、存儲路徑管理等安全措施。