在 django 应用程序中的图像上绘制简单线条的最佳方法是什么答案

【问题标题】：What is the best way to draw simple line on image in django app在 django 应用程序中的图像上绘制简单线条的最佳方法是什么
【发布时间】：2018-12-31 13:03:08
【问题描述】：

我还是 django 的新手，我想问一下我是否有一个表格来上传图片，在基于网络的简单照片编辑器中通过在图片上绘制简单的线条来编辑它的最佳方法是什么

【问题讨论】：

这更像是一个 Python 问题，而不是 Django。你应该看看 PIL/Pillow 来进行一般的图像处理。
May 应用是基于网络的，使用 django
我可以看到，但 Django 没有内置功能来处理图像。它是 Javascript（客户端）或 Python（服务器端）问题。

标签： jquery django django-forms django-templates

【解决方案1】：

我建议您遵循本教程About Canvas，这样您就可以构建您的自定义绘图应用程序。例如这个在图像上画一条线的小代码。 code

HTML

<canvas id="demo" width=400 height=400></canvas>

var canvas = document.getElementById('demo'),
    ctx = canvas.getContext('2d'),
    line = new Line(ctx),
    img = new Image;


function Line(ctx) {

    var me = this;

    this.x1 = 0;
    this.x2 = 0;
    this.y1 = 0;
    this.y2 = 0;

    this.draw = function() {
        ctx.beginPath();
        ctx.moveTo(me.x1, me.y1);
        ctx.lineTo(me.x2, me.y2);
        ctx.stroke();
    }
}

img.onload = start;
img.src = 'http://i.imgur.com/O712qpO.jpg';

function start() {
    ctx.drawImage(img, 0, 0, demo.width, demo.height);
    canvas.onmousemove = updateLine;
}

function updateLine(e) {
    var r = canvas.getBoundingClientRect(),
    x = e.clientX - r.left,
        y = e.clientY - r.top;

    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    line.x1 = x;
    line.y1 = 0;
    line.x2 = x;
    line.y2 = canvas.height;
    line.draw();
}

【讨论】：