Lưu HTML Canvas thành ảnh với canvas.toDataURL()

Phương thức canvas.toDataURL() chuyển đổi nội dung canvas thành Data URL (Base64 encoded) dạng PNG mặc định, cho phép lưu, tải xuống, hoặc gửi lên server.

Cú pháp

var dataURL = canvas.toDataURL(type, encoderOptions);

Ví dụ: Vẽ hình và xuất ảnh

<!DOCTYPE html>
<html>
  <body>
    <canvas id="newCanvas" width="450" height="300"></canvas>
    <br>
    <button onclick="saveAsImage()">Lưu thành ảnh (PNG)</button>
    <button onclick="saveAsJPEG()">Lưu thành JPEG (chất lượng 0.8)</button>
    <br><br>
    <img id="outputImg" alt="Ảnh xuất từ canvas">

    <script>
      var canvas = document.getElementById('newCanvas');
      var ctx = canvas.getContext('2d');
      
      // Vẽ một hình demo
      function drawShape() {
        ctx.beginPath();
        ctx.moveTo(120, 50);
        ctx.bezierCurveTo(130,100, 130, 250, 330, 150);
        ctx.bezierCurveTo(350,180, 320, 180, 240, 150);
        ctx.bezierCurveTo(320,150, 420, 120, 390, 100);
        ctx.bezierCurveTo(130,40, 370, 30, 240, 50);
        ctx.bezierCurveTo(220,7, 350, 20, 150, 50);
        ctx.bezierCurveTo(250,5, 150, 20, 170, 80);
        ctx.closePath();
        ctx.lineWidth = 3;
        ctx.fillStyle = '#F1F1F1';
        ctx.fill();
        ctx.stroke();
      }
      
      drawShape();
      
      function saveAsImage() {
        var dataURL = canvas.toDataURL('image/png');
        document.getElementById('outputImg').src = dataURL;
        // Hoặc tải xuống:
        // downloadImage(dataURL, 'canvas.png');
      }
      
      function saveAsJPEG() {
        var dataURL = canvas.toDataURL('image/jpeg', 0.8);
        document.getElementById('outputImg').src = dataURL;
      }
      
      // Hàm tải xuống file
      function downloadImage(dataURL, filename) {
        var link = document.createElement('a');
        link.href = dataURL;
        link.download = filename;
        link.click();
      }
    </script>
  </body>
</html>

Lưu ý quan trọng

• Tainted Canvas: Nếu canvas vẽ hình ảnh cross-origin không có CORS, toDataURL() sẽ ném lỗi SecurityError. Xem bài "Fix lỗi getImageData() tainted canvas".
• Data URL Base64 lớn hơn file nhị phân ~33%. Không phù hợp ảnh lớn (> 몇 MB).
• Để upload lên server: Gửi dataURL qua AJAX (POST), server decode Base64 lưu file.
• Hiện đại hơn: Dùng canvas.toBlob(callback, type, quality) để lấy Blob, hiệu quả hơn cho upload.

Ví dụ toBlob() (Khuyên dùng cho upload)

canvas.toBlob(function(blob) {
  var formData = new FormData();
  formData.append('image', blob, 'canvas.png');
  
  fetch('/upload', { method: 'POST', body: formData })
    .then(res => res.json())
    .then(data => console.log('Uploaded:', data));
}, 'image/png');