如何自定义paste.image.js插件并将粘贴的Blob图片转为Base64保存？

我来帮你搞定paste.image.js粘贴图片后的Base64转换和保存问题，咱们分前端JavaScript处理和后端PHP处理两部分来实现：

一、前端：获取Blob URL并转换为Base64 #

paste.image.js在检测到粘贴操作后会生成Blob URL，我们需要在插件的回调逻辑里拿到这个URL，再通过fetch获取Blob对象，最后用FileReader将其转成Base64格式，再发送给后端PHP。

示例代码：

// 初始化paste.image.js插件
new PasteImage(document.body, {
  success: function(blobUrl) {
    // 拿到插件返回的Blob URL，格式类似 blob://local/xxxxxx
    console.log('生成的Blob URL:', blobUrl);

    // 1. 通过fetch获取Blob对象
    fetch(blobUrl)
      .then(response => response.blob())
      .then(blob => {
        // 2. 使用FileReader将Blob转为Base64字符串
        const reader = new FileReader();
        reader.onloadend = function() {
          const base64Data = reader.result; // 格式为 data:image/png;base64,xxxxxxxxx
          console.log('转换后的Base64:', base64Data);

          // 3. 把Base64发送到后端保存
          fetch('save-image.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: `image=${encodeURIComponent(base64Data)}`
          })
          .then(res => res.text())
          .then(result => {
            console.log('后端保存结果:', result);
            alert('图片已成功保存！');
          })
          .catch(err => console.error('保存请求失败:', err));
        };
        reader.readAsDataURL(blob);
      })
      .catch(err => console.error('获取Blob对象失败:', err));
  },
  error: function(msg) {
    console.error('粘贴图片出错:', msg);
  }
});

二、后端：PHP接收Base64并保存到指定目录 #

后端需要接收前端传来的Base64字符串，解码后写入指定目录，同时要处理文件命名、格式识别和目录权限问题。

示例代码（save-image.php）：

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['image'])) {
    $base64Raw = $_POST['image'];
    
    // 1. 剥离Base64前缀（data:image/png;base64,）
    $dataParts = explode(',', $base64Raw);
    if (count($dataParts) !== 2) {
        die('无效的Base64图片数据');
    }
    
    // 2. 解码Base64内容
    $imageContent = base64_decode($dataParts[1]);
    if (!$imageContent) {
        die('Base64内容解码失败');
    }
    
    // 3. 识别图片格式并生成扩展名
    $mimeInfo = explode(':', $dataParts[0])[1];
    $extension = explode('/', $mimeInfo)[1];
    // 兼容webp等特殊格式
    $extension = strtolower($extension);
    
    // 4. 生成唯一文件名，避免重复覆盖
    $fileName = uniqid('paste_', true) . '.' . $extension;
    // 指定保存目录，确保目录存在且有写入权限
    $saveDir = './uploaded-images/';
    if (!is_dir($saveDir)) {
        mkdir($saveDir, 0755, true); // 递归创建目录
    }
    $filePath = $saveDir . $fileName;
    
    // 5. 写入文件到指定目录
    if (file_put_contents($filePath, $imageContent)) {
        echo "图片已保存至：{$filePath}";
    } else {
        die('文件写入失败，请检查目录写入权限');
    }
} else {
    die('无效的请求方式或缺少图片数据');
}
?>

关键注意事项 #

• 目录权限：确保后端指定的保存目录（比如./uploaded-images/）拥有写入权限，否则会导致保存失败。
• 大图片优化：如果经常粘贴大尺寸图片，Base64格式会导致数据体积膨胀30%左右，这种情况建议直接用FormData发送Blob对象到后端，效率更高。
• 格式兼容性：代码已兼容PNG、JPG、WebP等常见图片格式，若有特殊格式需求可扩展extension的处理逻辑。

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