如何在HTML Canvas实现图片/文本拖拽上传及数据库保存功能

Hey there! Let's get your canvas custom app up to speed—we'll fix the image upload/drag functionality, add draggable text that syncs with your input, and make sure saving to the database works smoothly. Let's dive into each part with targeted tweaks to your existing code:

1. Make Uploaded Images Draggable on Canvas #

Right now, your uploaded image gets stuck at (0,0). We'll add drag support by tracking the image's position and listening to mouse events. Update your canvas.js with this state-tracking and rendering logic:

// Global state to track all elements on the canvas
const canvasState = {
  backgroundImg: null,
  uploadedImg: {
    img: null,
    x: 0,
    y: 0,
    width: 100,
    height: 100,
    isDragging: false,
    offsetX: 0,
    offsetY: 0
  },
  text: {
    content: "text here",
    x: 50,
    y: 50,
    isDragging: false,
    offsetX: 0,
    offsetY: 0
  }
};

// Redraw the entire canvas whenever something changes (critical for clean updates)
function renderCanvas(canvas, ctx) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw background image
  if (canvasState.backgroundImg) {
    ctx.drawImage(canvasState.backgroundImg, 0, 0, canvas.width, canvas.height);
  }
  
  // Draw uploaded image at its current position
  if (canvasState.uploadedImg.img) {
    ctx.drawImage(canvasState.uploadedImg.img, canvasState.uploadedImg.x, canvasState.uploadedImg.y, canvasState.uploadedImg.width, canvasState.uploadedImg.height);
  }
  
  // Draw text at its current position
  ctx.font = "16px Arial";
  ctx.fillStyle = "black";
  ctx.fillText(canvasState.text.content, canvasState.text.x, canvasState.text.y);
}

function drawBackgroundImage(canvas, ctx) {
  const img = document.getElementById('salt-bae');
  canvasState.backgroundImg = img;
  renderCanvas(canvas, ctx);
}

function updateUploadedImage(file) {
  const image = new Image();
  image.crossOrigin = 'anonymous';
  image.src = URL.createObjectURL(file);
  image.onload = function() {
    canvasState.uploadedImg.img = image;
    // Reset position when a new image is uploaded
    canvasState.uploadedImg.x = 0;
    canvasState.uploadedImg.y = 0;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    renderCanvas(canvas, ctx);
  };
}

// Add drag handlers for the uploaded image
function setupImageDrag(canvas, ctx) {
  canvas.addEventListener('mousedown', (e) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    
    // Check if the click is on the uploaded image
    const img = canvasState.uploadedImg;
    if (img.img && mouseX >= img.x && mouseX <= img.x + img.width && mouseY >= img.y && mouseY <= img.y + img.height) {
      img.isDragging = true;
      img.offsetX = mouseX - img.x;
      img.offsetY = mouseY - img.y;
    }
  });

  canvas.addEventListener('mousemove', (e) => {
    if (!canvasState.uploadedImg.isDragging) return;
    const rect = canvas.getBoundingClientRect();
    const mouseX = e.clientX - rect.left;
    const mouseY = e.clientY - rect.top;
    
    canvasState.uploadedImg.x = mouseX - canvasState.uploadedImg.offsetX;
    canvasState.uploadedImg.y = mouseY - canvasState.uploadedImg.offsetY;
    renderCanvas(canvas, ctx);
  });

  canvas.addEventListener('mouseup', () => {
    canvasState.uploadedImg.isDragging = false;
  });
}

2. Add Draggable Text Sync with Input #

Your current text setup updates the canvas but doesn't let you drag the text. Let's link the draggable div to the canvas text position and sync it with your input box:

