0

Hi everyone I use python 3 with opencv library it work's well but I noticed render is displayed in a new window with

cv2.imshow('image',img)
cv2.waitKey(0)
cv2.destroyAllWindows()

I just want to allow to user to change brightness on a browser but I got latency

So I decided to create

  • python API using flask
  • frontend using express server that render an index.html page

I don't know if It's the good way to make image processing with good performances.

Here is my api which work's well

@cross_origin()
@app.route('/brigtness', methods=['GET'])
def brigtness():
    image = cv.imread(cv.samples.findFile(MEDIA_PATH + "50cent.jpg"))
    if image is None:
        print('Could not open or find the image')
        exit('error')

    new_image = np.zeros(image.shape, image.dtype)

    alpha = 1.0                             # Simple contrast control
    beta = int(request.args.get('id'))      # Simple brightness control

    # Do the operation new_image(i,j) = alpha*image(i,j) + beta
    # Instead of these 'for' loops we could have used simply:
    new_image = cv.convertScaleAbs(image, alpha=alpha, beta=beta)
    cv.imwrite(MEDIA_PATH + "50cent-custom.jpg", new_image)

    _, data     =  cv.imencode('.jpeg', new_image)
    jpeg_base64 = base64.b64encode(data.tostring())

    return jpeg_base64

Here is my script to update brightness to frontend

const axios = require('axios').default;
var $ = require( "jquery" );
require("bootstrap-slider");

$(document).ready(function() {
    $("#ex6").slider();
    //$("#ex6").on("slideStop", function(slideEvt) {
    $("#ex6").on("slide", function(slideEvt) {
        $("#ex6SliderVal").text(slideEvt.value);
        //createImage(slideEvt.value.toString());
        updateBrightness(slideEvt.value.toString());
    });
})

function updateBrightness(value) {
    axios.get('http://localhost:5000/brigtness?id=' + value)
    .then(function (response) {
        var base64 = response.data;
        refreshImage(base64);
    })
    .catch(function (error) {
        console.log(error);
    })
}

function refreshImage(base64) {
    $(".img").attr("src", "data:image/jpeg;base64," + base64)
}

My scripts work's well but when I decided to update brightness when slider is triggered by "slide" event I got latency. How can I update brightness with less latency ? How to use python and opencv on a browser ?

wyllisMonteiro
  • 61
  • 3
  • 11
  • I am not aware of the flask, frontend, and all, but up to my understanding of your code, you can try to increase the speed by using another fast method to change brightness. [Refer to this](https://stackoverflow.com/questions/19363293/whats-the-fastest-way-to-increase-color-image-contrast-with-opencv-in-python-c) – Rahul Kedia Jul 10 '20 at 08:41
  • Thank's for your reply and for the link. I went to see but result is on a window and not in a browser. Maybe I don't use the goold way to show result in a browser do you have a link for the best ways to show opencv image on a browser ? I found nothing. Thank you a lot @RahulKedia – wyllisMonteiro Jul 10 '20 at 09:43
  • Consider whether you can do it in frontend, using javascript instead. [See the answer in this question](https://stackoverflow.com/questions/17754604/want-to-create-a-simple-image-brightness-control-slider). I anticipate this approach will be faster than trying to do it in with opencv in python (which requires loading an image from disk, doing pixelwise operations, doing jpeg and base64 encoding, ...). – vasiliykarasev Jul 11 '20 at 16:06
  • Thank you for your reply but i don't want to use javascript to make image processing. I noticed bad performance. So I think I have to use imencode function with opencv to get base64 and add it to `````` – wyllisMonteiro Jul 15 '20 at 14:46

0 Answers0