Check area size on Canvas

Asked

Viewed 908 times

4

I have a code that when opening the report information, is created in Canvas a rectangle on top of each image. However, these images have different sizes, but the canvas remains the same size. I need to make if the image area is 1 the canvas is drawn smaller, if it is 2 draw the larger canvas and so on. My code is in MVC.

This part is where you create the canvas on top of the image:

<script type="text/javascript">
        function init(i) {
            var img = document.getElementById("foto" + i);
            var cs = getComputedStyle(img);
            var width = parseInt(cs.getPropertyValue('width'));
            var height = parseInt(cs.getPropertyValue('height'));
            $('#contentCanvas' + i).html('<canvas id="myCanvas' + i + '" width="' + width + '" height="' + height + '" >');
            drawImg(img, cs, width, height, i);
        }
        function drawImg(img, cs, width, height, i) {
            var myCanvas = 'myCanvas' + i;
            var canvas = document.getElementById(myCanvas);
            var c = document.getElementById(myCanvas);
            var ctx = c.getContext("2d");
            var context = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, width, height);
            drawRetangle(context, width, height);
        }
        function drawRetangle(context, width, height) {
            position_x = parseInt(width) / 2;
            position_y = parseInt(height) / 2;

            position_x = parseInt(position_x) - 20;
            position_y = parseInt(position_y) - 17;

            context.beginPath();
            context.rect(position_x, position_y, 39, 34);
            context.lineWidth = 1;
            context.strokeStyle = '#00FF00';
            context.stroke();
        }
    </script>

That’s the part I call the Canvas on HTML:

<img id="foto<?= $key ?>" alt="img" src="http://meusite.com.br/imgs/<?= $l->img_caminho ?>" onload='init(<?= $key ?>);'>

How do I so that in this code it checks the size of the area and as the value increases or decreases the size of Canvas?

javascript codeigniter image canvas

  • Can use CSS. Your c is the variable that receives the canvas. Do c.style.width = LARGURA and c.style.height = ALTURA. You check the image size and set a value for the canvas depending on what you need.

  • Sorry @Deesouza in this part I managed to make him take the width and divide in the middle and draw the canvas right in the photo. But the problem is that there are only 3 sizes the photos. You will choose whether you want the small, medium or large area of the drawing. Depending on the area you choose it will record in a field in the database 25,50,100 if it choose the 25, 50 the average and 100 the big. I need to know how I draw the canvas through the value that is in the database, and with this do the check: if it is 25 draw the smaller rectangle, 50 draw the middle and 100 the big.

  • You’ll have to use ajax to make a query in the database.

  • @Deesouza how do I do it? I don’t know much about Canvas

  • How’s your table in the database? You have one ID to the image ? If yes, this ID is what you pass as parameter in the function init() ?

  • @Deesouza this part I already made in the case. The canvas is already drawing on top of the image only that all are in the same size.

  • Let’s go continue this discussion in chat.

Show 2 more comments

1 answer

1

The embarrassment is in the function:

function drawRetangle(context, width, height) {
        position_x = parseInt(width) / 2;
        position_y = parseInt(height) / 2;

        position_x = parseInt(position_x) - 20;
        position_y = parseInt(position_y) - 17;

        context.beginPath();
        context.rect(position_x, position_y, 39, 34);
        context.lineWidth = 1;
        context.strokeStyle = '#00FF00';
        context.stroke();
}

More properly: "context.rect(position_x, position_y, 39, 34);" At this stage you are giving fixed values.

I propose that you modify javascript to.:

    function init(i) {
        var img = document.getElementById("foto" + i);
        var cs = getComputedStyle(img);
        var width = parseInt(cs.getPropertyValue('width'));
        var height = parseInt(cs.getPropertyValue('height'));
        $('#contentCanvas' + i).html('<canvas id="myCanvas' + i + '" width="' + width + '" height="' + height + '" >');
        drawImg(img, cs, width, height, i);
    }
    function drawImg(img, cs, width, height, i) {
        var myCanvas = 'myCanvas' + i;
        var canvas = document.getElementById(myCanvas);
        var c = document.getElementById(myCanvas);
        var ctx = c.getContext("2d");
        var context = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, width, height);
        drawRetangle(context, width, height);
    }
    function drawRetangle(context, width, height) {
        /*
        não é necessário
        position_x = parseInt(width) / 2;
        position_y = parseInt(height) / 2;

        position_x = parseInt(position_x) - 20;
        position_y = parseInt(position_y) - 17;
        */
        context.beginPath();
        /*
        é aqui que estás a colocar o tamanho fixo
        context.rect(position_x, position_y, 39, 34);
        */
        context.rect(0, 0, width, height);
        context.lineWidth = 1;
        context.strokeStyle = '#00FF00';
        context.stroke();
    }

The example is .: http://jsfiddle.net/q6jGr/147/ To check to work just modify the width of the image.

Browser other questions tagged javascript codeigniter image canvas

You are not signed in. Login or sign up in order to post.