im trying to load an image with p5.js loadImage(image);.
Im using the p5 library on my desktop.
Im not using the browser editor when im using the browser editor it handles the loading just fine
but im getting 2 errors the first one says
Fetch API cannot load
file:///C:/Users/3worl/OneDrive/Skrivebord/G_O_E/planet.jpg. URL scheme
must be "http" or "https" for CORS request.
the second one says
p5.js:65680 Uncaught (in promise) TypeError: Failed to fetch
Your error message is pretty explicit:
Fet API cannot load file:///C://..... URL scheme must be "http" or "https"
You are trying to access a file like you would do in the window file explorer with the path file:///C://... which doesn't work in javascript code.
If you look at the loadImage() doc you'll read:
The path to the image should be relative to the HTML file that links in your sketch. Loading an image from a URL or other remote location may be blocked due to your browser's built-in security.
So let's say that your sketch is located on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/sketch.js and your image on C:/Users/3worl/OneDrive/Skrivebord/G_O_E/assets/planet.jpg you will need to use loadImage('assets/planet.jpg') i.e. using the path of the image relative to the sketch.
Note that if you could also use an URL if the image is hosted online, like loadImage('https://earthsky.org/upl/2018/01/planet-artist.jpg') but that require that you host your image online which will require a webserver or an hosting service.
Related
I am trying to load an SVG to use as a CSS filter as described in https://developer.mozilla.org/en-US/docs/Web/CSS/filter. I am hosting the SVG on my root domain of the application and I am using the said SVG inside an iframe that I create using the srcdoc attribute. The html that the iframe loads is stored as a string inside my main application. The reason I use the iframe is because I render arbitrary user input in that iframe and I have set the sandbox attribute ( no cross origin requests and no access to root application cookies ). I am receiving the following error:
Unsafe attempt to load URL http://localhost:3000/filter.svg from frame with URL about:srcdoc.
Domains, protocols and ports must match.
I attempted to use the URL.createObjectURL function and pass the svg directly but I still receive the following error:
Not allowed to load local resource: blob:null/692e5c8b-f87e-49cd-9efd-68ee65e98ea6.svg
I even attempted to load an html file hosted on the same domain as the iframe and I still receive the error that it's unable to load URL localhost/filter.svg from localhost. I guess that's correct since the sandbox does not give same-origin access.
My question is how can I achieve the filter effect without removing the same-origin sandboxing? I cannot understand why using url() property of css is considered a dangerous cross-origin request but loading an image with the <img> tag is allowed...
Similar issue with no answer:
XMLNS W3 URL for SVG spec now throwing error in Chrome
I managed to fix the issue by inlining the svg to the html of the iframe. Relative issue that in the end helped me with the fix: SVG filter not showing up in Firefox, working fine in Chrome
I have seen lots of topics, but none of the solutions worked.
My app creates a PDF file with PHP and then retrieves the path into JS. After that I create an Iframe and tell the browser to print it.
The following code works only on chrome, but my POS Printer has a issue with chrome (documented) that creates alot of paper. So the solution is to use another browser...so my guess was to use Firefox.
$('#pdf-iframe').attr('src', json.pathToPdf).after(function()
{
setTimeout(function()
{
document.getElementById('pdf-iframe').contentWindow.focus();
document.getElementById('pdf-iframe').contentWindow.print();
}, 300);
});
In google chrome the PDF Preview is opened, in Firefox I receive the following error:
SecurityError: Permission denied to access property "print" on cross-origin object
What I have tried so far without success:
Use window.frames["pdf-iframe"].focus(); window.frames["pdf-iframe"].print();
Enable/disable pdfjs.disabled
Use imagick to convert to PNG (and it works - it allows to print) however the receipt PDF is broken in two pages (the receipt only has one page) AND it add's automatically headers and footers to the img (like the url; pages number; etc)
Installed "CORSE" extension in order to remove Cross-Origin
Set security.fileuri.strict_origin_policy as FALSE
Saved the PDF as base64_encode and then used <iframe src="data:application/pdf;base64,my_binary_data"
Added header("Access-Control-Allow-Origin: *");
Installed the latest Firefox version
Changed https://sitename to https://www.sitename
Changed the file path to match the path of the source code. The code is being executed in sitename.com/app/files and the file path is sitename.com/public/pdf-files/mypdf.pdf
Instead of retrieving the file path from PHP, read the file directly using header() and readfile() functions
Tried to use a button to open the iframe instead of auto-load/print
I am developing a web app, which has map functionality. i download the map library using script tag in the index.html file. But now since it is the script tag, the map library is downloaded each and everytime I reload the browser. So inorder to cache it, I tried downloading it using $.ajax({url:"libraryURL" , cache:true}) . This downloads the library and cache it which is fine.
But the problem is I use https: to load my application, which works fine if I download the map library using script tag . Since now I changed to $.ajax, I see i am getting the below error.
Mixed Content: The page at 'https://baseurl ' was loaded over HTTPS, but requested an insecure image 'http://online2.map.m/tile/'. This content should also be served over HTTPS
I am not clear why it is throwing error when I download the map script file using $.ajax, and the error doesn;t come up if I download it using script tag.
If I use $.ajax ,i see some request in http triggered which I don't knw why.And because of this i get the mixed content issue. Using script tag, don;t see this.
The url I use is exactly the same. Any idea ?
Please help...
Background:
I have a html and javascript program with which I want to use to get data from an excel file (file is located on my computer, in the same folder as my code and file type is csv although ideally I'd rather read xlsm if possible however I suspect csv is easier). I then want to be able to use this data to do a bunch of things. Ideally I want to be able run this in an iframe within a google earth (the desktop application) bubble however getting it running in any one browser would be okay. So far I have been trialing it in Chrome, IE, and an iframe in Google Earth but I've run into problems.
So apparently even though these files are on my computer in the same folder as my html and javascript this is considered a cross domain request. I am unable to change the server in any way and I have heavy restrictions on what I can download to such an extent that you can just assume that downloading something is not a solution. Doing some research I came across JSONP so I have been trying to use this method to get the data. However I'm running into issues trying to get it working and I'm not sure why.
Code:
This is the relevant code in my html file:
<script type="text/javascript" src="file:\\\O:\user name\folder name\filename.csv?callback=mycallback"></script>
Error:
This is the error I get in Chrome:
Failed to load resource: net::ERR_FILE_NOT_FOUND file:///O:/user%20name/folder%20name/filename.csv?callback=mycallback
I am not sure why the file is not being found. Any suggestions? I was wondering if the spaces in the foldernames are causing the issue? I hope this is not the case as I am unable to change the "user name" folder name to not have a space :-/. Thanks for any help.
does someone know a way, how I could find out if a loaded image is not an image because e.g. a 404 error was returned?
In case of an error I would like to set my image URL to e.g. white image.
I can't use server-side techniques like 404-error-handling or servlets, because I want to serve my images with Amazon S3 which doesn't have error handling or redirecting to a "default file" in case the requested image was not found.
The Image class has an addErrorHandler method. Register an error handler, which is fired in case the image was not loaded correctly. In this handler you can than set the image to a default image.
You may find the answer to this question useful. It uses jQuery but the idea of detecting that an image was not correctly loaded in the browser is well handled.
Not sure what the state of error handling was when this question was asked but S3 currently has 404 error handling. I use that to generate thumbs on demand.
Setup the bucket for static website hosting
Add a redirection rule under the static website hosting section such as:
<RoutingRules>
<RoutingRule>
<Condition>
<KeyPrefixEquals/>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>yoursite.com</HostName>
<ReplaceKeyPrefixWith>image/generate/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
In the above case a missing image (i.e. cat.jpg) will cause a call to:
http://yoursite.com/image/generate/cat.jpg
In my case I use that to deliver thumbnails.
Here's a use case:
<img src="http://awsbucketurl.com/thumb_cat.jpg">
This causes a 404 triggered by S3 which then calls my site with the url. I see that it is prefixed with 'thumb_' and will then fetch cat.jpg from S3, resize, upload thumb to S3 for next time and deliver it as well to browser for this session.
One caveat: If the image is called by a caching system then it will not receive the new image after the 404 but instead store the missing image.