I am trying to access the source code inside the canvas tag. Is it possible to get source code inside canvas tag?
You cannot get the source code from canvas element . You need to check the javascript to see what's going on in the canvas . Canvas is similar to board where you can draw anything with javascript .
The canvas element is part of HTML5 and allows for dynamic, scriptable
rendering of 2D shapes and bitmap images. It is a low level,
procedural model that updates a bitmap and does not have a built-in
scene graph
If you use Chrome you're in luck. It has an experimental feature for inspecting Canvas elements. So you can actually profile the canvas element and see step by step each call, and see a shot of the output of that call.
In chrome type chrome://flags/ into the URL and once the page loads, find "Enable Developer Tools experiments". Close out of Chrome and once you load it back up, in the inspector you will find a new option under Profiles for "Capture Canvas Frame". Run that and it will output a list of every call performed.
I learned about this through twitter and the following link, enjoy.
http://www.html5rocks.com/en/tutorials/canvas/inspection/
Related
How to extract the image from this https://www.google.com/maps/#45.8118462,15.9725486,3a,75y/data=!3m7!1e2!3m5!1sAF1QipOH6lgU7bug2ndyW-9-Uq0kgKqcKDtnGei2N5Qo!2e10!6shttps:%2F%2Flh5.googleusercontent.com%2Fp%2FAF1QipOH6lgU7bug2ndyW-9-Uq0kgKqcKDtnGei2N5Qo%3Dw150-h150-k-no-p!7i3024!8i4032
(If the link disappears let me describe how to reproduce the question. Find any shop on Google Maps that has the "shop title image" appearing in the shop details on the left side when you click on that shop. Click on that image to expand it across the whole viewport.)
I found the <canvas> element that I guess contains the image. I tried to do .getContext('2d') on that canvas element, but I keep getting null.
If you are getting null when doing getContext("2d") it's because an other type of context was created already, in this case, a "webgl" one.
To convert that canvas to a new image, you'd normally call canvas.toBlob() (whatever the context type).
And if you need to crop that canvas content, you'd draw it on an other canvas.
But since they did not prevent the WebGL context to throw away its drawing buffer (by passing preserveDrawingBuffer in the getContext call), you'll only get a transparent image back from it.
Anyway none of these methods will retrieve the original image, but they will create a new image entirely (probably of lesser quality, and bigger in size). To retrieve the original image, check the network tab of your dev tools, or if you need to do it programmatically, inject a script that will spoof all fetch, XHR and HTMLImageElement objects in order to log their resource URL. But that becomes dirty.
I'm using the Markup Core extension and have created a custom tool with Edit Mode etc. The tool seems to be working fine on first adding to the canvas, dragging, resizing and on clicking save, I can see my new DotMarkup in the markups array.
However, when calling generateData and saving an svg string, an attempting to load the data onto a new layer using loadMarkups(svg, layerName) the custom markup is shown on screen but is unclickable, the markup is not visible in the markups arrays (on the editor, or in the svg markups array).
Any help appreciated
I've recently been looking into this as well, and unfortunately it turns out that exporting and re-importing custom markups is not yet supported by the MarkupsCore extension. If you look at the extension code and search for createMarkupFromSVG, you'll notice towards the end of the function that it's just a long switch with the built-in markup types. So, while your custom SVG is loaded, it's not considered a "markup SVG". To work around this issue you would probably have to parse the SVG string yourself and set the internal state of of the extension (such as this.markups) manually.
Jinternal frame Add jvlcEmbeddedmediaPlayerComponent problem is jDropdownlist open than list is back side list in vlc Control and other Problem is if maximize Jinternal Frame other vlc Component our Spreed Current Maximize jinternal frame look like Same thing jDropdown Control behavior.
How to Fix the Problems.
below Attach Image
You are trying to overlay a lightweight Swing component on top of a heavyweight AWT Canvas.
Use:
JPopupMenu.setDefaultLightWeightPopupEnabled(false);
This is what the example media player provided by vlcj does:
https://github.com/caprica/vlcj/blob/vlcj-3.0.1/src/test/java/uk/co/caprica/vlcj/test/basic/TestPlayer.java
I've been Googling around a bit for an answer and haven't found a definitive one either way: is it possible to play a video using an HTML5 canvas, and also allow the user to draw on this video? The use case, for some context, is to play a video on infinite loop so the user can draw multiple boxes over specific areas to indicate regions of interest.
As a bonus (:P), if I can figure out how to do this on its own, any hints as to how this could be done within Drupal? I'm already looking at the Canvas Field module, but if you have any hints on this point too (though the first one is the priority), that'd be awesome!
You can draw html5 video elements onto a canvas. The drawImage method accepts a video element in the first parameter just like an image element. This will take the current "frame" of the video element and render it onto the canvas. To get fluid playback of the video you will need to draw the video to the canvas repeatedly.
You can then draw on the canvas normally, making sure you redraw everything after each update of the video frame.
Here is a demo of video on canvas
here is a in-depth look into video and the canvas
I recently received this request from a client to provide this feature, and it must be CMS-friendly. The technique involves three big ideas
a drawing function
repeatedly calling upon the same drawing function
using requestAnimationFrame to paint the next frame
Assuming you have a video element already, you'd take the following steps
Hide the video element
Create a canvas element whose height/width match the video element, store this somewhere
Get the context of the canvas element with `canvas.getContext('2d') and also store that somewhere
Create a drawing function
In that drawing function, you would use canvas.drawImage(src, x, y) where src is the edited version of the current frame of the video;
In that drawing function, use recursion to call itself again
I can give you two examples of this being done (and usable for content management systems)
The first is here: https://jsfiddle.net/yywL381w/19/
A company called SDL makes a tool called Media Manager that hosts videos. What you see is a jQuery plugin that takes its parameters from a data-* , makes a request from the Media Manager Rest API, creates a video, and adds effects based entirely on data* attributes. That plugin could easily be tweaked to work with videos called from other sources. You can look at the repo for it for more details on usage.
Another example is here: http://codepen.io/paceaux/pen/egLOeR
That is not a jQuery plugin; it's an ES6 class instead. You can create an image/video and apply a cropping effect with this:
let imageModule = new ImageCanvasModule(module);
imageModule.createCanvas();
imageModule.drawOnCanvas();
imageModule.hideOriginal();
You'll observe, in the ImageCanvasModule class, this method:
drawFrame () {
if (this.isVideo && this.media.paused) return false;
let x = 0;
let width = this.media.offsetWidth;
let y = 0;
this.imageFrames[this.module.dataset.imageFrame](this.backContext);
this.backContext.drawImage(this.media, x, y, width, this.canvas.height);
this.context.drawImage(this.backCanvas, 0, 0);
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
}
}
The class has created a second canvas, to use for drawing. That canvas isn't visible, it's just their to save the browser some heartache.
The "manipulation" that is content manageable is this.imageFrames[this.module.dataset.imageFrame](this.backContext);
The "frame" is an attribute stored on the image/video (Which could be output by a template in the CMS). This gets the name of the imageFrame, and runs it as a matching function. It also sends in the context (so I can toggle between drawing on the back canvas or main canvas if needed)
then this.backContext.drawImage(this.media, x, y, width, this.canvas.height); draws the image on the back context.
Finally, this appears on the main canvas with this.context.drawImage(this.backCanvas, 0, 0); where I take the backcanvas, and draw it on to the main canvas. So the canvas that's visible has the least amount of manipulations possible.
And at the end, because this is a video, we want to draw a new frame. So we have the function call itself:
if (this.isVideo) {
window.requestAnimationFrame(()=>{
this.drawFrame();
});
This whole setup allows us to use the CMS to output data-* attributes containing the type of frame the user wants to be drawn around the image. the JavaScript then produces a canvasified version of that image or video. Sample markup might look like:
<video muted loop autoplay data-image-frame="wedgeTop">
I would like to display an animated gif on canvas with some transformations applied. To test things, I'm currently just trying to display the animated gif on the canvas, so that it is essentially equal to displaying the gif as a regular <img> tag.
I'm using Chrome and webkitRequestAnimationFrame. On each request frame, I draw the image. When the gif frame changes, this should be reflected on the canvas. This works only partially:
Just watching the canvas does not make it update. Instead, one, still frame is begin drawn.
Reselecting the tab (i.e. selecting another and selecting the canvas tab again) does update it to a new frame, but after that it freezes again.
This is a fiddle I set up: http://jsfiddle.net/eGjak/93/.
How can I draw an animated gif on canvas with it actually animating?
Answer no longer valid
It looks like the behavior described here (writing an img tag referencing an animated gif to a canvas results in different frames of the gif being written if the img is part of the DOM or visible) has changed at least in Chrome. There may or may not be documentation of what is correct behavior for this. :)
Also, webkitRequestAnimationFrame no longer has the behavior of taking one additional argument, an element X such that when X is not visible, the requested function will not run. For performance and battery life reasons, you may want many of the functions that you pass to requestAnimationFrame to check for visibility before they do anything that will require drawing.
Before:
Check out a fixed version:
http://jsfiddle.net/eGjak/96/
If you add a console.log() to the function that paints the image, you'll see that it is being called. The problem seems to be that the image itself does not animate, probably because the browser does not bother to update an animated image that is not part of the DOM.
My solution was to make the animated gif part of the DOM and size 0 and it works just fine.
You can verify that the animation is being shown on the canvas and not in the image tag by loading up http://jsfiddle.net/eGjak/96/show/ and inspecting the elements with ctrl-shift-I on Windows or Linux / alt-cmd-I.
EDIT: Here's a bonus!
webkitRequestAnimationFrame takes one more argument than the Mozilla equivalent to allow your animation to only run when the element that is being animated is visible. Check out
http://jsfiddle.net/kmKZa/8/
and open up the console. You'll see that when you hide the canvas, the animation function stops being called. When you toggle the canvas visible again, the animation function will be called again.