I am writing a Flask application in which the user can edit photos and rotate them. I have added two buttons with right and left rotation:

<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>

In the python code, I am rotating the image, but the image doesn't continue the rotation if I press more than once on any of the buttons. It only changes the position if I switch and press from right button to the left button. Also, in the python code I am using the original image displayed in the html page, but if the user rotates the picture, its position changes. How can I pass also the rotated image (the actual position of the image) in the python code? -to actually rotate the image for as many times the user wants, as many times he presses any of the buttons.

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

And I am using the above method like this:

@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'))

CodePudding user response：

I think you will download the image again when you post a request. So, the image only rotate once.

CodePudding user response：

You can using session to mark your current angle of image

So whatever front-end do, you can rotate image with your session memory