Django：如何将含用户上传背景的Canvas存库及传模型图片至JS

一、Django模型/视图向JavaScript传递变量完全可行 #

有两种常用实现方式：

• 模板直接注入：在HTML的<script>标签里直接用Django模板变量赋值
• HTML元素data属性传递：把变量存在DOM元素的自定义data属性里，再用JS读取

二、动态加载用户图片作为Canvas背景并可保存的实现 #

因为CSS设置的Canvas背景不会被toDataURL()捕获，所以必须用drawImage()把背景图直接绘制到Canvas画布上，这样保存时背景才会和绘制内容一起被导出。

修改后的完整代码示例 #

1. Django模板部分

<canvas id="myCanvas" width="1000" height="500"></canvas>
<button id="saveBtn">保存到数据库</button>

<script>
// 直接从模板注入用户图片URL
const userProfilePicUrl = "{{ user.profile.profile_pic.url }}";

window.onload = function() {
  const canvas = document.getElementById("myCanvas");
  const context = canvas.getContext("2d");
  const imageObj = new Image();

  // 加载用户图片作为背景
  imageObj.onload = function() {
    // 先绘制背景图（覆盖整个Canvas）
    context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);
    // 再绘制自定义内容
    context.font = "40pt Comic Sans MS";
    context.fillText("draw here", 20, 80);
  };

  // 设置图片源为用户的头像URL
  imageObj.src = userProfilePicUrl;

  // 保存到数据库的逻辑
  document.getElementById('saveBtn').addEventListener('click', function() {
    // 将Canvas转为base64格式的图片数据
    const dataURL = canvas.toDataURL("image/png");
    // 发送POST请求给Django视图
    fetch('/save-canvas/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRFToken': '{{ csrf_token }}' // Django需要CSRF令牌
      },
      body: JSON.stringify({ image_data: dataURL })
    })
    .then(response => response.json())
    .then(data => {
      if (data.success) {
        alert('保存成功');
      } else {
        alert('保存失败');
      }
    });
  });
};
</script>

2. Django视图部分（处理保存请求）

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
import base64
from django.core.files.base import ContentFile
from .models import UserCanvas # 假设你有一个存储Canvas图片的模型

@csrf_exempt
def save_canvas(request):
    if request.method == 'POST':
        data = request.POST.get('image_data') or request.json.get('image_data')
        if data:
            # 处理base64数据，去掉前缀
            format, imgstr = data.split(';base64,') 
            ext = format.split('/')[-1] 
            # 转为Django的ContentFile
            file = ContentFile(base64.b64decode(imgstr), name=f'canvas_{request.user.id}.{ext}')
            # 保存到模型（假设模型有image字段，关联用户）
            canvas_obj, created = UserCanvas.objects.get_or_create(user=request.user)
            canvas_obj.image = file
            canvas_obj.save()
            return JsonResponse({'success': True})
        return JsonResponse({'success': False, 'error': '无图片数据'})
    return JsonResponse({'success': False, 'error': '请求方式错误'})

3. 模型示例（models.py）

from django.db import models
from django.contrib.auth.models import User

class UserCanvas(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    image = models.ImageField(upload_to='canvas_images/') # 图片存储路径

关键注意点 #

• 必须等待图片加载完成（imageObj.onload回调）后再绘制，否则背景图不会显示
• 绘制顺序：先画背景，再画其他内容，确保内容在背景上方
• 保存时要处理CSRF令牌，否则Django会拒绝请求
• base64数据需要去掉前缀后再解码保存，才能正确转为图片文件

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