I've got this ticket thats asking me to "frond-end optimize image size, dimension, quality from code"
the images are user uploaded in binary format? and I retrieve them + load them on the page using the API link they give me for that page.
Image size, dimension and quality -> I can set dimensions easily, change the images from jpeg to png where needed like such
<img
src={`data:image/jpeg;base64,${
data.images ? data.images[0].imageData : ""
}`}
className={styles.headerImage}
/>
But what else can I do for images?
Is it possible to crop images on the front end before setting it as say - a mobile or tablet bg picture?
Related
I've been trying to display an image using react from mongodb. I used multer to upload images and worked like a charm but my problem is, it seems that I cant output my image from the database. Heres my code.
<div className="img-preview">
{fields.dishImage ? (
<img
src={`localhost:5000/${menu.dishImage}`}
alt={menu.dishImage}
/>
) : (
<p className="image-text">
Image Preview <br /> Suggested Size 300x300
</p>
)}
</div>
The menu.dishImage contains something like this uploads/2020-07-15T09-13-56.569Zcovid palette.jpg
And I am getting an Error like this
GET localhost:5000/uploads/2020-07-15T09-13-56.569Zcovid palette.jpg net::ERR_UNKNOWN_URL_SCHEME
When I am opening that path from another tab I am seeing that the image is being shown.
Please add http:// in your url.
For example,
src={`http://localhost:5000/${menu.dishImage}`}
Ideally, You should use base_url from config so that you can use dynamic URLS.
Also, Use relative URLs instead of Static URLs
Actually you can try this alternative approach,
PS: You have to alter your code a bit for this method,
if you are working with big files greater than 16mb please go with gridfs and multer, else you can try this
( changing the images to a different format and save them to mongoDB)
If your files are actually less than 16 mb, please try using this Converter that changes the image of format jpeg / png to a format of saving to mongodb, and you can see this as an easy alternative for gridfs ,
The main goal is to convert the image to another format and then store them in mongoDB
i have put up a complete guide in this github repo, please to check them,
please check this github repo for more details..
I have a table view controller with a cell that contains an UIImageView. I also have a NSMutableArray that contains the url's. I want the url's to download the images and place them in the correct order. The NSMutableArray also contains some empty Strings and the cell that it corresponds too I want to have my placeholder image from my image assets.
How can I get it to work? I have also populated each cell with a title and summary but cannot workout how images work.
UPDATE
The code used for the image download. Note the photoLabels contains the array of images. Some of the photos are in the incorrect place once the first placeholder image occurs (It is one index late). Why is it doing that. Does anyone know why. I have println(photoLabels) and all the 50 strings are correct (with some just being "")
If anyone can help that would be great.
let imageURL: String = photoLabels.objectAtIndex(indexPath.row) as String
println(imageURL)
if imageURL == "" {
cell.imageContainer.image = UIImage(named: "placeholder")
} else {
cell.imageContainer.setImageWithURL(NSURL(string: imageURL))
}
return cell
Thanks
This seemingly innocent question actually entails a rat's nest of interesting details. These include:
Use lazy loading of the image, loading them just-in-time, rather than trying to download them up front;
Download the images asynchronously;
While downloading the images as needed, cache them (using NSCache, not NSMutableArray) so that if you scroll back to see some images recently downloaded that you don't have to download them again;
But, in response to memory pressure, make sure to empty the RAM-based cache (but still avail yourself of the persistent storage cache);
If user scrolls quickly down to the 100th row in the table example, make sure that the images for the visible cells don't get backlogged behind the requests for the previous 99 images (nb: you should test your app in suboptimal conditions, e.g. a poor 2G or 3G cellular environment, which can be simulated with the network link conditioner); and
You might want a placeholder image to show until the asynchronously retrieved image is downloaded (or retrieved from the cache).
The bottom line is that this takes a non-trivial amount of effort to do properly. As a result, I'd encourage you to use an existing solution, for example the UIImageView categories that are available from SDWebImage or AFNetworking. Both of these two frameworks offer a nice category for UIImageView that allows you to request the image to be downloaded asynchronously (it's sd_setImageWithURL in SDWebImage; it's setImageWithURL in AFNetworking).
I wrote a gae python script that would put in different ticker symbols to stockcharts.com and it will grabe the chart image by link using urllib2.
I'm successful in grabbing a list of the chart image links, however, when i try to feed them through a page stockcharts.com won't let me.
Instead of the chart image, it will show "Please visit stockcharts.com to view this chart"
This is an example link:
http://stockcharts.com/c-sc/sc?s=FUN&p=D&yr=1&mn=0&dy=0&i=p97813671848&r=1395885608674
How do i go around that? I want to be able to view the charts i want in 1 single page by loading all the images.
If i take the links and put them in the browser one by one it would work.
for i in range(0,len(charts)):
self.response.out.write('<img src="' + charts[i] + '"><BR>')
thanks!
I'm a senior majoring in Computer Science. I'm new at web development. I'm using ASP.NET C# with MS SQL Server. I've been trying to figure out how to load images from the database onto the webpage. I have successfully done this with the following code.
<asp:Image ID="imageClient" runat="server" style="width:100px; height:100px;"/>
protected void LoadImage()
{
ModelDataContext mdc = new ModelDataContext();
byte[] image = (from c in mdc.Clients select c.Logo).FirstOrDefault().ToArray();
string base64String = Convert.ToBase64String(image, 0, image.Length);
imageClient.ImageUrl = "data:image/jpg;base64," + base64String;
}
Right now I'm just doing it for 1 image. I will eventually be using a repeater to display multiple images on the same page.
The problem is with the loading of the image. It does some weird stuff to the masterpage that it uses. It's as if it isn't applying the CSS to the masterpage. But a few seconds later it looks as it should. The problem is definitely with the loading of the image because there is no other loading problems on any of the other pages.
I tried posting pictures of what I am seeing, but my reputation is too low.
The problem isn't browser specific, it does the same thing in all the major browsers...
If anybody could help me with the problem that would be great.
/############################/
Edit: I realized the images that I was trying to view may have had a filesize too large and it was taking too long to get it from the database and to load the image. My new approach is to save the image to a folder within my project and saving the imageurl in the database to refer to the actual location of the image.
Is this the best approach keeping in mind I am nowhere near at being advanced in Web Dev?
Thanks
Caching the image to a folder can give you benefits such as reducing load on the database. If the web pages are in a busy environment (ie. many users) caching everything you can reducing the load on the database is desirable.
As to the initial image-tag. As far as I remember, the asp:Image doesn't support a Style tag as with html img tag. I think you would need to define a css in a style-sheet (or embedded in the page) and refer to that with the CssClass tag instead - or - use the .Style("property") = "mysetting" in code instead.
F.ex:
imageClient.Style("Width") = "100px"
imageClient.Style("Height") = "100px"
I have a PDF file where every page is a (LZW) TIFF file. I know this because I created it. I want to be able to load it and save it as a bunch of TIFF files.
I can open the PDF file with CGPDFDocumentCreateWithURL, and get a page. I can even draw the page onto the screen.
What I WANT to do is draw the page into a bitmapContext, so that I can use CGBitmapContextCreateImage to get the image into a CGImageRef. However, in order to create a bitmap context, I need to know the size and resolution of the image. I can't seem to find out how to get either a CGPDFDocument or a CGPDFPage to tell me the resolution of the image object on that page.
Is there an easier way to do this that I'm not realizing?
thanks.
Ghostscript will work for you here :
gs -sDEVICE=tiff32nc -sOutputFile=foo-Page%d.tif foo.pdf
For 2 page document foo.pdf you should get :
foo-Page1.tif
foo-Page2.tif
From memory I think the output resolution from GS is that of the containing Page, not necessarily the resolution of the embedded file (unless these are the same to begin with).
If this is the case and you want to recover the image as it was originally res-wise, you can use iText (java) or iTextSharp(.net) to get to the image content stream (ie. Bytes) and write them out to disk in the format of your choice, after converting the content stream into a PdfImage iirc.
Hope the ghostscript option is applicable to save writing yet another utility...