我正在撰寫一個 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'))
uj5u.com熱心網友回復:
我認為您在發布請求時會再次下載影像。所以,影像只旋轉一次。
uj5u.com熱心網友回復:
您可以使用 session 來標記您當前的影像角度
所以無論前端做什么,你都可以用你的會話記憶旋轉影像
uj5u.com熱心網友回復:
影像將保存為檔案,您只需使用 HTML 標簽 'src' 來獲取它然后將其顯示在瀏覽器上,所以我認為您可以使用 CSS 旋轉影像。給定一個框,使用 CSS 旋轉框。
每次按下并重新閱讀照片時,您都不會真的想保存照片,即使您使用ajax,我認為這仍然不是一個好主意。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/317169.html
上一篇:嘗試在TkinterGUI的第二個視窗上調整影像大小
下一篇:顯示多張隨機影像而不僅僅是一張
