0

我已经为此苦苦挣扎了几天。我正在尝试创建一个 html 页面，用户在其中导入图像并调整其大小（所有这些都没有保存到模型中）。我想做三件主要的事情：

  1. 在用户选择他的图像后，即使没有提交表单也显示图像并显示图像的当前宽度和高度。
  2. 能够访问和修改这些宽度和高度值并更改这些值。
  3. 发送“提交”后，在同一页面上显示转换后的图像并能够下载。

另外，我是初学者，这是我的第一个项目。如果您能分享您的一些知识并给我一些提示，我将不胜感激：）

表格.py

class ImageForm(forms.Form):
    image = forms.ImageField()

视图.py

def image_resize(request):
    form = forms.ImageForm()
    if request.method == "POST":
        form = forms.ImageForm(request.POST or None, request.FILES or None)
        if form.is_valid():
            image_object = form.cleaned_data['image']
            w, h = image_object.image.width, image_object.image.width
            print(w, h)
        else:
            form = forms.ImageForm(request.POST or None, request.FILES or None)
    context = {'form':form}
    return render(request, 'images/image-grayscale.html', context)

让我知道是否需要其他东西来让您的生活更轻松

4

1 回答 1

0

我也是一个初学者，但我已经能够通过stackoverflow中的拼凑代码完成前两个步骤（除了“即使没有提交表单也显示图像”）。到目前为止只是想分享一下，如果我不继续研究这个，也许你可以做点什么。

我对缺少步骤的想法：“显示的图像，即使尚未提交表单”我正在考虑在那里使用 ajax 提交表单 onchange(js)，所以它看起来只是尚未提交，或者，如果可能，将 img 数据发送到 iframe 并更改 iframe 外部的值，然后再次使用 ajax 提交。

项目：我考虑过临时存储或 cron/celery 的东西，但后来决定尝试使用我认为它被称为的数据 uri。我没有改变图像的高度/宽度，而是使用 style="" 来展示它在这些尺寸下的样子。（有趣的尝试：比例高度/宽度编辑）。我正在使用 PIL 来获取图像的尺寸和图像的更改尺寸。

//--- html ---//

 <head><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <body>

<h2>Image upload</h2>
<form method="post" enctype='multipart/form-data'> 
    {% csrf_token %}
    {{ form }}
    <label for="fheight">Wanted height</label>
    <input id="fheight" name="fheight" value="" type="number" min="50" max="1000">
    <label for="fwidth">Wanted width</label>
    <input id="fwidth" name="fwidth" value="" type="number" min="50" max="700">
    <input type="submit" value="Submit">
</form>

# Display image 
{% if image %}
<span>Height: {{height}}</span>
<span>Width: {{width}}</span>
<img src="{{ image }}" alt="img" style="top:10em; width: {{width}}px; height: {{height}}px; max-width: 700px; max-height: 1000px;">

{% endif %}

//--- 浏览量---//

from .forms import FilePreviewForm
from base64 import b64encode 

from PIL import Image
def preview_image(request):
    form = FilePreviewForm(request.POST, request.FILES)
    if form.is_valid():
        fheight = request.POST.get('fheight')
        fwidth = request.POST.get('fwidth')
        
        file = request.FILES['image']
        data = file.read()
        encoded = b64encode(data).decode()
        mime = 'image/jpeg;'
        imagep = Image.open(file)
        width, height = imagep.size
        if fheight or fwidth: 
            size = None
            if fheight:
                size = (int(width), int(fheight))
            if fwidth:
                size = (int(fwidth), int(height)) 
            if fheight and fwidth:
                size = (int(fwidth), int(fheight)) 
            image = imagep.resize(size, Image.ANTIALIAS)
            width, height = image.size
        context = {"image": "data:%sbase64,%s" % (mime, encoded), 'form': form, 'width':width, 'height':height}
        return render(request, 'image_preview.html', context)
    else:
        form = FilePreviewForm()
    return render(request, 'image_preview.html', {'form': form})

// - -形式 - -//

    image = forms.ImageField(help_text="Upload image: ", required=True)

希望它有帮助。询问您是否有问题。祝你好运！如果我继续，我会分享更多。

于 2021-08-10T09:53:46.753 回答