I'm trying to upload a second img to the cropper that populates the second .img-result. The cropper should populae whatever was uploaded, and then when the save btn is pressed, the .img-result is updated.
I added the attribute data-up but I'm not sure how to call it in the JS.
// vars
var result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
upload = document.querySelector('.file'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', function(e) {
if (e.target.files.length) {
// start file reader
var reader = new FileReader();
reader.onload = function(e) {
if (e.target.result) {
// create new image
var img = document.createElement('img');
img.id = 'image';
img.src = e.target.result;
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// init cropper
cropper = new Cropper(img);
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
var imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// show image cropped
cropped.src = imgSrc;
});
.img-result {
border: 2px solid;
width: 50px;
height: 50px;
}
.img-result img {
max-height: 100%;
max-width: 100%;
}
.page {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.result {
display: flex;
}
.box {
padding: 0.5em;
width: 100%;
margin: 0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.img-w {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="page">
<div class="box">
<div class="options">
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<button class="btn save">Save</button>
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="1">
</div>
<div class="box">
<input class="file" type="file" id="file-input" data-up="2">
</div>
<div class="box-2">
<div class="result"></div>
</div>
<div class="result">
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="1">
</div>
<div class="box-2 img-result">
<img class="cropped" src="" alt="" data-up="2">
</div>
</div>
</main>
First of all, as I mentioned in comments. Id must be for each element of your DOM. So, you better change id="file-input" to id="file-input1" and so on.
And It looks like you want to get the attribute value data-up when save function called,
You can do that in this way
save.addEventListener('click', function(e) {
e.preventDefault();
// get result to data uri
document.getElementById('file-input1).getAttribute('data-up')
....
Related
I am currently creating a meme generator app where the user can submit an image, as well as top and bottom text. I want to make it so that after form submission, the text is added onto the image and styled using CSS. I have already tried adding a class to the elements and adding css to it but that does not work. Here is my code:
JS
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
//create the divs for the memes
let newDiv = document.createElement('div');
form.appendChild(newDiv);
topTxt.classList.add('top')
bottomTxt.classList.add('bottom')
memePic.src = img.value;
newDiv.append(memePic, topTxt.value, bottomTxt.value);
//set the textbox inputs equal to nothing
img.value = '';
topTxt.value = '';
bottomTxt.value= '';
})
CSS
div {
width: 30%;
height: 300px;
margin: 10px;
display: inline-block;
}
img {
width: 100%;
height: 100%;
margin: 10px;
display: inline-block;
}
.top{
color: blue;
}
#bottom-txt {
color: red;
}
HTML
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<script src="meme.js"></script>
</body>
</html>
You just need to fix up some of logic how the elements are being appended after form is submitted.
For that you need to div after your form which will hold you results and then order your element to be displayed. I have also added a line hr to have separator between each results displayed.
You can style your element the way you would like them to be - i have added some basic CSS to show some styling and an actual img url for demo purpose only.
Live Working Demo:
let form = document.querySelector('#meme-form');
let img = document.querySelector('#img');
let topTxt = document.querySelector('#top-txt');
let bottomTxt = document.querySelector('#bottom-txt');
let results = document.querySelector('.meme-results');
form.addEventListener('submit', function(e) {
e.preventDefault();
let memePic = document.createElement('img');
var hrLine = document.createElement('hr');
//create the divs for the memes
let newDiv = document.createElement('div');
let topText = document.createElement('span');
let bttomText = document.createElement('span');
//Top text
topText.classList.add('top')
topText.textContent = topTxt.value
//Img
memePic.src = img.value;
results.appendChild(topText);
results.append(memePic);
//bottom text
bttomText.classList.add('bottom')
bttomText.textContent = bottomTxt.value
results.append(bttomText);
results.append(hrLine);
//set the textbox inputs equal to nothing
//img.value = '';
topTxt.value = '';
bottomTxt.value = '';
})
.meme-results {
width: 30%;
height: 300px;
margin: 10px;
display: block;
}
img {
width: 100%;
height: 100%;
display: block;
}
.top, #top-txt {
color: blue;
}
.bottom, #bottom-txt {
color: red;
}
<html>
<body>
<form action="" id="meme-form">
<label for="image">img url here</label>
<input id="img" type="url" value="https://via.placeholder.com/150"><br>
<label for="top-text">top text here</label>
<input id="top-txt" type="text"><br>
<label for="bottom-text">bottom text here</label>
<input id="bottom-txt" type="text"><br>
<input type="submit"><br>
</form>
<div class="meme-results"></div>
<script src="meme.js"></script>
</body>
</html>
I am developing a news section that contains text and images in which the images to be clicked have to show their original size. Can someone help me with this?
<?php
$select_stmt=$db->prepare("SELECT * FROM teste ORDER BY id DESC;" ); //sql select query
$select_stmt->execute();
while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="container" id="fadein">
<div class="row">
<div class="col-sm-4">
<div id="imagem"><img src="upload/<?php echo $row['image']; ?>" class="imagem"></div>
<script src="scripts/javascript.js"></script>
</div>
<div class="col-sm-8">
<div class="col-sm-12" id="titulo"><?php echo $row['titulo'];?></div>
<br>
<div class="col-sm-12" id="sub_titulo"><?php echo $row['sub_titulo'];?></div>
<br>
<div class="col-sm-12" id="texto"><?php echo $row['texto'];?></div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-6" align="right">Editar</div>
<div class="col-sm-6">Eliminar</div>
</div>
<br>
<br>
<br>
<p class="barra"></p>
<br>
<br>
</div>
<?php
}
?>
(Probably second part is more usefull for your use case)
If you want pure javascript, you can set a onclick event listener and get images real size (Determine original size of image cross browser?) and set this size to image. (if you want it to set to old sizes on second click, save old size to a global variable and get then set). Which will look like this:
I'm not good with pure javascript but i guess this is it.
Add this code somewhere in your file. It will run for every image
<script>
window.onload = function() {
images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++){
images[i].onclick = function(e){
var isBig = e.target.getAttribute('isBig');
if (isBig === undefined || isBig == 'false'){
// make it big
e.target.setAttribute('isBig', 'true');
e.target.setAttribute('oldWidth', e.target.offsetWidth);
e.target.setAttribute('oldHeight', e.target.offsetWidth);
var newImg = new Image();
newImg.onload = function() {
e.target.style.width = newImg.width+"px";
e.target.style.height = newImg.height+"px";
}
newImg.src = e.target.getAttribute('src');
}
else {
// make it small
e.target.setAttribute('isBig', 'false');
e.target.style.width = e.target.getAttribute('oldWidth')+"px";
e.target.style.height = e.target.getAttribute('oldHeight')+"px";
}
}
}
}
</script>
This will set images width and height to original sizes.
If you want to make it fullscreen with absolute positioning, you need to create a new element and img tag. And you just need to set its src to image's src. Then you can show that image. Example:
<!-- add this somewhere in body -->
<!-- container -->
<div id="bigImage" style="z-index: 4; position: fixed; width: 100%; height: 100%; top: 0; left: 0; visibility: hidden;">
<!-- background. not necessary but usefull for close thing. -->
<div style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); cursor: pointer;" onclick="closeImage()"></div>
<!-- image element. object-fit: contain; for full window size -->
<img src="<?php echo $row['image']; ?>" alt="bigImage" id="bigImageChild" style="position: absolute; top: 5%; left: 5%; z-index: 6; width: 90%; height: 90%; object-fit: contain;">
<!-- close button -->
<span onclick="closeImage()" style="position: absolute; right: 20px; top: 20px; font-weight: 900; color: white; cursor: pointer;">X</span>
</div>
<!-- script for image -->
<script>
function closeImage() {
document.getElementById("bigImage").style.visibility = 'hidden';
}
images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++){
// on image click
images[i].onclick = function(e){
// set image src
document.getElementById("bigImageChild").src = e.target.src;
// show image
document.getElementById("bigImage").style.visibility = 'visible';
}
}
</script>
I need to set the image on is original size when i click on the first time and the second click to the image go back to is original size defined in the html.
I have a field which is upload image images but the problem is this field has add row functionality with the help of append function. What I want to show the image preview on select of the image in each added row so, please tell me how I can do this.
view page-
jQuery(document).ready(function() {
$("#append").click(function(e) {
e.preventDefault();
$(".inc").append('<div class="controls">\
<input name="product_image[]" id="product_image" class="form-control" type="file">\
Remove\<div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;"><img src="" class="imgpre" id="imgPrev" style="width: 200px; height: 150px; border: 1px solid #ddd" ></div><br>\
<br>\
</div>');
return false;
});
jQuery(document).on('click', '.remove_this', function() {
jQuery(this).parent().remove();
return false;
});
$("input[type=submit]").click(function(e) {
e.preventDefault();
$.map($(".inc :text"), function(el) {
return el.value
}).join(",\n")
})
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imgPrev').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#product_image").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-sm-2 control-label" for="parentId">Image</label>
<div class="col-sm-6 inc">
<input name="product_image[]" id="product_image" class="form-control" type="file"> <button style="margin-left: 50px; position:relative;left:575px;top:-31px;" class="btn btn-info" type="submit" id="append" name="append">
Add</button>
<br>
<br>
</div>
<div class="col-sm-10 col-sm-offset-2" style="margin-top: 10px;">
<img src="" class="imgPrev" id="imgPrev" style="width: 200px; height: 150px; border: 1px solid #ddd">
</div>
</div>
Starting with your code (but modified, separated CSS etc.) I came up with this quick solution :
$(document).on("change", "input.form-control", function() {
readURL(this);
});
const readURL = input => {
if (input.files && input.files[0]) {
let reader = new FileReader();
reader.onload = e => {
$(input)
.siblings("img")
.attr("src", e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
};
$("#append")
.click(() => {
$(".form-group").append(`
<div class="row">
<input class="form-control" type="file">
<br>
<img src="" class="imgPrev">
<button class="remove">Remove</button>
</div>
`);
})
.trigger("click");
$(document).on("click", "button.remove", function() {
$(this).parent().remove();
return false;
});
.btn-add {
margin-left: 50px;
position: relative;
left: 200px;
}
.row {
margin-bottom: 20px;
}
.row .imgPrev {
width: 200px;
height: 150px;
border: 1px solid #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<button class="btn btn-add" id="append">Add</button>
</div>
hello i have an image upload with image preview, when user upload image, a button remove show up for cancel that image(the image user upload) and switch to back to image default(for this case placeholder image), and the button remove got hidden because input file didnt have any value.
for now i success to show up the button when user upload. but when user click the remove. only the button remove got hidden, but the image still there. how to make the image back to placeholder when user click remove?
this is my code
$(document).ready(function() {
$(".input-file").on("change", function(){
if($(this).val() == "") {
$(this).parent().find(".image-upload-footer").css({"display": "none"});
} else {
$(this).parent().find(".image-upload-footer").css({"display": "block"});
}
});
$(".reset").click(function(){
$(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
});
});
this is the jsfiddle https://jsfiddle.net/uxsxuwzd/1/
thankyou
Please replace this code in your functions. You should have to reset the selected src of input file.
This is for multiple type of images in dimension.
$(document).ready(function() {
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview1').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile1").change(function () {
readURL(this);
});
});
$(document).ready(function() {
function readURLs(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_upload_preview2').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inputFile2").change(function () {
readURLs(this);
});
});
$(document).ready(function() {
$(".input-file").on("change", function(){
if($(this).val() == "") {
$(this).parent().find(".image-upload-footer").css({"display": "none"});
} else {
$(this).parent().find(".image-upload-footer").css({"display": "block"});
}
});
$(".reset").click(function(){
$(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
var newImg=$(this).attr('custattr');
$("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src",newImg);
});
});
.image-upload-footer p{
display: inline
}
.image-upload input[type=file]{
display: none;
}
.image-upload label{
margin-bottom: 0;
}
.image-upload img{
cursor: pointer;
}
.profileback .deleteThis{
position: absolute;
top: 6px;
right: 21px;
padding: 0;
}
.deleteThis span{
color: #fff
}
.image-upload-footer{
background-color: rgba(34, 34, 34, 0.87);
margin-top: -6px;
padding: 4px 10px;
}
.image-upload-footer button{
padding: 0px 5px;
border-radius: 100%;
margin-left: 15px;
}
.image-upload-footer button span,.image-upload-footer p{
color: #fff ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="col-xs-6">
<div class="image-upload">
<label for="inputFile1">
<img id="image_upload_preview1" class="img-responsive mainPic" src="http://placehold.it/350x150"/>
</label>
<input id="inputFile1" class="input-file" type="file"/>
<div class="image-upload-footer" style="display:none">
<button type="reset" custattr="http://placehold.it/350x150" class="btn btn-red reset">
<span class="fa fa-times"aria-hidden="true">X</span>
</button>
<p>remove</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="image-upload">
<label for="inputFile2">
<img id="image_upload_preview2" class="img-responsive" src="http://placehold.it/746x728" alt=""/>
</label>
<input id="inputFile2" class="input-file" type="file"/>
<div class="image-upload-footer" style="display:none">
<button type="button" custattr="http://placehold.it/746x728" class="btn btn-red reset">
<span class="fa fa-times"aria-hidden="true">X</span>
</button>
<p>remove</p>
</div>
</div>
</div>
This is for one type of images dimension
$(".reset").click(function(){
$(this).closest(".image-upload").parent().find(".input-file").val("").trigger('change');
$("#"+$(this).closest(".image-upload").parent().find(".img-responsive").attr('id')).attr("src","http://placehold.it/350x150");
});
How do I make this code run multiple drag and drop?
I know that in jquery it uses 'each function', but I don't know how to do that in js. I need the selector to become a class so it can use more than 1 object, not only 1 id. I got the tutorial from this site and already changed the
document.getElementById("example");
to
document.getElementsByClassName("example");
However, I haven't yet succeeded due to this >
Uncaught TypeError: droparea.addEventListener is not a function
Any suggestions?
DRAG AND DROP IMAGE
FIDDLE HERE >>
<div class="container">
<div class="row">
<div class="col-xs-2 left">
<div class="filedroparea">(Drag & drop file here)</div>
<img class="previewimage" alt="Preview Image" />
</div>
<!-- .left -->
<div class="col-xs-8 center">
<div class="box-wrap">
<div class="box-ads-1">
<div class="filedroparea">(Drag & drop file here)</div>
<img class="previewimage" alt="Preview Image" />
</div>
<div class="box-ads-2">
<div class="filedroparea">(Drag & drop file here)</div>
<img class="previewimage" alt="Preview Image" />
</div>
</div>
</div>
<!-- .center -->
<div class="col-xs-2 right">
<div class="filedroparea">(Drag & drop file here)</div>
<img class="previewimage" alt="Preview Image" />
</div>
<!-- .right -->
</div>
<!-- .row -->
</div>
<!-- .container -->
if (window.FileReader) {
// Current browser supports drag and drop
var droparea = document.getElementsByClassName("filedroparea");
droparea.addEventListener("dragenter", dragenter, false);
droparea.addEventListener("dragover", dragover, false);
droparea.addEventListener("drop", drop, false);
var showButton = document.getElementsByClassName("showdroparea");
showButton.addEventListener("click", showarea, false);
} else {
document.getElementsByClassName('filedroparea').innerHTML = 'Your browser does not support FileReader HTML5 API';
}
// Event callback functions
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
// Get list of dropped files
var dt = e.dataTransfer;
var images = dt.files;
// Reading first file
var image = images[0];
var reader = new FileReader();
reader.readAsDataURL(image);
reader.addEventListener("loadend", showPreview, false);
}
function showPreview(e, file) {
var imageElement = document.getElementsByClassName('previewimage');
imageElement.src = this.result;
document.getElementsByClassName("filedroparea").style.display = 'none';
imageElement.style.display = 'block';
document.getElementsByClassName("showdroparea").style.display = 'block';
}
function showarea(e) {
document.getElementsByClassName("filedroparea").style.display = 'block';
document.getElementsByClassName('previewimage').style.display = 'none';
document.getElementsByClassName("showdroparea").style.display = 'none';
}
.filedroparea {
width: 100%;
height: 100%;
text-align: center;
background: #ccc;
}
.previewimage {
display:none;
}
.showdroparea {
display:none;
cursor: pointer;
}