I have been searching - am thinking what I want to do is not possible but thought I would check.
I have a few canvasses on an HTML page as follows: (these are IDs below)
canvasMain - this is going to display
a large version of an image
canvasThumbnail1 - this is going to
display a thumbnail image
canvasThumbnail2 - same as
above...etc
I have it working where I paint the canvasMain with the contents of the thumbnail. The problem is since the canvas is immediate it is copying the pixels as they are over to the canvasMain from canvasThumbnail. This is resulting in an enlarged pixelated image.
What I want to do is click on one of the canvasThumbnails and be able to grab the Image.src property as a string and then pull that into canvasMain instead of actually copying the pixels over from one canvas to another. Essentially just grab the address (local or say on Flickr) from where I can pull in the image. Pulling an image in to a canvas seems to scale it nicely.
From what I have seen I do not think that Image.src value is accessible through the 2d context. I enumerated through its properties and have only found nested objects or native code returns.
I figured that if I clicked on the canvasThumbnail, and then used (this) to get a reference to that canvas element and then grab the 2dcontext of that canvas I may be able to use a property of that context to get a string that represents the value of the Image.src.
Any ideas?
Thanks
Somehow you painted the image onto canvasThumbnail1, presumably from a (high resolution) Image element.
The canvasThumbnail1, or any canvas for that matter, has no memory on things painted on it. So if you paint a large Image onto a tiny canvasThumbnail, the high-resolution data does not exist on that tiny canvas. To get it you must use the original image again, or else you must paint to a larger canvas from the start.
In other words, instead of painting the thumbnail onto the main, you need to repaint Image element (that you used to make the thumbnail) onto the main.
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 have an object manipulation function that(right now) manipulates the scale of the objects inside of an array to give real-time size changes in relation with each other.
What I would like to know is if there's a way to change an object's width/height(to fit the screen size since it's a mobile app) and then reset the scale so that the new width/height has a scaleX/scaleY value of 1.
The width/height are properties that directly influence the scale of a DisplayObject. You cannot resize it without affecting the scale.
You can however:
Draw the image as bitmap
Redraw it if it's a primitive
Put it in a holder
A little about every solution:
Drawing a DisplayObject (or any IBitmapDrawable) is done through creating a BitmapData and using a draw() call. The up-side is that it will be a bitmap and thus save some rendering time. The downside is that if it's a large image it will take memory (can be critical for mobile) and it won't have interactivity/animation unless you make a script that would read the animation.
If you're drawing the element though the Graphics class's API, you might just make something like a resize() method that you would call on window resize/flip-orientation. Just utilise the clear() method of the Graphics object and redraw the whole thing.
Lastly, probably your best pick. Resize your object. Make a new Sprite (I choose Sprite because it's interactive and you probably want that) and add the resized object to that newly made sprite while the Sprite is just added to the display list like you added the resized object before. If it's hard to understand, here's some code:
myResizeableObject.width = newWidth;
myResizeableObject.scaleY = newScaleY;
var holderSprite:Sprite = new Sprite();
myResizeableObject.parent.addChild(holderSprite); // if you don't have a specific place to add the myResizeableObject, don't use myResizeableObject.parent - it's ugly
holderSprite.addChild(myResizeableObject);
Hope that helps you!
I currently have an html page that produces a line graph inside a canvas element. I have also implemented a feature so that when you click on a point in the graph, a table below the canvas displays the information for that graph point, and clears if you click somewhere that isn't a graph point on the canvas. However, there is currently no indicator for what graph point you have selected.
I would like to make it so that the dot you click on either gets bigger, or highlighted, or something. Unfortunately, I don't think there's any way to do that on the one canvas without needing to redraw the entire graph afterwards. If I drew a bigger dot on top of the original, I would then need to erase it and replace it with the smaller one, as well as redrawing the segment of the line graph that was covered by the larger dot.
I was looking into using a second canvas on top of the first with identical dimensions, using a z-index to control which was on top. However, I don't know how this would affect the click event. If two canvasses are on top of each other, is it possible for the click event to register the lower canvas? Does it only register the higher one? I guess I could just change the click event to be for whichever canvas is on top, but keep all the code for drawing on the canvas the same.
Any advice for how to solve this problem?
Solved a few of my own questions.
Firstly, the click event will only recognize whichever canvas is on top. However, I did like I said, and changed my click event to be for the top canvas, while leaving all instructions on the inside to be for the top canvas. Thank goodness I didn't use the 'this' keyword, or the change would have been much more annoying.
To make the graph points highlight, I first added a second canvas on top of my first one, placing them on top of each other by making their positions "absolute" and giving them a z-index of 0 and 1 respectively. Then, inside the if statement where the original click event recognized that a point had been clicked on, I told the top canvas to draw a larger dot on the same coordinates as the first dot (which I had saved in an array). First, I had it clear the top canvas though, so any other highlighted dots would no longer be highlighted. If the canvas was clicked on somewhere other than a dot, nothing was highlighted.
I am loading an image into an HTML 5 Canvas using drawImage method. How do I get a reference to that image later (maybe on some mouse-clicked event) so that I can do a transformation to the image (like rotation)?
Save a reference to the Image object you used to paint to the canvas.
Then,
Delete the canvas (clearRect)
Make the transformations using the canvas context
Draw the Image again
Go to 1 when you need to refresh the canvas
You can't. Once it's drawn on the canvas it's just pixels. No reference to the original source is retained by the canvas. If you want to maintain state information you have to do that yourself. Alternatively use SVG, that retains an internal DOM.
I would like to capture a zoomable image at a high resolution zoomed at 3x. Do you know of a way I can piece this image together without having to do it manually? Here is the image
After using bhups' solution, tweaking outputxand outputy for a good while, I tried something else.
I went back to the object page (in the above example, here), took the thumbnail image URL (http://www.metmuseum.org/Imageshare/ep/regular/DP145931.jpg), replaced regular with zoom and to my surprise got what I presume is the full image, with less effort:
http://www.metmuseum.org/Imageshare/ep/zoom/DP145931.jpg
You can tweak the URL to get the job DONE. Here is the URl for 3x image. http://media.metmuseum.org/mgen/metzoom/zoom3.ms?img=DP145931.jpg&wrapperid=11&outputx=1200&outputy=1601.067378252168&level=1&x=0&y=0&backcolor=0x00000
outputx and outputy are the output image dimensions. level implies the zoom level. and x and y are the top left corner of the selected rectangle.