How to rotate the image in Flask?-CodePudding

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 rotated 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 the right button to the left button. Also, in the python code, I am using the original image displayed on 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

CodePudding user response：

The image will be saved as a file, you just use HTML tag 'src' to get it then show it on the browser, so I think you can rotate the image using CSS. given a box, use CSS to rotate the box.

you would not really want to save a photo every time you press and re-read it, even you use ajax, I think it is still not a good idea.