Question

我有一个primefaces手风琴，有一组图像。我使用servlet使用jsf＆lt; h:graphicImage>标记渲染了这些图像（实际上我显示了原始图像的缩略图）。

我想要做的是，每当用户点击手风琴中的特定图像时，我的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

使用Jsf图形图像标记显示图像

1 个答案: