I've been working on a small Chrome Extension to put together the things I've been learning. It's intended to remove the suggested reel on youtube and replace it with a motivational image to stay focused while studying. So far it works as intended but the image won't show, I've rewriting the 4th line in many different ways and can't seem to figure out what I should do different or if the issue is elsewhere. If anyone needs me to upload the code for may manifest.json folder let me know.
Thanks in Advance!
const contents = $("#contents");
const contentsParent = contents.parent();
contents.remove();
contentsParent.prepend("<img src='./images/motivated.jpg'>");
I managed to find a solution to the issue I was having and thought I'd post it in case someone sees this in the future. It looks like there was an issue with contents not being assigned it's value before the rest of the code ran so I worked around it with a setInterval that checks to see if contents has a value. Also created a URL version of the image I had saved since it was not uploaded before and this worked. Lastly I also added web accessible resources to my manifest.json file as you will see below.
"matches": ["<all_urls>"],
"resources": ["images/motivated.png"]
}]
function main(){
const contents = $("#contents");
if(!contents[0]) return;
window.clearInterval(checkId);
const contentsParent = contents.parent();
contents.remove();
// contentsParent.prepend("<img src='images/motivated.png'>");
const imgURL = chrome.runtime.getURL("images/motivated.png");
const htmlString = `<img class= "image" src="${imgURL}">`;
contentsParent.prepend(htmlString)
contentsParent.prepend("<h1>Get back to studying!</h1>").addClass("words")
} ```
Related
I'd like to take a screenshot of an image, and extract the image out of the screenshot.
For example:
I'd like to dynamically extract that image out of the screenshot. However, I want to be able to dynamically detect where the image to be extracted is in the screenshot image. So for example, if I screenshotted an image on Instagram, I'd like to dynamically extract the image from the screenshot. So I feel like I just need to come up with a calculation to find where "the main subject" inside of the screenshot image is.
I've done some research but most of what I've found are people wanting to extract an image from a scanned image in which everything surrounding the subject is mostly a solid color so I don't think that's going to work here.
I'm using Jimp (https://www.npmjs.com/package/jimp) as an image processor as it has no native dependencies and this is going into a React Native app.
Any help would be greatly appreciated. Thanks in advance!
I never did end up finding something that already existed so I built something myself. Using my img-items node module, I could accomplish this by doing the following:
const Jimp = require('jimp')
const imgItems = require('imgItems')
Jimp.read('image.png')
.then(image => {
return imgItems(image)
.then(items => {
const largest = items.reduce((p, c) => ((p.width + p.height) > (c.width + c.height)) ? p : c)
return image
.crop(largest.left, largest.top, largest.width, largest.height)
.writeAsync('largest.png')
})
})
I'm using EPUB.js and Vue to render an Epub. I want to display the cover images of several epub books so users can click one to then see the whole book.
There's no documentation on how to do this, but there are several methods that indicate that this should be possible.
First off, there's Book.coverUrl() method.
Note that I'm setting an img src property equal to bookCoverSrc in the Vue template. Setting this.bookCoverSrc will automatically update the src of the img tag and cause an image to display (if the src is valid / resolves).
this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
this.book.coverUrl().then((url) => {
this.bookCoverSrc = url;
});
})
The above doesn't work. url is undefined.
Weirdly, there appears to be a cover property directly on book. So, I try:
this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
this.coverSrc = this.book.cover;
});
this.book.cover resolves to OEBPS/#public#vhost#g#gutenberg#html#files#49010#49010-h#images#cover.jpg, so at least locally when I set it to a src results in a request to http://localhost:8080/OEBPS/#public#vhost#g#gutenberg#html#files#49010#49010-h#images#cover.jpg, which 200s but returns no content. Probably a quirk of webpack-dev-server to 200 on that, but if I page through sources in Chrome dev tools I also don't see any indicate that such a URL should resolve.
So, docs not helping. I googled and found this github question from 2015. Their code is like
$("#cover").attr("src", Book.store.urlCache[Book.cover]);
Interesting, nothing in the docks about Book.store.urlCache. As expected, urlCache is undefined, though book.store exists. I don't see anything on there that can help me display a cover image though.
Using epub.js, how can I display a cover image of an Epub file? Note that simply rendering the first "page" of the Epub file (which is usually the cover image) doesn't solve my problem, as I'd like to list a couple epub files' cover images.
Note also that I believe the epub files I'm using do have cover images. The files are Aesop's Fables and Irish Wonders.
EDIT: It's possible I need to use Book.load on the url provided by book.cover first. I did so and tried to console.log it, but it's a massive blog of weirdly encoded text that looks something like:
����
So I think it's an image straight up, and I need to find a way to get that onto the Document somehow?
EDIT2: that big blobby blob is type: string, and I can't atob() or btoa() it.
EDIT3: Just fetching the url provided by this.book.cover returns my index.html, default behavior for webpack-dev-server when it doesn't know what else to do.
EDIT4: Below is the code for book.coverUrl from epub.js
key: "coverUrl",
value: function coverUrl() {
var _this9 = this;
var retrieved = this.loaded.cover.then(function (url) {
if (_this9.archived) {
// return this.archive.createUrl(this.cover);
return _this9.resources.get(_this9.cover);
} else {
return _this9.cover;
}
});
return retrieved;
}
If I use this.archive.createUrl(this.cover) instead of this.resources.get, I actually get a functional URL, that looks like blob:http://localhost:8080/9a3447b7-5cc8-4cfd-8608-d963910cb5f5. I'll try getting that out into src and see what happens.
The reason this was happening to me was because the functioning line of code in the coverUrl function was commented out in the source library epub.js, and a non-functioning line of code was written instead.
So, I had to copy down the entire library, uncomment the good code and delete the bad. Now the function works as it should.
To do so, clone down the entire epub.js project. Copy over the dependencies in that project's package.json to your own. Then, take the src, lib, and libs folders and copy them somewhere into your project. Find a way to disable eslint for the location you put these folders into because the project uses TAB characters for spacing which caused my terminal to hang due to ESLINT exploding.
npm install so you have your and epub.js dependencies in your node_modules.
Open book.js. Uncomment line 661 which looks like
return this.archive.createUrl(this.cover);
and comment out line 662 which looks like
// return this.resources.get(this.cover);
Now you can display an image by setting an img tag's src attribute to the URL returned by book.coverUrl().
this.book = new Epub(this.epubUrl, {});
this.book.ready.then(() => {
this.book.coverUrl().then((url) => {
this.bookCoverSrc = url;
});
})
I'm using github pages to host a practice website. I've built a simple JS slideshow and the images in the slideshow are not displaying. When I use Atom live server to display the site, the images and slideshow work fine. When using github pages I inspected the active slideshow and it is moving through the image array fine as I can see the src attribute changing the way it should so I know the code is looping through the array properly. I'm not sure what is wrong.
the relevant JavaScript
const image = [
'../images/karakoy-1.jpg',
'../images/karakoy-2.jpg',
'../images/karakoy-3.jpg',
'../images/karakoy-4.jpg',
'../images/karakoy-5.jpg',
];
let i = 0;
const imageContainer = document.getElementsByClassName('slideshow-image');
const time = 3000;
function changeSlide() {
imageContainer[0].src = image[i];
if (i < image.length - 1) {
i++;
} else {
i = 0;
}
setTimeout('changeSlide()', time);
}
changeSlide();
I've also checked all the spelling and capitilization on the filenames. Everything checks out. Like I said, when I use Atom live server everything works fine.
UPDATE https://jtc10.github.io/Arcadia-Restaurant/
Here is a link to the page. Click the "reservations" link. The slideshow is on that page.
It's most likely an issue resolving relative paths between your local and live servers.
The requests with the relative paths are all returning 404 Not Found:
I prefer to use the full path from root instead. This takes the ambiguity out of the situation.
const image = [
'/images/karakoy-1.jpg',
'/images/karakoy-2.jpg',
'/images/karakoy-3.jpg',
'/images/karakoy-4.jpg',
'/images/karakoy-5.jpg',
];
It tries to load https://jtc10.github.io/images/karakoy-2.jpg which don't exist, remove the ../ from the image path.
I have created a file as part of a script on a network drive and i am trying to make it hidden so that if the script is run again it should be able to see the file and act on the information contained within it but i am having trouble doing this. what i have so far is:
function doesRegisterExist(oFs, Date, newFolder) {
dbEcho("doesRegisterExist() triggered");
sExpectedRegisterFile = newFolder+"\\Register.txt"
if(oFs.FileExists(sExpectedRegisterFile)==false){
newFile = oFs.OpenTextFile(sExpectedRegisterFile,8,true)
newFile.close()
newReg = oFs.GetFile(sExpectedRegisterFile)
dbEcho(newReg.Attributes)
newReg.Attributes = newReg.Attributes+2
}
}
Windows Script Host does not actually produce an error here and the script runs throgh to competion. the only guides i have found online i have been attempting to translate from VBscript with limited success.
variables passed to this function are roughly declared as such
var oFs = new ActiveXObject("Scripting.FileSystemObject")
var Date = "29-12-2017"
var newFolder = "\\\\File-Server\\path\\to\\folder"
I know ActiveX is a dirty word to a lot of people and i should be shot for even thinking about using it but it really is a perfect fit for what i am trying to do.
Please help.
sExpectedRegisterFolder resolves to \\\\File-Server\\path\\to\\folder\\Register which is a folder and not a file.
I get an Error: file not found when I wrap the code into a try/catch block.
I tested the code on a text file as well, and there it works.
So you're either using the wrong method if you want to set the folder to hidden.
Or you forgot to include the path to the text if you want to change a file to hidden.
( Edit: Or if Register is the name of the file, add the filetype .txt ? )
If you change GetFile to GetFolder as described in https://msdn.microsoft.com/en-us/library/6tkce7xa(v=vs.84).aspx
the folder will get hidden correctly.
I want to let users to download a specific file, by clicking on a button "Download". The button will be linked with many switchers, so I wrote a JS script that change the "href" tag to point to the correct static file.
I tried to follow many stackoverflow questions and read documentation about Django staticfiles, media files but did not understand what I need to do on my case. Any help would be really appreciated, let me please introduce what I did and ask for your help/opinion.
I want to let people download files that can be found in :
"/home/user/xxxx/xxx/project/my_app/static/"
Here is my function in views.py :
def send_file(request,file_name):
from django.contrib.staticfiles.storage import staticfiles_storage
import os
from wsgiref.util import FileWrapper
import mimetypes
filename = staticfiles_storage.url(file_name)
download_name = file_name
wrapper = FileWrapper(open(filename))
content_type = mimetypes.guess_type(filename)[0]
response = HttpResponse(wrapper, content_type=content_type)
response['Content-Length'] = os.path.getsize(filename)
response['Content-Disposition'] = "attachment; filename=%s" % download_name
return response
I need the exact path to open the file, so what I have done is that I defined on my settings STATIC_URL = "/home/user/xxxx/xxx/project/my_app/static/"
. I do not like this solution, because after it, if you check my source, you have the exact path of my project. If I defined STATIC_URL = "static/" it does not work. I looked for a way to get exact path for the static file but it did not work. Any help for this part ?
urls.py:
url(r'^download/static/(?P<file_name>[\w.]{0,256})$',views.send_file, name='send_file'),
template.html, only the button part :
Download
JS, only the part that when you click on a switcher, it changes the href tag of the HTML button :
"if you click on a switcher"
id = switcher-checked
var atag = document.getElementById("dl-link");
var url = "http://localhost:8000/test/download/static/"+id+".csv";
atag.setAttribute("href",url);
Is there a solution to use the {% url 'my_app:send_file %} tag in my JS ? I found that one solution is to put the script directly within "template.html", is it a good behaviour ?
My downloading is working perfectly, but I feel like all my choices are pretty bad (STATIC_URL and JS var url definition). I know that my question is quite dense, but I really need this help. Any examples would be more than appreciated. Thank you.
Couple of points. first one for STATIC_URL you can use "/static/" with starting and ending with slash instead of complete path. since you are trying download from same domain name no need to use complete URL "http://localhost:8000/your-url". You can simply use "/your-url" in js var url variable.
Django cannot render js files, so we have only one option, keeping it in template.html. For better maintaining of js code, try declaring global variable with urls in the template on document load and use them in your script. So that script part will be clear. for ex,
var all_my_urls = {
"url":"{% url 'my_app:send_file'%}"
}