I have a problem with pasting some images in some editable div.
Most of the time when I paste an image from word i get it in the form of a base64 image string. The problem is that some times when i paste in image i get
<img width="309" height="198" src="file:///C:/Users/Robert/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg" />
As you can see instead of the image string I get the URL to my temp folder, i think this has something to to with the image size but i'm not really sure.
I would also like to mention that i use firefox, but the same think happens in IE.
Is there a way i can get the image to be pasted as a base64 string ?
Update
I figured out that this only happens if the document is a .doc not .docx. But i would like to make it work from both types
Thanks alot.
Related
A pictures'upload and display html-based function.
part of html code like this:
<img src="" alt="Waiting" id="main-pre">
and part of js code:
$('#main-pre').attr('src', 'data:image/jpeg;base64,'+img_data);
"img_data" is the content of picture's base64.
when pic's format is jpg/png/gif/bmp, it's all fine, but when it goes to tif format, the tag can't display the pic.
I noticed tif's base64 code is very much longer than other formats, is this the reason? can't handle this, or what? I can't figure this out.
thx for your time
I've created a text editor, using a contenteditable div. The user can copy and paste text from word to the website. Only the images aren't working, because the src points to a local path.
I think I should encode the image to base64, before it is displayed, but the problem is, that the images cant be displayed, because they are local files.
Try using some remote server to hold the photos so that they can be utilized. Try something like picpaste.com, however they only hold files temporarily I presume.
So, what I have is a Chrome extension. It scrapes a page looking for certain phrases (such as 'smile') and replaces them with an image stored locally with the same name ('smile').
The problem is, I have ~1k images that are a mixture of .gif, .jpg and .png
So I am not sure of the most efficient way to load up the image with the proper src location.
Idealy I would have it try smile.gif, smile.jpg and smile.png until it found which one is right but I don't want crazy overhead
To clarify, I already know how to detect the reference words in text -> which gives me part of the filename (for example 'smile') -> but I have no way to know at this point whether 'smile' is stored locally as a jpg/png/gif so I can't direct the <img src=.... to the exact right location.
Would it be possible to go through the directory and create some json with filename: extension, and then reference this? I am assuming I can't do this in Javascript though
Any suggestions?
I have a Fancybox slideshow set up which is working perfectly for local images. Eventually when the site goes live, I want the client I am working for to be able to upload images to their Dropbox which will then be shown in the gallery.
I made stipulations that they must adhere to: the images to be contained in the first gallery must be named A1.jpg, A2.jpg, A3.jpg, etc... so my code can stay the same. All they have to do to update an image is replace A1.jpg with the a different image with the same name.
However this is not working. I have copied the link to the image for example:
https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg
Ive then read that the www needs to be replaced by dl to create a direct link to the image. This works fine when put into the Fancybox code:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/N_iwrQva1-/a1.jpg" alt="" />
All works well up to this point, but if I copy and paste this code and replace 'a1.jpg' with 'a2.jpg' it wont link to the image. Duplicating the method above to get the direct link to the a2 image gives the following:
<a class="fancybox-thumb" rel="fancybox-thumb"
href="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" title="image">
<img src="https://www.dropbox.com/sh/blahblah/uDPPXt8Uyl/a2.jpg" alt="" />
If you notice the file name changes in the last directory before the image name (even though the two images are next to each other in the same folder in Dropbox). Im presuming this is a safety feature in dropbox to prevent unscrupulous types just changing the filename and being able to access all the images in the directory, but its proving to be a pain in the butt for me! Any ideas how I can rectify this?
Well no sooner had I posted this question, the answer came up!
On the Dropbox help page, it says the public folder was no longer created automatically on new accounts - instead theyve made it so you can share the link to any single file if you want to. This doesnt help as Dropbox also add some encryption to the link so that the problem I described in the original post occurs.
It turns out all you have to do is enable a public folder in the account (Dropbox still make this easy to do) and then the URL to the images are in a much more orderly fashion, such as:
https://dl.dropboxusercontent.com/u/264305025/a1.jpg
https://dl.dropboxusercontent.com/u/264305025/a2.jpg
https://dl.dropboxusercontent.com/u/264305025/a3.jpg
Changing any of these with an image of the same name updates the image linked to by fancy box. Simple!
HI
I want to get an image from the system clipboard (Windows/Mac) and paste it into
can it be done in javascript?
No, JavaScript would not be able to paste image data into a web page. There are no HTML elements that can display pasted image data.
If there's a way to grab the data URI (I can't figure out how, can you? it seems only text is available from the clipboard) then you could append <img src="data:image/png;base64,9A8SDF7ADSF9=="> to a wysiwyg field where the gobbledygook is the data URI. Then assuming you want to save that, you'd have to do some parsing on submit, write the image to a file and do with it as you will, or store as a blob or something.