On Jun 17, 2014, at 1:23 PM, Calven Eggert <[email protected]> wrote:

> that's cool.  Yes, please send me more info when you get a chance.  Thanks.

I use fabric.js from here: http://fabricjs.com
Below is the HTML, does this help? The form will need to be a WOForm with all 
dynamic elements from your component class.


<form>
<input type="submit" value="Submit">
<input type="hidden" id="ImageData">
</form>

<hr>

<canvas width="300" height="100" id="Canvas" style="border: 1px solid 
Black;"></canvas><br>
<input type="button" value="Show Image" onclick="imageFromCanvas()">
<input type="button" value="Clear" onclick="clearCanvas();" 
class="clear"><br><br>
<textarea id="ImageBase64" style="width: 300px; height: 100px;"></textarea><br>
<img id="ImagePreview"><br>

<script type="text/javascript" src="fabric.min.js"></script>
<script type="text/javascript">

var canvas = new fabric.Canvas("Canvas", {
        freeDrawingCursor: "pointer",
        allowTouchScrolling: false,
        backgroundColor: 'rgba(255, 255, 255, 1)',
        isDrawingMode: true
});

function imageFromCanvas() {
        canvas.isDrawingMode = false;

        var ImageBase64 = document.getElementById("ImageBase64");
        var ImagePreview = document.getElementById("ImagePreview");
        var ImageData = document.getElementById("ImageData");

        var canvasData = canvas.toDataURL({
                format: 'jpeg',
                quality: 0.5
        });

        ImagePreview.src = canvasData;
        ImageBase64.innerHTML = canvasData;
        ImageData.value = canvasData;
}

function clearCanvas() {
        canvas.clear(); 
}

</script>


> 
> On 2014-06-17, at 4:03 PM, Klaus Berkling wrote:
> 
>> Take a look at fabric.js. It uses the HTML canvas tag and allows you to get 
>> the image as png or jpeg in base64. 
>> You can then use a JavaScript to place the image data value into a hidden 
>> input field. You can do that onsubmit in the WOform. Everything else is 
>> normal.  Just did this to capture signatures.  I can give you more info 
>> later today when I get home. 
>> 
>> ... sent while out-n-about
>> 
>>> On Jun 17, 2014, at 12:41 PM, Calven Eggert <[email protected]> wrote:
>>> 
>>> Anyone know how to write a WO app to allow the user to draw in a browser, 
>>> capture the image and then use WO to store the image in a database?
>>> 
>>> _______________________________________________
>>> Do not post admin requests to the list. They will be ignored.
>>> Webobjects-dev mailing list      ([email protected])
>>> Help/Unsubscribe/Update your Subscription:
>>> https://lists.apple.com/mailman/options/webobjects-dev/webobjects%40berkling.us
>>> 
>>> This email sent to [email protected]
> 
> 



kib

"We keep moving forward, opening new doors, and doing new things, because we're 
curious and curiosity keeps leading us down new paths."
Walt Disney

Klaus Berkling
www.berkling.us | @kiberkli | Photography




Attachment: smime.p7s
Description: S/MIME cryptographic signature

 _______________________________________________
Do not post admin requests to the list. They will be ignored.
Webobjects-dev mailing list      ([email protected])
Help/Unsubscribe/Update your Subscription:
https://lists.apple.com/mailman/options/webobjects-dev/archive%40mail-archive.com

This email sent to [email protected]

Reply via email to