I am using MongoDB to upload and store images in Javascript.
However, when the image gets uploaded it appears in the inspect element as "/image.png". When you remove the slash in inspect element the image I uploaded appears.
How can I fix this?
You might need to specify a little bit more information in order to get the best possible answer.
My first question would be: "How consistent is the backslash?"
If it's in every single DB entry, then prior to pushing it to the page, I'd strip the backslash using something like the below:
var retImgSrc = retImgSrc.substr(1);
If the DB entry isn't consistent, or you find the consistency isn't to your liking, the logic may need to change.
Hope that helps
Related
Currently I am looking for efficient (means made by someone else) way to represent JS objects inside HTML page. Ideally I should provide arbitrary object and library should make dropdown or popup with all properties of that object that can be selected and viewed as well. Final goal is to make object representation as close to modern JS debugger interface as possible.
In case if I didn't get my point accross I want to find libarary that would allow to represent object on web page as on picture below.
So I would like to ask if any of you know a libarary that can help me to do this.
Update: I found that firebug-lite-debug.js has similar functionality but such approach requires unknown amount of work to extract code I need
Upadate: I ended up using json-formatter-js. It is able to render any js object and do it in lasy way so only expanded part of object is taken into account. Therefore gigantic things as window can be displayed.
It sounds like you just want a pre-made widget that will display an object as HTML?
I'd probably start with something like html-stringify
It spits out a mostly clean HTML string with basic formatting. You could use that directly in your page, or add some additional styles to help match the style of your page. You can try it out on RunKit to see if it'll meet your needs.
(RunKit is a nice way to try out packages like this, so you can see what the output looks like without having to install them.)
I'm about to conduct a survey using Qualtrics for my thesis; which requires me to measure choice-induced attitude change using an initial ranking task, followed by a choice task with responses tailored for each participant according to their responses from the ranking task (let's say comparing the options they ranked 'fourth and fifth'), and then the same ranking task again.
I've been having a small problem with it, as Qualtrics doesn't let me impose the correct criteria on 'carry-forward responses' option (needs a little JavaScript code to be embedded into the choice question, apparently). Indeed I found a webpage with instructions on how to do the exact thing: http://kurtmunz.com/2015/05/28/rank-order-carry-forward-in-qualtrics-with-javascript/
Following this logic was partially successful, because it only displays the text associated with selected options, but not the images of the said options, unfortunately. Since displaying the images is critical to my experimental setup, I need to find a solution and I guess the code given in the link just isn't written with the whole image thing in mind.
I was wondering if anybody has faced the same problem and/or has a solution to this.
Thank you very much!!!!
Instead of using insert image, try adding the images to the choices using html. I think the html will become part of the piped choice text. For example:
Choice text<br><img src='xxx' alt='yyy'>
Change the JavaScript to use double quotes around the piped fields.
Personally, I prefer to use a web service to sort and return rankings.
I'm trying to write a Chrome extension that as a part of what it's doing needs to add an image to the currently displayed html. I guess I need to use document.createElement and then insert it somewhere, but I'm not sure about two things:
The image comes as part of the extension, i.e. there's no direct link to it anywhere, so simply adding an img tag won't work. Unless I'm missing something.
Not Chrome-related at all: what is the best way to add the img tag to a specific location if the html elements do NOT have any id's? I can find the place I want to add the img to using regexps, and can rewrite the whole html if needed, but maybe there's a more subtle way I'm missing.
You can get image url from your extension folder by running:
var imgUrl = chrome.extension.getURL("image.png");
(it would look like this: chrome-extension://<extension_id>/image.png)
If you're using manifest-version: 2 you'll need to whitelist any resource in your extension that you inject into other documents. See this question for more info.
As to your second question - you need to provide more details. Does it have class? Do you know inside what tag is it (li, div)? You probably would be better off using jQuery for this - it has lots of pretty advanced selectors. I don't know what search criteria are you trying to use exactly so I can't suggest a concrete solution.
I am looking for ways to protect my product images and I don't know if there's anything out there better than what I've already found: disable right click, use a transparent image in front of your picture and watermarking. Obviously none of them is perfect but I was curious if someone came up with a better solution to this problem.
Also is there any rails plugin to aid with that ?
Thanks
I really, really hate blocking right mouse click. It reminds me nineties when on right mouse click you get message that coping of this site is forbidden ;).
You can't protect your picture. For me the best way is just to put some copyright information and that's all.
There is no way you can do that at all, that is just smoke.
When you uses images in your website, they are downloaded to the client and they can be found in the cache, even if you try to block the user from right clicking and saving it.
They can even look at your html/css/javascript find the location for your picture and put that in their address bar.
You can't stop people from pinching images on the internet, so don't waste your time trying. Instead use a combination of strongly worded copyright messages underneath the image, and only store low-resolution files on the server.
For a photography site I've built in Rails, I have Paperclip trash the original high-resolution photo after it has generated a selection of smaller thumbnails. Combine it with a watermark in a corner of the image and you should have enough to make it a pain to steal a high-quality image, while not inconveniencing users.
Frankly, if I was to visit your website and you'd disabled right-click, I'd be gone in a matter of seconds.
I was looking for something similar, but for random images. I have not found anything so I thought I'd contribute here.
My last solution, using signatures, is something that could be applied here, though with some modification which I have also included at the bottom.
We should differentiate between (at least) two things:
A. Prevent someone saving images from within their browser.
B. Prevent someone writing a script to rip all of your images automatically.
Solutions:
A.
Pretty much impossible and also not what you want. Imagine a website that hassles you when you try to use your browser the way it was meant to be used. Right you'd be unhappy. There are perfectly legitimate reasons for someone to want to save an image, the most basic and flattering one would be to use it as a wallpaper on their computer or phone.
The best solution would be to include a watermark. That way people are reminded of where the images are from and they can still use them for private things.
I think this general rule applies on the internet: if you don't want it to spread outside of your control and you receiving credit: don't put it online.
B.
This is a less nice scenario. The most basic thing I've once done to make ripping images somewhat harder is to a. use unpredictable urls to images and b. create a script on your server that when called will fetch an image from your file system and then output this image. For example: http://example.com/some_image.php The code is really simple:
<?php
$name = './img/ok.png';
$fp = fopen($name, 'rb');
header("Content-Type: image/png");
header("Content-Length: " . filesize($name));
fpassthru($fp);
Source: SO answer on the topic
So what I have done once is I created a script like above, but added a timing option in there so that calling it (from the same session) twice within lets say 10 seconds would return the same image. This way an automated script could only go as fast as 1 image every 10 seconds. Additionally you could make the url contain some sort of timestamp hash:
http://example.com/some_image_$(md5(Time.now + "secret")_Time.now).png so for example:
`http://example.com/some_image_aihfio1n...oi12nof_1396723820.png
What you'd do to check if fetching the image is allowed is:
You take the requested file name, strip off 'some_image' and then the md5 hash. You then check if the given time ('1396723820') is within now and 10 minutes (allow for fluctuation). Then check if the hash is correct for that timestamp + 'secret'.
You can see this as a signature that is sometimes used in digital communication, although very basic and not very strong or anything.
Using this method for your production images could be something like this:
http://example.com/some_image$(md5($image_id, "secret",$timestamp))_$image_id_$timestamp.png
$image_id here is some sort of static identifier for your image (file_name, id of the product in your db, etc).
Please anyone, correct me if my assumption that this makes it harder to predict file paths is incorrect. In the end, the first rule to creating encryption patterns is "don't do it". So is the second. But this is a fairly innocent one to play around with.
have a look on how commercial image suppliers (like iStockphoto.com) protect their images that and see if that fits your need.
I've been using a rteEditor very sucefully until now.
The problem is in this line of code:
document.getElementById(rteName).contentWindow.document.execCommand('insertHTML', false, html);
I'm passing an ABSOLUTE path to the html var such as ("http://www.url.com/file.html").
But when it execute this insert command the output is ("../file.html");
Its possible to use a jQuery command instead?
Any Suggestions?
Have you tried using 'insertImage' instead of 'insertHTML'?
Edit:
'insertImage' just takes the url of the image and creates an img tag based on that.
You can get the image after inserting it with jQuery like this:
var img = $("img[src='imgUrl']");
with 'imgUrl' being the url of the image you add, and then add the needed attributes to that.
An example without using jQuery is here at line 123.
In my experience, working with native rich text editors (aka div's with contentEditable="true" or iframes with designMode set to on) is very difficult. The API is inconsistent across browsers and their behavior is often unexpected and buggy. Because of this I tend to use document.execCommand() as little as possible. Instead I tend to reply on direct DOM manipulation.
With that in mind, here's how I'd try to solve the problem you described:
Create the an in-memory image element and set the appropriate url.
Find the DOM node that contains user's cursor.
Insert the in-memory image element into the DOM node found in the previous step.
The code needed to implement the second step is somewhat tricky and varies hugely across browsers. I'll try to post a working example in the next day or two. I hope this helps in the mean time.
As far as I understand, and have experienced it myself, this is 1. inherent to the browser's HTML editing engine and 2. it happens only when the image that you are trying to insert, and the address you are running the HTML editor from are on the same domain.
As a solution, if your server/provider allows this, you could set up a second subdomain that points to www, for example
www2.example.com
and link to the image as
http://www2.example.com
this should have the result that the absolute link remains untouched.
upon saving the HTML, you just have to replace all occurrences of www2.example.com to www.example.com.
Another, maybe simpler, way would be to run the WYSIWYG editor on www2.example.com and inserting the proper absolute URLs.
I think because of security reasons, you can not specify complete url such as www.example.com.
I believe that you should be able to use jQuery.
You will probably want to use something along the lines of
$(rteName).find('body').html('<img src="http://www.example.com/" alt="...">
but probably with some changes to the selector(s).