- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hi,
I toDataURL function supported on a canvas for a crosswalk deployment ?
Do I need plugin ?
this code:
var ctx = document.getElementById('avatarCanvas').getContext('2d'); ar img = new Image(); img.src = url; img.onload = function () { ctx.drawImage(img,0,0); alert( ctx.toDataURL('image/png') );
fails with "undefined" function
- Tags:
- HTML5
- Intel® XDK
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
We are both going to feel pretty silly. :-)
The toDataURL function is attached to the canvas, not the context. I didn't even notice it myself until I looked at my code. Almost everything else with the canvas happens with the context.
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Canvas.toDataURL works fine on Crosswalk. I use it three different places in my current project without difficulty. Are you saying your code works in the emulator or a webpage but not in your built app?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Barrett J.
Thanks thanks for your reply.
I got Undefined is not a function in emulator. I haven't tried it in build app yet/
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Seems strange, as it (toDataURL) works fine in the emulator. I hate to ask, but are you sure your "sweetAlert" is defined globally? Or set a breakpoint the line before and inspect ctx to see what is there and in its prototype.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yes the alert is defined.
This is it the ctx :
ctx: CanvasRenderingContext2D canvas: canvas#avatarCanvas fillStyle: "#000000" font: "10px sans-serif" globalAlpha: 1 globalCompositeOperation: "source-over" imageSmoothingEnabled: true lineCap: "butt" lineDashOffset: 0 lineJoin: "miter" lineWidth: 1 miterLimit: 10 shadowBlur: 0 shadowColor: "rgba(0, 0, 0, 0)" shadowOffsetX: 0 shadowOffsetY: 0 strokeStyle: "#000000" textAlign: "start" textBaseline: "alphabetic" webkitImageSmoothingEnabled: true __proto__: CanvasRenderingContext2D arc: function arc() { [native code] } arcTo: function arcTo() { [native code] } beginPath: function beginPath() { [native code] } bezierCurveTo: function bezierCurveTo() { [native code] } clearRect: function clearRect() { [native code] } clearShadow: function clearShadow() { [native code] } clip: function clip() { [native code] } closePath: function closePath() { [native code] } constructor: function CanvasRenderingContext2D() { [native code] } createImageData: function createImageData() { [native code] } createLinearGradient: function createLinearGradient() { [native code] } createPattern: function createPattern() { [native code] } createRadialGradient: function createRadialGradient() { [native code] } drawFocusIfNeeded: function drawFocusIfNeeded() { [native code] } drawImage: function drawImage() { [native code] } drawImageFromRect: function drawImageFromRect() { [native code] } ellipse: function ellipse() { [native code] } fill: function fill() { [native code] } fillRect: function fillRect() { [native code] } fillText: function fillText() { [native code] } getContextAttributes: function getContextAttributes() { [native code] } getImageData: function getImageData() { [native code] } getLineDash: function getLineDash() { [native code] } isPointInPath: function isPointInPath() { [native code] } isPointInStroke: function isPointInStroke() { [native code] } lineTo: function lineTo() { [native code] } measureText: function measureText() { [native code] } moveTo: function moveTo() { [native code] } putImageData: function putImageData() { [native code] } quadraticCurveTo: function quadraticCurveTo() { [native code] } rect: function rect() { [native code] } resetTransform: function resetTransform() { [native code] } restore: function restore() { [native code] } rotate: function rotate() { [native code] } save: function save() { [native code] } scale: function scale() { [native code] } setAlpha: function setAlpha() { [native code] } setCompositeOperation: function setCompositeOperation() { [native code] } setFillColor: function setFillColor() { [native code] } setLineCap: function setLineCap() { [native code] } setLineDash: function setLineDash() { [native code] } setLineJoin: function setLineJoin() { [native code] } setLineWidth: function setLineWidth() { [native code] } setMiterLimit: function setMiterLimit() { [native code] } setShadow: function setShadow() { [native code] } setStrokeColor: function setStrokeColor() { [native code] } setTransform: function setTransform() { [native code] } stroke: function stroke() { [native code] } strokeRect: function strokeRect() { [native code] } strokeText: function strokeText() { [native code] } transform: function transform() { [native code] } translate: function translate() { [native code] } __proto__: Object __defineGetter__: function __defineGetter__() { [native code] } __defineSetter__: function __defineSetter__() { [native code] } __lookupGetter__: function __lookupGetter__() { [native code] } __lookupSetter__: function __lookupSetter__() { [native code] } constructor: function Object() { [native code] } hasOwnProperty: function hasOwnProperty() { [native code] } isPrototypeOf: function isPrototypeOf() { [native code] } propertyIsEnumerable: function propertyIsEnumerable() { [native code] } toLocaleString: function toLocaleString() { [native code] } toString: function toString() { [native code] } valueOf: function valueOf() { [native code] } get __proto__: function __proto__() { [native code] } set __proto__: function __proto__() { [native code] }
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Very strange. I have to try this myself. What device are you emulating, just so I make sure I try the same thing?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Google Nexus 4 is the emulation device.
Is there a possibility that I'm using a wrong cordova 3.x plugin ?
What it the required plugin for the canvas ?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
We are both going to feel pretty silly. :-)
The toDataURL function is attached to the canvas, not the context. I didn't even notice it myself until I looked at my code. Almost everything else with the canvas happens with the context.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
OOOOps !
Yes Barrett this is it !
Thanks for your help!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You are very welcome!
![](/skins/images/71A9511A625CE5D5D45FB59952A4AA71/responsive_peak/images/icon_anonymous_message.png)
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page