I'm using Contenttool :
https://github.com/GetmeUK/ContentTools
I would like to be able to change an image.
To do that, I click on the exiting image and upload a new one.
But, when I upload a file, width and height are at 1 x 1
And the image is not replaced by the new one. What I my doing wrong?
When I valid the page, my new image appear :
I've create a sample page :
http://portekoi.com/contentTool/test.html
Your problem directly come from the way contenttools manage images editing.
Instead of working with img tag, it use a div with a background image. The behavior between the two are completly different and is the source of a lot of issue related to image management.
The best solution to me would be to write a "real" image management plugin for contenttools that would deal with image editing in an.... img tag.
After that, you could just do a simple CSS rule like that :
img { max-width:100%; height:auto; } and your images would be responsive by default.
Related
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/
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 would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png
I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas
Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image
I am using heatmap.js to overlay a heatmap using the GoogleMaps plugin. I would like to be able to download the picture as an image along with the heatmap overlay. I tried the method heatmapInstance.getDataURL() only returns the overlay region and not along with the image on which it is overlayed.
You need to create an id which is used inside of your div and script tags
var heatmapInstance = h337.create({
container: document.getElementById('heatMap')
});
As you can see I got the element by id 'heatmap'. So inside of your div where you want to place the picture on the page just call the id 'heatmap'
<div id='heatMap'></div>
Then simply place an image under the heatmap by using css
#heatMap {
background-image: url(HinckleyTown.jpg);
height: 445px;
width: 840px;
}
I used the same id for the css, html and javascript.
I hit this problem recently and encountered all sorts of problems getting around it. The heatmap was generated with heatmap.js and displayed successfully over a background image using CSS background-image: as described above.
The problem came when trying to save both the heatmap and background as a single image on my local machine. I think this is the problem the OP was referring to. My understanding is that the problem arises due to how heatmap.js creates a canvas within an element such as a div
A detailed search didn't come up with a solution that didn't introduce a new set of problems. I did however come across a fairly neat solution which at least met my needs.
I used Steel.Liao's post ( https://stackoverflow.com/a/36077807/9438775 ) as the basis to clone the contents of the div using html2canvas.js into a new canvas. I then set the original div to display: none .
You can then just right-click on the new canvas to save it as a PNG image file. Both the heatmap overlay and the background are contained in the saved image.
I'm trying to load in some decently large images into a web application. The largest of these images can be 2800x2800. I load them in, display, and everything works fine.
My problem is, once they are loaded using:
var img = new Image();
img.src = 'myImageURL';
img.onload = function(){
//display image
}
The large images display on the page progressively, from top to bottom as if they are being loaded.
I want to remove this visually, and only display them once fully loaded and rendered in the browser.
I cannot change the image sizes either, because this web app is intended for the user to scale the images, all the way up to 100% of original size, so I must load the full 2800x2800 and resize it small.
Does anyone know how I could hide the image until it's rendered? I can hide it until loaded, but that's basically what I'm doing and it's the progressive render display I want to remove.
Thanks
Use the onload attribute on the <img> tag, something like this:
<img src="huge.jpg" style="display:none" onload="this.style.display='block'">
Substitute whatever you want for effects, but onload is your hook.
Demo: http://jsfiddle.net/DfCUQ/1/ (note: update the ?nocache=X in the demo for each time you load it)
You could make the css visibility to 'hidden' and have some text (or loading spinner, etc) in the place of the image until the onload event gets called.