调整画布大小会导致绘图变得模糊

Question

我正在尝试为客户制作签名板。我在按钮下放了一块小画布，使画布变大。

当我在小画布上绘制然后将其变大时，这很好，但如果我在大画布上绘制然后将其变小，则绘图会变得非常模糊。这是我需要工作的选项，因为当客户签名时，它需要是一个大画布，并且在它在“订单”PDF 中显示之后，所以它需要很小

我能做什么？

var signatureDataUrl = null;

// Function to capture the signature as an image.
function captureSignature(canvas) {
  const scaleFactor = 2; // Adjust the scale factor as needed
  const context = canvas.getContext('2d');
  context.scale(scaleFactor, scaleFactor); // Scale up the canvas context
  signatureDataUrl = canvas.toDataURL('image/png', 1.0); // Capture at maximum quality
}

// Function to redraw the signature after resizing.
function redrawSignature(canvas) {
  if (signatureDataUrl) {
    const context = canvas.getContext('2d');
    const image = new Image();
    image.onload = function() {
      // Clear the canvas before redrawing
      context.clearRect(0, 0, canvas.width, canvas.height);
      // Draw the image on the canvas at the original size
      context.drawImage(image, 0, 0, image.width, image.height);
    };
    image.src = signatureDataUrl;
  }
}

// Function to toggle canvas size.
function toggleCanvasSize(canvas, toggleButton) {
  // Save the current signature before resizing
  captureSignature(canvas);
  if (!canvas.classList.contains('fullscreen')) {
    // Make the canvas full screen
    const originalWidth = canvas.width;
    const originalHeight = canvas.height;
    const aspectRatio = originalWidth / originalHeight;
    const newWidth = window.innerWidth - 10; // Subtract 10px for left and right margins
    const newHeight = newWidth / aspectRatio;
    canvas.width = newWidth;
    canvas.height = newHeight;
    canvas.style.marginRight = "-375px";
    canvas.classList.add('fullscreen');
    // Change button text to 'הקטן' and class to 'uk-button-danger'
    toggleButton.textContent = 'הקטן';
    toggleButton.classList.remove('uk-button-success');
    toggleButton.classList.add('uk-button-danger');
  } else {
    // Restore the original canvas size
    canvas.width = 302; // Set to original width
    canvas.height = 122; // Set to original height
    canvas.style.marginRight = ''; // Removes the marginRight style
    canvas.style.marginLeft = ''; // Removes the marginLeft style
    canvas.style.display = ''; // Resets display to the default value
    canvas.classList.remove('fullscreen');
    // Change button text to 'הגדל' and class to 'uk-button-success'
    toggleButton.textContent = 'הגדל';
    toggleButton.classList.remove('uk-button-danger');
    toggleButton.classList.add('uk-button-success');
  }
  // Redraw the signature after resizing
  redrawSignature(canvas);
}

// Get The Correct Canvas And Button
function getOrderBodyCanvas() {
  const canvas = document.querySelector('canvas[name="orderBody"]');
  const toggleButton = document.getElementById('toggleSizeOrderBody');
  toggleCanvasSize(canvas, toggleButton)
}

function getInstallationPricingCanvas() {
  const canvas = document.querySelector('canvas[name="installationpricing"]');
  const toggleButton = document.getElementById('toggleSizeInstallationPricing');
  toggleCanvasSize(canvas, toggleButton)
}

//Clear Canvas
function clearCanvas(canvas) {
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
}

// On Click Events On the Toggle Size Buttons
document.getElementById('toggleSizeOrderBody').addEventListener('click', getOrderBodyCanvas);
document.getElementById('toggleSizeInstallationPricing').addEventListener('click', getInstallationPricingCanvas);
document.getElementById('clearCanvasOrderBody').addEventListener('click', function() {
  const canvas = document.querySelector('canvas[name="orderBody"]');
  if (canvas) {
    clearCanvas(canvas);
  }
});

document.getElementById('clearCanvasInstallationPricing').addEventListener('click', function() {
  const canvas = document.querySelector('canvas[name="installationpricing"]');
  if (canvas) {
    clearCanvas(canvas);
  }
});

Answer 1

模糊可能是由于调整画布上下文大小时画布分辨率损失造成的。 您可以通过调整画布元素而不是画布上下文的大小来解决此问题。 尝试使用下面的代码来解决该问题。

function toggleCanvasSize(canvas, toggleButton) {
  captureSignature(canvas);
  if (!canvas.classList.contains('fullscreen')) {
    canvas.classList.add('fullscreen');
    toggleButton.textContent = 'הקטן';
    toggleButton.classList.remove('uk-button-success');
    toggleButton.classList.add('uk-button-danger');
  } else {
    canvas.classList.remove('fullscreen');
    toggleButton.textContent = 'הגדל';
    toggleButton.classList.remove('uk-button-danger');
    toggleButton.classList.add('uk-button-success');
  }
  redrawSignature(canvas);
}