jsf - 使用 Jsf 图形图像标签显示图像 onclick

Question

我有一个 primefaces 手风琴，里面有一组图像。我已经使用 jsf <h:graphicImage>标签使用 servlet 渲染了这些图像（实际上我显示了原始图像的缩略图）。

我想要做的是，每当用户点击手风琴中的特定图像时，相同的图像应该显示在我的 HTML5 画布元素中。

感谢您的帮助

Answer 1

你应该能够做这样的事情：

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

更多信息：https ://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images