使用裁剪工具进行图像裁剪的 Django 应用程序

发布于 12-11 19:31 字数 647 浏览 1 评论 0原文

我需要一个在客户端裁剪图像的应用程序,我的意思是,使用像 Jcrop jquery 插件这样的裁剪工具。

我找到了这个工具:

但是最后两个取决于 admin,前两个似乎与他们自己的 ImageFields 和模型非常耦合,有什么好的解决方案吗?

我们正在开发一个具有许多功能的大型应用程序,并且很难更改编写的逻辑

I need an app for crop an image in the client side, I mean, using a cropping tool like Jcrop jquery plugin.

I found this tools:

But the last two depends of admin and the two first seem very coupled to ther own ImageFields and models, any good solution?

We are working over a big application with many features and is very difficult change the logic writed

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

酒废2024-12-18 19:31:58

我认为这可能是你最好自己写的东西,因为它取决于你的数据和模型的布局方式,你是否(以及在哪里)想要保存作物,如果你想保留原件等。即使如果您有一个大型应用程序,您可能会花费更多时间尝试修改其他代码来完成您的情况所需的操作。

(这段代码非常粗糙 - 我只是真正列出步骤)

如果您有一个带有图像字段的模型,您可以添加第二个图像字段来保存裁剪后的图像:

class MyModel(models.Model):
    image = models.ImageField(...)
    image_crop = models.ImageField(...)

以及一个带有额外字段的表单来保存 jcrop将在客户端表单中填充的坐标(该字段将被隐藏)。以什么形式将坐标保存到字段中由您决定,但使用 json 字典(客户端上的 json.js 和服务器端的 simplejson)可能是一个好主意,例如:

{ 'x1' : '145', 'y1' : '200'  ... }

形式:

class MyModelForm(form.ModelForm):
    """ Hide a field to hold the coordinates chosen by the user """
    crop_coords = forms.CharField(attrs={'style':'display:none'})        

    class Meta:
         model = MyModel

视图处理所有这些:

def some_view(request):
    form = request.POST
    if form.is_valid():
        crop_coords = form.cleaned_data['crop_coords']
        # decode the coords using simpleson (or however you passed them)
        ...
        # create a cropped image 
        original_image = form.cleaned_data['image']
        cropped_image = cropper(original_image.path, crop_coords)
        ...
        # save it back to the db - http://stackoverflow.com/questions/1308386/programmatically-saving-image-to-django-imagefield
        ...

以及使用 PIL 创建裁剪图像的函数:

# Look here: http://djangosnippets.org/snippets/224/
def cropper(original_image_path, crop_coords):
    """ Open original, create and return a new cropped image
    ...

I think this is something that you will probably be best off writing yourself as it depends on how your data and models are layed out, whether (and where) you want to save the crops, if you want to keep the originals etc. Even if you have a big app, you will probably spend more time trying to bend other code to do what you need in your situation.

(This code is very rough - I'm just laying out the steps really)

If you have a model with an imagefield, you could add a second image field to hold the cropped image:

class MyModel(models.Model):
    image = models.ImageField(...)
    image_crop = models.ImageField(...)

and a form with an extra field to hold the jcrop coordinates that will be populated in the form on the client side (the field will be hidden). In what form you save the coordinates into the field is up to you, but it might be an idea to use a json dictionary (json.js on the client side and simplejson on the server side), something like:

{ 'x1' : '145', 'y1' : '200'  ... }

the form:

class MyModelForm(form.ModelForm):
    """ Hide a field to hold the coordinates chosen by the user """
    crop_coords = forms.CharField(attrs={'style':'display:none'})        

    class Meta:
         model = MyModel

a view that processes all this:

def some_view(request):
    form = request.POST
    if form.is_valid():
        crop_coords = form.cleaned_data['crop_coords']
        # decode the coords using simpleson (or however you passed them)
        ...
        # create a cropped image 
        original_image = form.cleaned_data['image']
        cropped_image = cropper(original_image.path, crop_coords)
        ...
        # save it back to the db - http://stackoverflow.com/questions/1308386/programmatically-saving-image-to-django-imagefield
        ...

and a function to create the cropped image using PIL:

# Look here: http://djangosnippets.org/snippets/224/
def cropper(original_image_path, crop_coords):
    """ Open original, create and return a new cropped image
    ...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文