使用 Jsf 图形图像标签显示图像 onclick答案

【问题标题】：Display Images onclick using Jsf graphics image tag使用 Jsf 图形图像标签显示图像 onclick
【发布时间】：2013-04-24 15:52:00
【问题描述】：

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

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

感谢您的帮助

【问题讨论】：

您的问题非常笼统和模糊。在相应地编写代码时，你到底卡在哪里了？
嗯.. 就像这样我已经成功地在手风琴中显示了图像，现在当用户单击特定图像时，该图像应该显示在我的 HTML5 画布中。我不确定如何将所选图像的值传递给画布元素。不幸的是，我无法发布代码抱歉。

标签： jsf primefaces

【解决方案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>

【讨论】：