如何在 Flask 中旋轉圖像？

Question

我正在編寫一個 Flask 應用程序，用戶可以在其中編輯照片並旋轉它們。 我添加了兩個左右旋轉的按鈕：

<img class="card-img-top"
                         src="data:image/jpeg;base64,{{image}}"
                         alt="Edit pic"
                         name="originalPic">
<button class="btn" name="right_button"><i class="fa fa-rotate-right"></i></button>
<button class="btn" name="left_button"><i class="fa fa-rotate-left"></i></button>

在 python 代碼中，我旋轉了圖像，但如果我多次按下任何按鈕，圖像不會繼續旋轉。 如果我切換並從右按鈕按下左按鈕，它只會改變位置。 另外，在python代碼中，我使用的是HTML頁面上顯示的原始圖像，但是如果用戶旋轉圖片，其位置會發生變化。 我怎樣才能在 Python 代碼中傳遞旋轉的圖像（圖像的實際位置）？ 要將圖像實際旋轉用戶想要的次數，他按下任何按鈕的次數。

def check_rotate(img):
    right_button_pushed = request.form.get('right_button')
    left_button_pushed = request.form.get('left_button')
    if type(right_button_pushed) == str:
        print('RIGHT')
        angle = 90
        rotated_image = img.rotate(angle)

    elif type(left_button_pushed) == str:
        print('LEFT')
        angle = -90
        rotated_image = img.rotate(angle)
    else:
        rotated_image = ''
    try:
        data = io.BytesIO()

        # First save image as in-memory.
        rotated_image.save(data, "PNG")

        # Then encode the saved image file.
        encoded_img_data = base64.b64encode(data.getvalue())
        return encoded_img_data  # rotated_image

    except AttributeError:
        pass

我正在使用上述方法：

@app.route('/', methods=['GET', 'POST'])
def index():
    original_image = "https://cdn.pixabay.com/photo/2017/09/25/13/12/cocker-spaniel-2785074__340.jpg"
    response = requests.get(original_image)
    img = Image.open(BytesIO(response.content))

    if request.method == 'POST':
        rotated_image = check_rotate(img) #How can I update the image to the image with the actual position of rotation?
        return render_template("index.html", image=rotated_image.decode('utf-8'))

Answer 1

我認為您在發布請求時會再次下載圖像。 所以，圖像只旋轉一次。

Answer 2

您可以使用 session 來標記您當前的圖像角度

所以無論前端做什么，你都可以用你的會話記憶旋轉圖像

Answer 3

圖像將保存為文件，您只需使用 HTML 標簽 'src' 來獲取它然后將其顯示在瀏覽器上，所以我認為您可以使用 CSS 旋轉圖像。 給定一個框，使用 CSS 旋轉框。

你不會真的想每次按下並重新閱讀照片時都保存照片，即使你使用ajax，我認為這仍然不是一個好主意。