Check area size on Canvas

Question

Check area size on Canvas

Navigation

#1 by (1 votes)

4

I have a code that when you open the report information, a rectangle is created on top of each image in Canvas. However, these images have different sizes, but the canvas remains the same size. I need to make if the area of the image 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 Canvas is created 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>

This is the part I call Canvas in HTML :

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

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

javascript imagem canvas codeigniter

asked by anonymous 30.09.2015 / 16:30

1 answer

Read document array of bytes word in browser How to configure ReSharper to NOT add 'summary' comments

score 1 · Answer 1

Constraint is in 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 precisely: "context.rect (position_x, position_y, 39, 34);" At this stage you are giving fixed values.

I suggest modifying javascript for.:

    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.: link To check it works, just modify the width of the image.