Adding an uploaded file as an <image> element in an SVG - javascript

If someone uploads an image with a <input type="file"/>, there are a million different ways to add the image somewhere as an <img> element or onto a <canvas>. I want to instead add it as an <image> element in an SVG and I'm totally stymied.
If I add the uploaded file to a canvas and use canvas.getDataURL(), I get a valid data URL that I can use as a background image or whatever. But setting the xlink:href of an <image> element to that URL does nothing. I've also tried adding the file directly without the canvas step, e.g.:
$("#file").on("change",function(){
$("image").attr("xlink:href",this.files[0]);
});
That seems to do something but still the image won't display. I have a width and height set on it. I've also tried various Blob URL methods and those all don't do anything.
How can I take the image file from a file input and display it as an <image> element in an SVG?
Any assistance much appreciated.

The this.files[0] returns a File object. The xlink:href attribute assigment takes string. The automatic conversion of File object to string results in the attribute being assigned the string "[object File]".
You could read the file as a data URL and then assign the data URL to the href attribute. As mentioned in comment by Robert Longson, using JQuery with SVG attribute requiring namespace can sometimes cause problems. I would suggest setting attribute using plain DOM. For example...
var xlinkNS = "http://www.w3.org/1999/xlink";
$("#file").on("change",function(){
var reader = new FileReader();
reader.onload = function (e) {
$("image")[0].setAttributeNS(xlinkNS, "href", e.target.result);
};
reader.readAsDataURL(this.files[0])
});

Related

CKEditor5 : how to add id attribute to img tag when image uploaded?

I'm using classic editor of CKEditor 5.
And the image upload adapter is using base64 upload adapter.
And my work environment is HTML + CSS + bootstrap + vanilla JS. Node.js is not used.
What I'm trying to do is as follows.
The user uploads the image
When the image is uploaded, Sets the id attribute of the image tag.
The id attribute of the img tag of the final output is output to the value set above.
Perhaps the final result is as follows.
<figure class="image">
<img src="{some image source...}" id="{some id that setted from above.}">
</figure>
First, I needed an event called when the image was uploaded.
When I looked up the official document, I found the following code sample.
const imageUploadEditing = editorRef.plugins.get('ImageUploadEditing');
imageUploadEditing.on('uploadComplete', (evt, { data, imageElement} ) => {
editorRef.model.change( writer => {
writer.setAttribute('id', '1121212', imageElement);
});
});
At first, I probably just run the above code, and the id attribute of the img tag of the final result is '11212' (just temporary data) I thought it would be set to have no.
but the id did not change at the time of editing or when the final markup data was calculated by calling the editor.getData().
So I looked up a little more and found that CKEditor5 was separated into two layers, model and view, and the code I ran earlier was like a code that modified the model, not the view (HTML markup data that the actual user sees).
Therefore, I added the downcast setting by referring to the official document as follows.
editorRef.model.schema.extend('imageBlock', { allowAttributes: ['imageID'] })
editorRef.conversion.for('downcast').attributeToAttribute({
model: {
name: 'imageBlock',
key: 'imageID'
},
view: 'id'
});
I think if i set it as above, the imageID attribute of the model is set when the image is uploaded, and when the model data is downcast and converted to View (like editor.getData() is called or whatever), the image element is found in the model and the imageID attribute is copied to the img HTML tag's id attribute
However, no changes were found in the editing point or HTML output.
Did I understand anything wrong? I just want to set an attribute when the image is uploaded, but I don't know what's so complicated Please help me.

Display image when src attribute is a file not a url

I am using a content script in my chrome extension that gets the src attributes (from several images from the user's active tab) in order to display them in my popup HTML file that is displayed when a browser action is clicked. Certain images that I need to display use src values that are paths to local files.
Example:
src = "/image/17_x.px?wid=450&hei=500&bgcolor=xxx...etc"
the src starts with a "/", has a brief identifier denoted by "17_x", followed by various attributes of the image. Also itemprop = "image" is set on these image elements. The "xxxx...etc" is just showing that other attributes and values are listed in the src
When I create a new image element with this "local" src, the desired image is not displayed in my popup html file. Is there another way that I can use this image data to display the image within my extension?
Cause: element.getAttribute("src") or $(...).attr("src") return the original html markup.
Solution: use DOM property instead element.src or $(...)[0].src to return a full URL.

Reference the same javascript file in SVG image and HTML Page

I have an html page with an svg image embedded on it.
The SVG image is in a separate file. The SVG image references a javascript file which performs some image positioning functions.
The HTML page references the same javascript file and has a control for zooming into the image and resetting the image zoom and position, the functionality of this is implemented in the javascript file.
What I want to do is when the image is re positioned set a flag so that the I know when to show and hide the reset image button on the html page.
Because I have referenced this javascript file twice I have 2 separate versions running and hence the flag being set by the svg reference isn't the same flag being read by the html reference. The problem is that the image positioning is initiated by the svg image and the zooming is initiated by the html page.
Any ideas how I can solve this problem?
May I suggest you do the following, let the script inside the SVG hide/show the button by calling the html page script.
The external script you access like this:
window.parent.toggleButton();
Then the button itself could be your "flag", if it is hidden or not.
I also found this code, which exist in the SVG file, where you can pass a reference to the SVG's clicked element to your html page:
function sendClickToParentDocument(evt)
{
// SVGElementInstance objects aren't normal DOM nodes,
// so fetch the corresponding 'use' element instead
var target = evt.target;
if(target.correspondingUseElement)
target = target.correspondingUseElement;
// call a method in the parent document if it exists
if (window.parent.svgElementClicked)
window.parent.svgElementClicked(target);
}
Src: https://stackoverflow.com/a/10516723/2827823

Javascript to fetch an Image Insted of displaying the Link

I need to display the image but I can only provide the link of the image which is generated.
and I need JavaScript to fetch that link and display that image instead of displaying the image link.
Assuming you already have the image url in a variable, you can use the following code:
img = new Image();
img.src = your_url;
element.appendChild(img); // where element is a DOM element - as returned by document.getElementById()

Image Data via Ajax - how can I display the image on the Page

I am creating a Domino Document via AJAX that contains a photo.
I am able to get the base64 image data back to the server in a Notes Domino Document.
Data is stored in a Richtext (textarea) field as
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAFA..........." - (this goes on for several lines)
I am trying to display on the Domino Webpage using passthru tag
<<image id= "pic1" >>
in the onLoad event of the Form i try to shove the data into the image element using this code:
//Photo Stuff
alert(document.forms[0].photo1.value);
document.getElementById("pic1").src = document.forms[0].photo1.value;
The alert is showing the data.
Picture is not appearing.
Please help.
Thanks
Mike
I was under the impression that inline images were possible using a data URI.
Like:
<img src="data:image/png;base64,
Your base 64 source. . . "/>
Or
document.getElementById("pic1").src =
'data:image/png;base64,' + document.forms[0].photo1.value;
Edit: tested... here's a jsFiddle:
http://www.jsfiddle.net/UySAb/1/
Mozilla's information on this: https://developer.mozilla.org/en/The_data_URL_scheme
Note: Josiah in his comments is correct as well, your target tag needs to be img, not image.
You can just create an Image object and put the base64 as its src, including the data:image... part like this:
var image = new Image();
image.src = 'data:image/png;base64,iVBORw0K...';
document.body.appendChild(image);
It's what they call "Data URIs" and here's the compatibility table for inner peace.

Categories