CODEWITHSUNDEEP
jsfprimefaces
user1432155
user1432155

Reputation: 733

Display Images onclick using Jsf graphics image tag

I have a primefaces accordion which has a collection of images. I have rendered this images using jsf <h:graphicImage>tag using a servlet(Actually i display the thumbnail of the original image).

Want i want to do is that whenever a user clicks on a particular image in the accordion the same image should be displayed in my HTML5 canvas element.

Your help is appreciated

Upvotes: 0

Views: 1386

Answers (1)

Ravi Kadaboina
Ravi Kadaboina

Reputation: 8574

You should be able to do something like this:

<h:graphicImage library="default" name="images/graph.png" onclick="draw(this.src);" />
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
    function draw(imgSrc) {
        console.log(imgSrc);
        var ctx = document.getElementById('myCanvas').getContext('2d');
        var img = new Image();
        img.src = imgSrc;
        ctx.drawImage(img, 0, 0);
        ctx.beginPath();
        ctx.moveTo(30, 96);
        ctx.lineTo(70, 66);
        ctx.lineTo(103, 76);
        ctx.lineTo(170, 15);
        ctx.stroke();
        return false;
    }
</script>

More info: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images

Upvotes: 1

Related Questions