Strange question, I know. The main issue here is I am using a cool tool called cropit. In this, we upload one image, get a preview, and the process it however we want.
HTML:
<div align="center" id="image-cropper1">
<!-- This is where user selects new image -->
<label class="btn btn-success btn-file">Upload Photo<input type="file" class="cropit-image-input"/></label><br><br>
<!-- This is where the preview image is displayed -->
<label><div class="cropit-preview"><img class="prepic" src="preloadimage.jpg"></label>
<!-- Here I process the image -->
<button type="button" id="image1pick" class="btn btn-primary" data-dismiss="modal" disabled>OK</button></div>
JQuery:
$('#image-cropper1').cropit();
$('#image-cropper1').change(function() {
$('#image1pick').prop('disabled', false);
});
$('#image1pick').click(function() {
imageData1 = $('#image-cropper1').cropit('export', {originalSize: true});
$.post('somephp.php', { imageData1: imageData1 }, function() { $('#image1pick').data('clicked', true) })
});
Now, what I want to achieve is to add another <input type="file"/> button that uploads 6 images at once and get them on 6 different ".cropit-preview" divs. It's essential, since the user can zoom and rotate the image in the preview. Is there a way to get multiple files and add them in every preview div in this given tool structure?
EDIT:
Please look at the doc: http://scottcheng.github.io/cropit/
The problem is the structure. Let's say I have three different croppers. The structure would look like this:
JQuery:
$('#image-cropper1').cropit();
$('#image-cropper2').cropit();
$('#image-cropper3').cropit();
HTML:
<!-- Cropper No 1 -->
<div id="image-cropper1">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>
<!-- Cropper No 2 -->
<div id="image-cropper2">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>
<!-- Cropper No 3 -->
<div id="image-cropper3">
<input type="file" class="cropit-image-input" />
<div class="cropit-preview"></div>
</div>
As you see here each file input and preview div is inside the numbered div and i coupled. But now I want to have an input, which upload three images at the same time and fits to every image-preview in every numbered div. How can I achieve this?
To copy the file selection from one input to another, you can do something like:
var file1 = document.querySelector('#image-cropper1>input[type=file]');
var file2 = document.querySelector('#image-cropper2>input[type=file]');
file2.files = file1.files;
For <input type="file"> elements, the files attribute points to a FileList object, described here.
Try this:
$("#destinationFileInput").prop("files",$("#sourceFileInput").prop("files"));
I would do something like this:
//external.js
var doc, C;
$(function(){
doc = document;
C = function(tag){
return doc.createElement(tag);
}
$('#upload').change(function(ev){
var out = $('#output'), fs = this.files, fl = fs.length;
if(fl > 6){
console.log('Too many files');
}
else{
var dv = C('div');
$.each(fs, function(i, v){
var fr = new FileReader, ig = C('img'), cv = C('canvas'), z = cv.getContext('2d');
fr.onload = function(ev){
ig.onload = function(){
cv.width = this.width; cv.height = this.height; z = cv.getContext('2d'); z.drawImage(this, 0, 0); dv.append(cv);
}
ig.src = ev.target.result;
}
fr.readAsDataURL(v);
});
out.append(dv);
}
});
$('#send').click(function(){
var fd = new FormData;
$('canvas').each(function(i, e){
e.toBlob(function(b){
var bf = new FileReader;
bf.onloadend = function(){
fd.append('image_'+i, bf.result); fd.append('count', i+1);
}
bf.readAsArrayBuffer(b);
});
});
/*
$.post('yourPage.php', fd, function(response){
response comes back here
test on PHP on a separate PHP page yourPage.php
<?php
if(isset($_POST['image_0'], $_POST['count'])){
for($i=0,$c=$_POST['count']; $i<$c; $i++){
$ig = 'image_'.$i;
if(isset($_POST[$ig])){
file_put_contents("resricted/$ig.png", $_POST[$ig]);
}
}
}
?>
});
*/
});
});
/* external.css */
html,body{
margin:0; padding:0;
}
.main{
width:980px; margin:0 auto;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<link type='text/css' rel='stylesheet' href='external.css' />
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<form>
<input type='file' multiple='multiple' id='upload' />
<input type='button' id='send' value='Send to Server' />
</form>
<div id='output'></div>
</div>
</body>
</html>
Just assign source input tag file to the other one like below:
If I have two input tags: source and target.
<input id="source" type="file" name="file" accept=".jpg,.jpeg,.png" multiple="multiple" aspect="1" >
<input id="target" type="file" name="file" accept=".jpg,.jpeg,.png" multiple="multiple" aspect="1" >
let source = document.getElementById("source");
let target = document.getElementById("target");
source.files = target.files;
Thanks for Ourobonus's hint.
If you only want to show image's thunmbnail, you can reference
https://developer.mozilla.org/en-US/docs/web/api/file_api/using_files_from_web_applications.
Related
I am trying to create a comment box where on each submit a new is dynamically created. The inner elements of the <div> being 3 buttons Edit, Post, Cancel and a close icon(image). These are also dynamically created. I finally append them all together. The below code would generate something like the below image on two submits. The error I'm facing is that, whatever <div>'s close icon/button is clicked, always the last <div> is being affected. Here I tried to close 'Hi' but 'hello' is being affected.Also there is a duplication of the <div> on even comments.
Kindly help me correct these issues.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<textarea id="ta" rows="30" cols="30" readonly></textarea>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var newDiv="",i=1,ta="";
function add() {
i++;
ta=document.getElementById('ta');
newDiv = document.createElement("div");
newDiv.id = "d"+i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
newP=document.createElement("BUTTON");
newP.id="p"+i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
newImg=document.createElement("IMG");
newImg.id="i"+i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
newBut1=document.createElement("button");
newBut1.id="b"+i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
newButt1=document.createElement("button");
newButt1.id="bt"+i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
}
</script>
</body>
</html>
Try this code. I have changed textarea to div.
Initial i to 0 instead of 1. You can also set it to 1. It won't affect the functionality.
Some variables were global, I have changed them to local variable now like newDiv,newP, newImg etc.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<!--<textarea id="ta" rows="30" cols="30" readonly></textarea>-->
<div id="ta"></div>
<br>
<input type="textbox" id="tb"></input><br>
<button onclick="add()">Submit</button><br>
<script type="text/javascript">
var i=0,ta="";
function add() {
(function(){
i++;
var temp_i = i;
ta=document.getElementById('ta');
var newDiv = document.createElement("div");
newDiv.id = "d"+temp_i;
newDiv.style.display="block";
newTa = document.createElement("input");
newTa.type="text"
newTa.id = "t"+temp_i;
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
newTa.style.display="block";
newTa.onclick=function(){
console.log(temp_i);
console.log(i);
newP.style.visibility="visible";
newImg.style.visibility="visible";
newBut1.style.visibility="visible";
newButt1.style.visibility="visible";
};
// document.querySelector('body').addEventListener('click', function(event) {
var newP=document.createElement("BUTTON");
newP.id="p"+temp_i;
newP.innerHTML="Edit";
newP.style.visibility="hidden";
newP.style.display="inline";
newP.onclick=function()
{
newTa.removeAttribute('readonly'); // only needed the first time
newTa.readOnly = false;
//newTa.setAttribute("readOnly","false");
//newTa.readonly='false';
//newP.innerHTML="wrng";
}
var newImg=document.createElement("IMG");
newImg.id="i"+temp_i;
newImg.src="http://www.freeiconspng.com/uploads/close-icon-30.png";
newImg.style.width="20%";
newImg.style.height="20%";
newImg.alt="close";
newImg.style.visibility="hidden";
newImg.style.display="inline";
newImg.onclick=function()
{
newDiv.innerHTML="";
//newDiv.remove();
}
var newBut1=document.createElement("button");
newBut1.id="b"+temp_i;
newBut1.innerHTML="Post";
newBut1.style.visibility="hidden";
newBut1.style.display="inline";
newBut1.onclick=function(){
//newTa.readonly='true';
newTa.setAttribute("readOnly","true");
}
var newButt1=document.createElement("button");
newButt1.id="bt"+temp_i;
newButt1.innerHTML="Cancel";
newButt1.style.visibility="hidden";
newButt1.onclick=function(){
newTa.value=document.getElementById('tb').value;
newTa.readonly='true';
}
newDiv.appendChild(newTa);
newDiv.appendChild(newP);
newDiv.appendChild(newImg);
newDiv.appendChild(newBut1);
newDiv.appendChild(newButt1);
var b=""
b="t"+temp_i;
ta.appendChild(newDiv);
document.getElementById(b).value=document.getElementById('tb').value;
})();
}
</script>
</body>
</html>
Why not you use jquery to minimize your code campaign. Below is the code which will fix your problem.
<!DOCTYPE html>
<html>
<head>
<title>Comment</title>
</head>
<body>
<br>
<div class="container">
<input type="textbox" id="tb"><br>
<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br />
</div>
<button class="submit">Submit</button><br>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.submit').click(function() {
var element = '<div class="container">'+'<input type="textbox" id="tb"><br>'+
'<button>Edit</button><button>Post</button><button class="cancel">Cancel</button><br /></div>';
$('.submit').before(element);
});
$('body').delegate('.cancel', 'click', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
Thanks
I am using fengyuanchen jQuery cropper
I have the cropper set to be responsive. This means that the displayed width/height of the image being cropped may not be the true native width/height. I need to get the displayed width/height so that I can calculate where to crop the original full-size image when applicable.
I read this example in the docs:
var imageData = $().cropper('getImageData');
However, console.log(imageData); returns this:
> n.fn.init {}
> __proto__ : Object[0]
/* Inside this is every custom defined js function */
If anyone has experience with this it would be a major help.
For anyone else with this issue:
I'm currently just grabbing the .width() of the .cropper-canvas object like this, but I would still appreciate if someone knew how to use the method properly.
var cropperCanvas = $('.cropper-canvas');
console.log('Width: '+cropperCanvas.width()+"\nHeight:"+cropperCanvas.height());
To access this information you must call these methods inside the 'built' function. Like so:
var $crop = $('.img');
$crop.cropper({
built: function() {
var canvasData = $crop.cropper('getCanvasData');
var cropBoxData = $crop.cropper('getCropBoxData');
var imageData = $crop.cropper('getImageData');
$('.cd').text('Canvas Data: ' + JSON.stringify(canvasData));
$('.cb').text('CropBox Data: ' + JSON.stringify(cropBoxData));
$('.id').text('Image Data: ' + JSON.stringify(imageData));
}
});
.container {
max-width: 800px;
}
.container .img {
width: 100%;
}
<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/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js"></script>
<div class="container">
<img class="img" src="http://www.beijingiphonerepair.com/wp-content/uploads/2011/10/iphone4s_sample_photo_1.jpg" alt="">
</div>
<p class="cd"></p>
<p class="cb"></p>
<p class="id"></p>
It's a simple example just to show you the idea. Hope it helps.
Was having the same issues, not much help anywhere. Pieced together a solution from various places. Documentation/real-world examples of this plugin are sadly lacking, yet it's probably the best cropper script I've used
The form:
<div class="cropperOriginal">
<img id="image" src="/yourimage.jpg">
</div>
<form method="POST" action="test.php">
X: <input type="text" name="dataX" id="dataX" placeholder="X" value="" />
Y: <input type="text" name="dataY" id="dataY" placeholder="Y" value="" />
W: <input type="text" name="dataWidth" id="dataWidth" placeholder="width" value="" />
H: <input type="text" name="dataHeight" id="dataHeight" placeholder="height" value="" />
<input type="submit" />
</form>
<div class="img-preview"></div>
The javascript
<script>
window.addEventListener('DOMContentLoaded', function () {
var ele = $("#image");
var dataX = document.getElementById('dataX');
var dataY = document.getElementById('dataY');
var dataHeight = document.getElementById('dataHeight');
var dataWidth = document.getElementById('dataWidth');
ele.cropper({
aspectRatio: 4 / 3,
preview: '.img-preview',
crop: function (e) {
var imageData = ele.cropper('getData');
dataX.value = Math.round(imageData.left);
dataY.value = Math.round(imageData.top);
dataHeight.value = Math.round(imageData.height);
dataWidth.value = Math.round(imageData.width);
},
zoomable: false,
scalable: false,
movable: false,
background: true,
viewMode: 2
});
});
</script>
Hope this helps someone
I have this layout in HTML:
<div id="front">
<img id="student_front" src="' . $path . '/images/student_front.jpg"></img>
<img id="myid_info_photo"></img>
<div id="myid_info_college">CEIT</div>
<div id="myid_info_idnumber">101-03043</div>
<img id="myid_info_signature"></img>
<div id="myid_info_course">BSCS</div>
<div id="myid_info_name">Alyssa E. Gono</div>
<div id="myid_info_barcode"></div>
</div>
I want to generate a Jpeg file of what div#front will appear in my screen. How will I do that in Javascript? I have a button that will invoke an action when it is click.
function myid_print_id() {
win = window.open(document.getElementById("student_front").src,"_blank");
win.onload = function() {
win.print();
}
}
$('#myid_print_id').on('click', function(e) {
e.preventDefault();
myid_print_id();
});
myid_print_id() function just retrieves the image file. I wanted to retrieve the appearance of my whole div with an id "front".
Load the html2canvas js file, then add this:
$('#btn').click(function() {
html2canvas($('#front'), {
onrendered: function(canvas) {
myImage = canvas.toDataURL("image/png");
$('#output').append(canvas);
}
});
});
#output {
border: 1px solid #888888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<div id="front">
<img id="student_front" src="http://lorempixel.com/400/200">
<div id="myid_info_college">CEIT</div>
<div id="myid_info_idnumber">101-03043</div>
<div id="myid_info_course">BSCS</div>
<div id="myid_info_name">Alyssa E. Gono</div>
<div id="myid_info_barcode">More text</div>
</div>
<button id="btn">CLICK FOR PIC</button>
<br>
<div id="output"></div>
You will need to change the image URL to something on the same domain (html2canvas does not load cross domain images).
Html
<div>
<input type="button" id="btnGenerateImage" value="Generate Image" />
</div>
<div>
<canvas id="myCanvas"></canvas>
</div>
<div>
<h1>
Generated Content</h1>
<img id="canvasImg" alt="Right click to save me!">
</div>
SCRIPT
$("#btnGenerateImage").on('click', function () {
var canvas = document.getElementById('myCanvas');
// save canvas image as data url (png format by default)
var dataURL = canvas.toDataURL();
// set canvasImg image src to dataURL
// so it can be saved as an image
document.getElementById('canvasImg').src = dataURL;
});
I am having trouble with this code. I am trying to add an eliminate link at the end but I cant seem to eliminate all of the boxes within the set of 5 that appear when I press the add link. I want to be able to delete all the boxes that are within the set of five and nothing else. What I have tried to do is put this line of code at the end of the var box_html5 but it does not work. This is the function that deletes a box I want it to delete the boxes.
Remove
I have tried to make a loop within the statement but it is not coming out right.
I have also thought about making an if statement where the above piece of code would be inside it and state that if that link is pressed then remove box_html1, box_html2, box_html3... etc. For the set of 5 chosen. I have also tried to echo the code like this:
echo ('Remove');
and it still does not seem to work.
<?php
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
max-width: 800px;
margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
<h1>Movie Night</h1>
<div class="my-form">
<form role="form" method="post">
<p class="text-box">
<label for="box1">Genre<span class="box-number">1</span></label>
<input type="text" name="boxes[]" value="" id="box1" />
<a class="add-box" href="#">Add More</a>
</p>
<p><input type="submit" value="Submit" /></p>
</form>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.my-form .add-box').click(function(){
var n = $('.text-box').length + 1;
if( 15 < n ) {
alert('Too many. Not enought Time to watch');
return false;
}
var box_html1 = $('<p class="text-box">Movie<input name="mov1" type="text"></p>');
box_html1.hide();
$('.my-form p.text-box:last').after(box_html1);
box_html1.fadeIn('slow');
var box_html2 = $('<p class="text-box">Movie<input name="mov2" type="text"></p>');
box_html2.hide();
$('.my-form p.text-box:last').after(box_html2);
box_html2.fadeIn('slow');
var box_html3 = $('<p class="text-box">Movie<input name="mov3" type="text"></p>');
box_html3.hide();
$('.my-form p.text-box:last').after(box_html3);
box_html3.fadeIn('slow');
var box_html4 = $('<p class="text-box">Movie<input name="mov4" type="text">Remove</p>');
box_html4.hide();
$('.my-form p.text-box:last').after(box_html4);
box_html4.fadeIn('slow');
var box_html5 = $('<p class="text-box">Movie<input name="mov5" type="text"></p>');
box_html5.hide();
$('.my-form p.text-box:last').after(box_html5);
box_html5.fadeIn('slow');
<!--Remove-->
return false;
});
$('.my-form').on('click', '.remove-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
</body>
</html>
You need to explore index and slice jquery functions.
Remove action handler in this case:
$('.my-form').on('click', '.remove-box', function(event)
{
var index = $(this).parent().index();
$('.text-box').slice( index - 3, index + 2 ).remove();
event.preventDefault();
});
FIDDLE: http://jsfiddle.net/ejcXd/4/
I'm trying to create a simple image gallery with radio buttons. Images are set to Display: none; by default. What I want is for them to display as block when I click on their respective buttons.
<html>
<head>
<style>
.img { width: 250px;
max-height: 300px;
display: none;
}
</style>
<script>
function picture (a) {
var pic = document.getElementById('image')
if (a == 1) {
pic.src="julia1.jpg"
} else { pic.src="julia2.jpg"}
pic.style.display ="block";
}
</script>
</head>
<body>
<img class="img" id="image" src="julia1.jpg">
<form action="">
<input type="radio" onclick="picture(1)" name="picture"></input>
<input type="radio" onclick="picture(2)" name="picture"></input>
</form>
</body>
</html>
On the browser console it says that object is not a function. What does that mean? (thats for both input tags)
The last line should read
pic.style.display = "block";
If anyone looking for simple js gallery check this example :
https://codepen.io/zarokr/pen/ZEzBYvY
let current = document.getElementById('current');
let thumbnails = document.getElementsByClassName('thumb');
for(let i = 0; i<thumbnails.length; i++){
thumbnails[i].addEventListener('click',changeImage);
}
function changeImage(){
let getsrc = this.getAttribute('src');
current.setAttribute('src',getsrc);
}