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

时间:2018-07-24 02:29:24

标签: jquery django django-forms django-templates

我对django还是陌生的,我想问一下是否有一种上传图片的表格,最好的方法是在基于Web的简单照片编辑器中在图片上画一条简单的线来编辑它

1 个答案:

答案 0 :(得分:0)

我建议您遵循本教程About Canvas,以便您可以构建自定义绘图应用程序。 例如,此小代码在Image上画一条线。 code

HTML

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

JS

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();
}