Django 视图转 PNG

Question

我正在编写django webapp，其中一部分是生成视图并将其转换为png图像。 （以下任何其他想法都值得赞赏）。 我看过一些将“html 转换为 png”的工具，但主要存在 {%static 文件和模板的问题。 另一种方法是在浏览器中使用 django 模板渲染页面，并截屏。 可以使用“chromedriver”+selenium 来完成。我可以在我本地的 ubuntu 上做到这一点。 但在生产中 - 我所拥有的只是对托管我的应用程序的某些 linux bash 进行远程（ssh）访问。 我创建了 venv、pip 安装的 selenium 和（chromedriver-py 或 chromedriver-binary）。对于第二个 - 看起来更接近开始工作，但我收到错误消息： 会话未创建异常 消息：会话未创建：可能用户数据目录已在使用中，请为 --user-data-dir 参数指定唯一值，或者不要使用 --user-data-dir

Stackoverflow 说，我应该以某种方式放置一个到我的 chrome 安装的用户目录的路径，但是我的控制台 bash 中有任何 chrome 安装吗？

有什么想法可以继续前进吗？或任何其他想法如何做到这一点？ 我的代码：

import chromedriver_binary   


def render_to_png(request ):  
      
     
    chrome_options = webdriver.ChromeOptions() 
    chrome_options.add_argument("--headless")  # Run in headless mode (no GUI)
    driver = webdriver.Chrome( options=chrome_options) 
    driver.get("someurl.com") 
    driver.save_screenshot("x.png")
     
    driver.quit()
    return HttpResponse(status=200)

Answer 1

这是一个可能有帮助的详细答案：

要在 django 中使用 html2canvas，您可能需要 cdn 链接： https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js

客户端脚本

<script>
    function captureAndUpload() {
        const element = document.getElementById('capture-area'); // replace with your html element id or = document.body for whole page
        
        html2canvas(element).then(canvas => {
            canvas.toBlob(blob => {
                const formData = new FormData();
                formData.append('image', blob, 'screenshot.png');

                fetch('/upload-image/', { // replace with djgango url
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-CSRFToken': getCSRFToken() // include CSRF token if CSRF enabled
                    }
                })
                .then(response => response.json())
                .then(data => {
                    console.log('Upload successful:', data);
                })
                .catch(error => {
                    console.error('Error uploading image:', error);
                });
            }, 'image/png');
        });
    }

    // function to get CSRF token
    function getCSRFToken() {
        const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
        return csrfToken;
    }
</script>

按钮

<button onclick="captureAndUpload()">Capture and Upload</button>

Django 服务器端逻辑

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from django.core.files.storage import default_storage

@csrf_exempt  # Use this only if CSRF tokens are not included
def upload_image(request):
    if request.method == 'POST' and 'image' in request.FILES:
        image = request.FILES['image']
        file_path = default_storage.save(f'uploads/{image.name}', image)
        return JsonResponse({'message': 'Image uploaded successfully', 'file_path': file_path})
    return JsonResponse({'error': 'Invalid request'}, status=400)

网址.py

...

urlpatterns = [
    path('upload-image/', upload_image, name='upload-image'),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

在settings.py中还要添加一件事

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'