保存部分图像

I have a webcam stream that I need to save a part of. It's overflowing to fit the box of a container so the stream will simulate to a certain size. There's a button which then takes a picture of the webcam stream and sends it to canvas. I then need to save the part of the image that's shown, not the overflowing parts. How would I best go around getting to that?

html:

<div class="outsideWrapper">
    <div class="insideWrapper">
        <div id="webcam">
        </div>
        <img src="<?php echo $this->baseUrl('/media/images/gallery/overlay.png'); ?>" class="coveredImage">           
    </div>
</div>
<div class="span4">
    <h2>Output</h2>
    <canvas id="canvas"  height="240" width="320"></canvas>
</div> 

So the canvas is where the image taken with the webcam is sent to, already positioned so that only that part that's actually visible is the part I need. The project is a Zend project so the image can be sent to the backend and processed with php is there's a solution there.