function setupTextHandlers(canvas, ctx) {
  const dragBox = $("#draggable");
  const textInput = $("#AddText");

  // Sync input box content to canvas text
  textInput.keyup(function() {
    canvasState.text.content = $(this).val();
    dragBox.html(canvasState.text.content);
    renderCanvas(canvas, ctx);
  });

  // Update the draggable div's position to match canvas text
  function updateDragBoxPosition() {
    const rect = canvas.getBoundingClientRect();
    dragBox.css({
      position: 'absolute',
      left: rect.left + canvasState.text.x + 'px',
      top: rect.top + canvasState.text.y - 12 + 'px', // Adjust for text baseline
      cursor: 'move'
    });
  }

  // Initialize position and render
  updateDragBoxPosition();
  renderCanvas(canvas, ctx);

  // Drag handler for the text box
  dragBox.on('mousedown', function(e) {
    canvasState.text.isDragging = true;
    const rect = dragBox.offset();
    canvasState.text.offsetX = e.clientX - rect.left;
    canvasState.text.offsetY = e.clientY - rect.top;
  });

  $(document).on('mousemove', function(e) {
    if (!canvasState.text.isDragging) return;
    const rect = canvas.getBoundingClientRect();
    canvasState.text.x = e.clientX - rect.left - canvasState.text.offsetX;
    canvasState.text.y = e.clientY - rect.top - canvasState.text.offsetY + 12; // Adjust baseline
    updateDragBoxPosition();
    renderCanvas(canvas, ctx);
  });

  $(document).on('mouseup', function() {
    canvasState.text.isDragging = false;
  });
}

3. Fix the Save to Database Logic #

Your existing AJAX call is almost there—we just need a proper process.php to handle the base64 image and save it to your database. Here's the code for that:

<?php
// Update these credentials to match your database setup
$servername = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$dbname = "your_db_name";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['image'])) {
  $imageData = $_POST['image'];
  // Remove the base64 header to get raw data
  $imageData = str_replace('data:image/png;base64,', '', $imageData);
  $imageData = str_replace(' ', '+', $imageData);
  $imageBlob = base64_decode($imageData);

  // Prepare and execute the insert query
  $stmt = $conn->prepare("INSERT INTO canvas_saves (image_data, created_at) VALUES (?, NOW())");
  $stmt->bind_param("b", $imageBlob);

  if ($stmt->execute()) {
    echo "Image saved successfully!";
  } else {
    echo "Error: " . $stmt->error;
  }

  $stmt->close();
}

$conn->close();
?>

Note: Create a canvas_saves table in your database with at least two columns: image_data (BLOB type) and created_at (DATETIME type).

4. Update the Onload Function to Tie Everything Together #

Replace your existing onload function with this to initialize all new handlers:

onload = function(){
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = "16px Arial"; // Set a default font for text rendering

  // Initialize background image
  drawBackgroundImage(canvas, ctx);
  
  // Setup text drag and input sync
  setupTextHandlers(canvas, ctx);
  
  // Setup image upload handling
  const input = document.querySelector("input[type='file']");
  input.addEventListener('change', function(){
    updateUploadedImage(this.files[0]);
  });
  
  // Setup image drag functionality
  setupImageDrag(canvas, ctx);
  
  // Add save link
  addLink();
}

5. Minor HTML Tweaks #

Adjust your index.php to position the draggable text box correctly (it needs absolute positioning to move freely):

<div class="container">
 <section class="inputs">
 <div class="upload-wrap">
 <label for="upload-image" class="instruction">Upload an image</label>
 <input type="file" id="upload-image">
 </div>
 <img crossOrigin="Anonymous" id="salt-bae" src="demo.png" style="display: none;"/> <!-- Hide demo image since it's used as background -->
 </section>
 <section class="meme" style="position: relative; display: inline-block;">
 <div id="draggable" contentEditable="true" style="position: absolute; pointer-events: none;"> text here </div>
 <canvas id="canvas" width="594" height="592"> Canvas requires a browser that supports HTML5. </canvas>
 <input type="text" name="text" id="AddText" placeholder="Enter text...">
 <br>
 <button id="btnAdd">Add text</button>
 </section>
</div>

The pointer-events: none on the draggable div lets clicks pass through to the canvas for image dragging—we handle text dragging via the div's own mousedown event.

Final Notes #

• Test the drag functionality: You can now drag the uploaded image directly on the canvas and the text box (which syncs to the canvas text position).
• The renderCanvas function ensures every change triggers a full redraw, so elements don't leave trails on the canvas.
• Make sure your database user has permission to insert BLOB data.

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