I created an online tool that uses javascript to manipulate elements of a supplied SVG image. I'm having issues in accessing the DOM,When I have the image in an object tag. But that prevents you from right clicking the image in a browser and clicking save. So I put image in an img tag.now I can't access the DOM. Canvas seems to also disable right click and save
What could be the possible issue and how can i fix it?
Related
I want to get the image that browser generates when we drag an element. Here is the simple example why I want to do this.
In the above image the two videos placed inside the black div like picture-in-picture. The black div is able to drag & drop. When I drag the black div the browser generates the draggable translucent image like in above picture.
In code implementation I am using dataTransfer setData & getData method to access dragged image. When I drop image and use dataTransfer.getData gives the dragged div ID and having only black background. I need the actual dragged image to store in state in the form of URL to use in application. How can I do this without using any external libraries?
I know the HTML2Canvas library generates screenshots like browser do. But is there any way to use/store browsers dragged image?
Thank you!
Edit: Here is the sample demo of what i want: https://codepen.io/AkshayPatil_/pen/oNoPNQE
I'm using the results on a previous Stackoverflow page to combine various layers on an html canvas: drawing images on 3 layer canvas and saving
And the resultant jsfiddle seems to be what I am after.
But now what I'm hoping to do is display that final composited image in a pop-up window (sized to the dimensions of the image) which will appear when the user clicks a button, but I am unsure how to do this.
I have thought about using the window.open() command but this seems to only open a pre-created webpage.
PS I am looking for a javascript solution not jQuery, thanks.
You could pass the img src to the new window
window.open(img.src,"image window",`width=${img.width},height=${img.height}`);
fiddle: http://jsfiddle.net/fhjwY/84/
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I have found ways of changing the zoom image using links with rel="smallImage:image1.jpg" etc, but I am creating an image at runtime and adding it to the page, so the link will not be there when the page first loads (which it seems like it needs to be).
When I generate the image at runtime, I add a thumbnail to the page and a link to open the thumbnail as the large image. I then want to be able to hover over this image to get the cloud-zoom functionality, but even if I use the code I mentioned above to set the image, I still see the original image as the zoom image.
I was wondering if there was a way I can use JQuery to change the zoom image at the same time I change the source of the image? I was hoping for something as simple as $("image1").CloudZoom.zoomImage = "image2.jpg" but nothing like that seems to work.
Thanks guys
You can place the thumbnail in a div and give the div an onclick event.
<div onclick="DisplayThumbnail(ImagePath)"><img src="ImagePath" /></div>
Call a javascript function and add this:
$('#CloudZoom').attr("href", newimagepath);
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
The cloudzoom uses the anchor tag's href to point to the image to use, so that is the reason we update the href to the new image tag.
I'm looking for a script that will allow a user to pick an image in an HTML page and drag it to a new location while allowing the other page's element to align around it.
While dragging the image should be completely visible (there are many scripts, like TinyMCE and CKeditor) which don't show the image while dragging and only show its new location and the elements around the dragged image after dropping it.
And just to be clear, the image is using the same z-index as the rest of the page (its inline).
I hope I was clear enough, let me know otherwise.
Something like jQuery Masonry? http://masonry.desandro.com/