OnClick on Canvas

Question

OnClick on Canvas

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have an image and on it is drawn a Canvas. I need that when I click on the image it opens in the normal size of it with the drawn canvas object. For now I click on the image and only open it, the canvas does not appear. That's because I do not have the onClick and I'm not sure how I can put it.

This is the code I have to draw the canvas and open the image. But I need another way to open the image with the canvas drawn on top of it.

    <div class="img_lau_a">
                                    <a href="http://cdn.smokeshot.com.br/imagens/<?=$l->fot_caminho?>" target="_blank" class="pull-left" href="javascript:void(0);" style="padding-right: 10px;">
                                        <p id="<?= $l->fot_nivel ?>" class="num_lau" style="position: absolute; left: 23px; color: <?= $color ?>; font-size: 60px; z-index: 1000"><b><?= $l->fot_nivel ?> </b></p>
                                        <div id="contentCanvas<?= $key ?>">
                                            <img id="foto<?= $key ?>" class="img_lau" style="max-width: 320px; border-left: 50px <?= $cor ?> solid; position: relative;" alt="img" src="http://cdn.smokeshot.com.br/imagens/<?=$l->fot_caminho?>" onload='init(<?= $key ?>);'>
                                        </div>
                                    </a>
                                </div>

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

javascript html imagem canvas

asked by anonymous 26.06.2015 / 14:52

2 answers

Is it possible to get the name and value of all sessions by javascript? How to access Json object property?

score 1 · Answer 1

You can put the onClick dynamically with the .setAttribute ("onClick", "Function (" + parameters + ")"), if the function parameters are dynamic and .setAttribute ("onClick", "Function (parameters) ") in case of static.

var a = document.getElementById( id );
    a.setAttribute( "onClick", "Função( parametros )" );

Or you can also put it as an addEventListener.

<script>
var b = document.getElementById( id );
    b.addEventListener( "click", addAgain );

//função com exemplo diferente que é chamada na função acima 
function addAgain()
{
    var c = document.getElementById( id );
        c.addEventListener( "click", function(){
        document.getElementById( id2 ).innerHTML = "Hello World";
    });
}
</script>

score 0 · Answer 2

0

I put an onClick calling a javascript function, and in that function I put the code

window.open('<?= base_url('NomeDoController/NomeDaFuncao')?>/'+$caminhoQueQuero, '_blank');

02.07.2015 / 16:22