I'm currently trying to display PNGs with react-three-fiber but when I set a texture with a transparent background it doesn't show.
I've tried many things but noticed that if I take the base64 of the image and load it into a img html element, it doesn't display either, otherwise, if I put it as an href for an a element, I can download it with no issue.
Here is a live exemple where you can download the file but not load it into an img:
https://codesandbox.io/s/kind-elion-tznyx?file=/index.html
You may open the sample in a separated tab as codesandbox is preventing file download from the reduced window.
If anyone ever experienced this, maybe something in the base64 is wrong.
Testing this same demo in Safari, it will work correctly. In Firefox and Chrome it does not. Data URIs are best used for small images — they add a ~30% size penalty to the data they store, and a significant amount of extra processing is required to display them. Browsers including Chrome impose limits on the supported length of Data URIs for this reason, see https://stackoverflow.com/a/41755526/1314762 for details on those limits.
Related
I am working on a web app that allows users to upload files to our CDN network, and then displays the images on the web app. However, I noticed something weird when uploading images through iOS (Safari) and possibly other browsers too.
When the highest resolution image is selected, the image is uploaded in its correct dimensions and shape.
However, when a lower resolution is selected, the uploaded image ends up being rotated on upload. I am not sure, if this happens with the CDN, or somewhere with the iOS file select feature, but its weird, since it works fine with the "Actual size" image.
You can see images below, to re-produce the error.
Pay attention the image shape, and file size. As "Actual size" the file size is 3.5MB!
Now, after we click on "Choose image size", following appears. I will choose "Medium".
After, you will see the file size is just 164KB. Reduction of -95.31%.
Then, pay attention to the shape, after the image is uploaded. You will see it is different rotation.
Does anyone have any clue as to why this happens? I am not sure if this has anything to do with the CDN I am using, because as I said before, when the "Actual size" image is selected, the uploaded image is perfectly fine. Only when size is changed through iOS "File selector" it changes rotation.
Also, another concern I have, is that these high resolution images are not necessary for my application. Sometimes we are talking +8MB for images, due to their high resolution and dimensions. Does anyone know if it's somehow possible to specify the image size for uploads on iOS/Android as default - so the user does not have to do anything? That would be ideal.
The images generated during choosing by iOS are missing the data for Orientation in the EXIF data for the image. That's why the image is correct when you upload the actual image, it seems oriented properly, but isn't right when it is a different size. You can check that by uploading the original and different sizes at https://exifinfo.org/. You'll see the different Orientation data in the EXIF section.
Since this is an iOS Safari specific feature, you can't rely on being able to choose multiple sizes of images that are being uploaded. A more reliable, cross-platform solution would be to resize the image yourself using a Canvas. This will however still probably require the user to upload the full size image, then you would have to process it on the canvas and upload it to your API.
The company I work for stores some of their product images in Google cloud storage, and I've been able to fetch the images however when putting the img tags onto a page, they appear to be in the wrong orientation i.e landscape instead of portrait (no issues with images taken in landscape mode).
When viewing the image in a new tab however they appear correctly!
Is there a reason why this may be? Suggestions are appreciated.
I have tried putting the img on a blank page without an anchor wrapping it to see if that made a difference and it did not.
I'm guessing the OP is having problems due to EXIF data. If the original images contain EXIF data indicating that they should be rotated, special measures must be taken to get that data interpreted by a web browser when displaying a page. It is discussed here:
Is there a way to tell browsers to honor the jpeg exif orientation?
If the the solutions provided for exif orientation are not acceptable, the OP will have to preprocess the images to rotate them to proper orientation and save them that way on the serverside. Then the correctly rotated images can be delivered on web page.
When displaying a PDF with standard (US letter) size pages, the PDF appears to be 'zoomed out' in Chrome. In Firefox, the PDF shows at a better zoom level.
Here is an example:
http://www.pdf995.com/samples/pdf.pdf
When viewed in Chrome on a 4k monitor, it is zoomed out so far that you can see 1.5 pages. While in Firefox you can see roughly half of the first page which in our case is much more desirable.
Is there any way that we can display this PDF at a standard zoom. For example, setting some headers, etc.
I'm currently using PHP to display the PDF, by setting the following headers and then echoing out the file.
Content-type: application/pdf
Content-Disposition: inline; filename=filename.pdf
Any ideas or suggestions would be great!!
From the description above
Chrome was and still does generally use "standard" 100% zoom.
Whilst FireFox was using Fit Width ("roughly half of the first page").
Many pdf extenders but not all will use the Adobe Acrobat URL trailing fragment so for the example in question try
http://www.pdf995.com/samples/pdf.pdf#zoom=200
however that can be fickle and require a second refresh of same URL.
Better (for more consistency) with the questions description of Firefox at the time use.
http://www.pdf995.com/samples/pdf.pdf#view=FitH
Which for me, with my current window in Chromium Brave / Edge will be 136% on this occasion, but some other 100%hv on a different window setting or screen.
Note the above can be over-ridden as much HTML can by the clients setting so assuming they allow a PDF to run with its own control, it works but if they pre-set remember last PDF view setting it may not.
I have an issue in PDF exporting functionality in SSRS report.The report contains a PNG image with several lines.When I preview the report in browser(Both IE and Chrome) that image is displaying correctly but when I exported it to the PDF and open the file in PDF viewer software, the lines inside the image are getting blurry.
The image is loaded to a standard image control in SSRS report.I already have tried all the image size properties inside the image controller(like Original Size / Fit to size etc) and images with different resolutions, but still the issue is there. Please note that I can't change the image format from PNG to other one since I want to keep the image background as transparent.
Can someone help me to resolve this issue please?
This can be a number of things. Sometimes the image is fine but your screen resolution and the PDF viewer combined can make them look bad.
First, try to print the PDF and see if if still looks bad, if it looks OK printed then the chances are it's the screen resolution and/or PDF viewer causing it. I use Nitro PDF and they always look better than using Adobe Reader.
In anyway case, savingthe PNG with higher DPI setting will usually fix the issue. Typically I save PNG's at 600 dpi, which might be overkill but it does mean they are sharp on the PDF.
If you need a Windows tool to save at a different DPI, try Inkscape which is free. When you export images you can set the DPI to whatever you want. Try 600dpi and if that works.
On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -