I am using a theme which uses Dropdown.js to upload files.
The JS file is over 1000 Lines and I feel a bit lost.
What I am trying to achieve is that I have a container where you drop a file. I want that when you choose an image the image will appear as a preview in the same container. Right now when I upload an image the preview is a small 100x100 picture. I want it to fill out the whole content and be able to upload 1 image only.
I am not able to achieve it as I am pretty new and the big js file is confusing me. If someone can point me in the right direction it would be great.
You are searching in the wrong file, your js controls the user experience. You need to work in the css of the dropzone, and add a width auto, height auto. Now to upload only one file that goes in you specifications of your dropzone, max-file: 1.
Check the documentation.
https://www.dropzonejs.com/
Related
I've been creating a blog website. All post images should be 800x800 resolution. On the admin page, when the author uploading image to post, if he/she will try to upload a bigger than 800x800 resolution, I want to show an alert to an author like a bootstrap danger alert. How can I do it?
Before
After
Not completely sure, but try creating it using URL.createObjectURL() (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL, How to make a simple image upload using Javascript/HTML), don't alter the image dimensions using css, insert the image into the page, and just get the image width and height.
please is there any js framework or code that will let me resize an uploaded logo inside an picture,
like this example on picture
A :image to resize
B : tool to use
Thanks
i cane't upload image
the link below at vk
https://vk.com/id181761990?z=photo181761990_456239019%2Fphotos181761990
You can use jQueryUI to create the slider for 1-100% size, and on slider change value, resize the image pointing at it with an unique id.
I'd use an empty div with two backgrounds (shirt and image on it) to easily keep the image always in the middle of the shirt without using text aligns and calculated values.
I am trying to load some images from the users camera roll using Ionic 1. I am using a component which allows me to pull the location of the images and compress them so they become thumbnails for displaying.
I have got the point where I can recover the image location however the issue I'm having is displaying it in an img view tag. The component outputs the file location in a format like:
'/var/mobile/Containers/Data/Application/BLAH-BLAH/tmp/B08CABBD-596C-4F1A-8905-C652C9DCBC4D^L0^001_mthumb.png'
I have tried many approaches like moving this image to anther location within the phone, renaming it to a shorter name appending the image with file:// or local:// tags and added the sanitation changes to the ionic.js. Using all of this the image back shrinks in size and doesn't show the image.
Any help would be greatly appreciated.
Well, I'm try to customize the style of Cloudinary Upload Widget:
http://cloudinary.com/documentation/upload_widget
I want to apply the correct css for limit the image/canvas of the image preview during the progress.
Try to upload an image on the above page to see how it works.
During the upload, a preview is displayed:
Screenshot
I want to limit the width/height of the above image preview and whole loading bar. How? What's the css selector?
Maybe .image_holder or .thumbnail_inner but it's hard to tell, as there's half a dozen elements there. After you opened the image simply rightclick it and select "inspect element" or something similar.
The widget is only changing some elements during actual upload so you should be able to get a proper selector.
I am trying to protect my website content by putting scripts to deny the right click and to see the source code in the browsers. But this is not sufficient. I want to know how to watermark only the original file and not the image that is seen on the webpage.
For example, an image that users can see on the web without watermark and when they click right and select "Open image in a new tab" they go to "website.com/image.png" and they see the watermarked image.
Is this possible?
P.S.: Sorry for my bad English, I'm not a good writer.
Thanks
Serving users a image which is not watermarked is not a good idea because they can download it easily so the best way will be watermark every images and render it users by slicing it. Slice the image and show only the image and hide the water mark and whey they will open it in new window full image will be loaded with the water mark
For creating Watermark on the fly with php
http://www.developphp.com/view.php?tid=1147
And for slicing image i don't know how to do that but i know it is possible but there are many ways to do it like you can zoom it to hide watermarks.
First of all, this will not stop them from downloading the image without watermark, because they can disable javascript, or simply right click on the image and save it right there, or the worst: simply do a print screen and save it to paint then crop it. Probably the best option is to have watermark on all of your images, on the website and on the direct access.