I'm trying to build a script that would allow somebody to enter a custom text and then scale it, change the font, and the color.
It works, everything works, except that it shows has an unexpected behavior: if I click on the canvas outside of the object then the object becomes inactive and then I cannot bring it to become active again.
this is the page:
<head>
<link rel="stylesheet" href="css/googlefonts.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="https://rawgit.com/fabricjs/fabric.js/master/dist/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="https://kit.fontawesome.com/589156f3be.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container1st">
<div class="outer2">
<div class="center2">
<span class="tb"><i class="fas fa-terminal"></i> Input text : </span><span><input class="input" data-text="text1" value="text1" id="id_text1" maxlength="30"/></span>
<span class="tb"> | <i class="fas fa-font"></i> Font-family : </span><span><select id="font-family"></select></span>
<span class="tb"> | <i class="fas fa-sliders-h"></i> Font Size : </span><span><input type="range" min="50" max="300" value="50" id="text_size" /></span>
<span class="tb"> | <i class="fas fa-palette"></i> Text color : </span><span><input type="text" id="text_colour" /></span>
<!--<span><button id="unu"> | Try it</button></span>-->
</div>
</div>
<div style="position relative, top: 10%;"> </div>
<div class="outer1">
<div class="center1">
<canvas id="c" width="886" height="621"></canvas><br />
</div>
</div>
<div style="position relative, top: 10%;"> </div>
</div>
<script>
var imageUrl = "img/cadru-01-ok23.png";
var canvas = new fabric.Canvas('c');
var text = "";
canvas.setBackgroundImage(imageUrl, canvas.renderAll.bind(canvas), {
// Optionally add an opacity lvl to the image
//backgroundImageOpacity: 0.5,
// should the image be resized to fit the container?
backgroundImageStretch: false
});
// google fonts API key: https://www.googleapis.com/webfonts/v1/webfonts?key=AIzaSyDk3o9XW7qKxy9-Oa1R7IUM2E_iJbmDhj8
// Define an array with all fonts
//var fonts = ["Pacifico", "VT323", "Quicksand", "Inconsolata"];
var fonts = ["Aguafina Script","Akronim","Alex Brush","Anton","Raleway","Modak","Roboto Mono","Merriweather","Noto Sans","Playfair Display","Ubuntu","Titillium Web","Noto Serif","Rubik","Crimson Pro","Inconsolata","Arimo","Quicksand","Heebo","Nunito Sans","Fjalla One","Oxygen","Crimson Text","Bitter","Libre Baskerville","Karla","Cabin","Josefin Sans","Hind","Saira Stencil One","Indie Flower","Source Code Pro","Lobster","Libre Franklin","Arvo","Abel","Mukta","Dancing Script","Varela Round","Pacifico","Farro","Barlow","Shadows Into Light","Abril Fatface","Teko","Monda","Acme"];
//add input box style text area
var text1 = new fabric.Text("Text", {
id: "id_text1",
fontSize: 50,
selectable: false,
left: 100,
top: 100,
text: "text1",
fill: '#000'
});
canvas.add(text1).setActiveObject(text1);
//populate the font dropdown
fonts.unshift('Times New Roman');
// Populate the fontFamily select
var select = document.getElementById("font-family");
fonts.forEach(function(font) {
var option = document.createElement('option');
option.innerHTML = font;
option.value = font;
select.appendChild(option);
});
// Apply selected font on change
document.getElementById('font-family').onchange = function() {
if (this.value !== 'Times New Roman') {
loadAndUse(this.value);
} else {
canvas.getActiveObject().set("fontFamily", this.value);
canvas.requestRenderAll();
}
};
// Load all fonts using Font Face Observer
function loadAndUse(font) {
var myfont = new FontFaceObserver(font)
myfont.load()
.then(function() {
// when font is loaded, use it.
canvas.getActiveObject().set("fontFamily", font);
canvas.requestRenderAll();
}).catch(function(e) {
console.log(e)
alert('font loading failed ' + font);
});
}
//Font Size #text_size
document.getElementById('text_size').onchange = function() {
canvas.getActiveObject().set("fontSize", this.value);
canvas.requestRenderAll();
}
//Text color #text_color
$("#text_colour").spectrum({
color: "#000000",
showPaletteOnly: true,
change: function(color) {
canvas.getActiveObject().set("fill", color.toHexString());
canvas.requestRenderAll();
},
palette: [
['#000000', '#fafafa', '#c5c5c5'],
['red', 'yellow', 'green', 'blue', 'violet', 'black']
]
});
//canvas controls some will be set to false later on
canvas.getActiveObject().hasControls=true;
canvas.getActiveObject().hasRotatingPoint=true;
canvas.getActiveObject().hasBorders=true;
canvas.getActiveObject().editable=true;
//text input on keyup
$('.input').on('keyup', function() {
id = $(this).attr('id');
val = $(this).attr('data-text');
newtext = $(this).val();
input = $(this);
canvas.getActiveObject().set("text", newtext);
canvas.renderAll();
});
</script>
<script src="http://rawgit.com/bramstein/fontfaceobserver/master/fontfaceobserver.js"></script>
</body>
Link with working example: http://fradoti.fr/000/
I'm not getting any javascript errors either. Any help pointing out what I'm doing wrong would be much appreciated.
Related
I am using https://github.com/fengyuanchen/cropperjs/ but it has a problem in getCroppedCanvas function ,
It's working just fine with small images but not showing when it comes to larger images
result.appendChild(cropper.getCroppedCanvas());
I am using this live example https://fengyuanchen.github.io/cropperjs/examples/upload-cropped-image-to-server.html; source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Cropper.js</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<link rel="stylesheet" href="../css/cropper.css">
<style>
.label {
cursor: pointer;
}
.progress {
display: none;
margin-bottom: 1rem;
}
.alert {
display: none;
}
.img-container img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Upload cropped image to server</h1>
<label class="label" data-toggle="tooltip" title="Change your avatar">
<img class="rounded" id="avatar" src="https://avatars0.githubusercontent.com/u/3456749?s=160" alt="avatar">
<input type="file" class="sr-only" id="input" name="image" accept="image/*">
</label>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
<div class="alert" role="alert"></div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Crop the image</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<img id="image" src="https://avatars0.githubusercontent.com/u/3456749">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="crop">Crop</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.bundle.min.js"></script>
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var avatar = document.getElementById('avatar');
var image = document.getElementById('image');
var input = document.getElementById('input');
var $progress = $('.progress');
var $progressBar = $('.progress-bar');
var $alert = $('.alert');
var $modal = $('#modal');
var cropper;
$('[data-toggle="tooltip"]').tooltip();
input.addEventListener('change', function (e) {
var files = e.target.files;
var done = function (url) {
input.value = '';
image.src = url;
$alert.hide();
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
document.getElementById('crop').addEventListener('click', function () {
var initialAvatarURL;
var canvas;
$modal.modal('hide');
if (cropper) {
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
initialAvatarURL = avatar.src;
avatar.src = canvas.toDataURL();
$progress.show();
$alert.removeClass('alert-success alert-warning');
canvas.toBlob(function (blob) {
var formData = new FormData();
formData.append('avatar', blob, 'avatar.jpg');
$.ajax('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function () {
var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function (e) {
var percent = '0';
var percentage = '0%';
if (e.lengthComputable) {
percent = Math.round((e.loaded / e.total) * 100);
percentage = percent + '%';
$progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
}
};
return xhr;
},
success: function () {
$alert.show().addClass('alert-success').text('Upload success');
},
error: function () {
avatar.src = initialAvatarURL;
$alert.show().addClass('alert-warning').text('Upload error');
},
complete: function () {
$progress.hide();
},
});
});
}
});
});
</script>
</body>
</html>
the cropper script is in: https://fengyuanchen.github.io/cropperjs/js/cropper.js
Using croppiejs helped me solve this issue. To utilize Croppie with a preview, you just set the value of an html image element to croppie's base64 result:
First create croppie instance:
var cropperlg = new Croppie(document.getElementById('croppie-lg'), {
viewport: {
width: 400
height: 800
},
boundary: {
height: 500
width: 1000
}
});
This bit of code binds croppie to an image and executes the crop on click.
EDIT: I simplified the code for a more basic example.
cropperlg.bind({
url: '/images/someimg.jpg'
});
$('#crop-btn').on('click', (e) => {
cropperlg.result({
type: 'canvas',
size: { width: 1000, height: 400 }
}).then(function(result) {
$('#cropped-img').attr('src', result);
})
});
You should be able to figure it out from here.
this worked for me
var cropper = $('#cropper-image').cropper('getCroppedCanvas', {
// Limit max sizes
maxWidth: 4096,
maxHeight: 4096,
});
After setting this, it worked well on both mobile and desktop.
Using cropper.js I could crop/resize the image, but is there any way I could, for example, remove the text from the image? or drawing? Then save or download?
Thanks for any help
https://jsfiddle.net/dalinhuang/dsh33tu8/
$('#edit_img').click(function(){
$('#image').cropper({
aspectRatio: 'auto',
crop: function(e) {
}
});
});
$("#reset").click(function() {
$('#image').cropper("reset");
});
/* Limit image width to avoid overflow the container */
img {
max-width: 100%; /* This rule is very important, please do not ignore this! */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/3.0.0/cropper.min.js"></script>
<button id="edit_img">EDIT IMG</button><br><br>
<button id="reset">RESET</button><br><br>
<div>
<img id="image" src="https://s3.amazonaws.com/dev-resized-image/full/dad3b2b5-1d74-4277-8ee7-fc11196a508c/funny-that-look-pictures-lol.jpg">
</div>
Finally after few days of searching.
Turns out this is the best. Using Adobe API to edit images!!!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Load Feather code -->
<script type="text/javascript" src="https://dme0ih8comzn4.cloudfront.net/imaging/v3/editor.js"></script>
<!-- Instantiate Feather -->
<script type='text/javascript'>
var featherEditor = new Aviary.Feather({
apiKey: 'your-api-key-here',
theme: 'dark', // Check out our new 'light' and 'dark' themes!
tools: 'all',
appendTo: '',
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
},
onError: function(errorObj) {
alert(errorObj.message);
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src
});
return false;
}
</script>
<div id='injection_site'></div>
<!-- Add an edit button, passing the HTML id of the image and the public URL of the image -->
<p><input type='image' src='http://images.aviary.com/images/edit-photo.png' value='Edit photo' onclick="return launchEditor('image1', 'https://i.imgflip.com/ehl86.jpg');" /></p>
<img id='image1' src='https://i.imgflip.com/ehl86.jpg'/>
I was asking about a jQuery plugin with image, title and description jQuery slide show. But can't find such. So tried to build a very small and easy [ugly] slide-show using only javascript. But there are some drawbacks, as in my script I have to hard code images, titles and descriptions. So I want to create a jQuery plugin from scratch which does only the same job as the script does, and also builds the slide-show on runtime. So this will also be a tutorial on creating a basic slide-show plug-in.
The code I used for the easy, ugly slide-show controller
<html>
<style type="text/css">
td {
border:1px solid #ccc;
width: 420px;
max-width:420px;
text-overflow:ellipsis;
}
span {
word-wrap: break-word;
width: 420px;
max-width:420px;
overflow-y:auto; overflow-x:hidden;
border:1px solid red;
}
</style>
<body>
<table>
<tr><td><img id="img" name="img" src="" title="Image" /></td> </tr>
<tr><td><span id="title">title</span></td></tr>
<tr><td><span id="desc">description</span></td></tr>
<tr><td><input type="button" value="<" onclick="back()" />
<input type="button" value=">" onclick="next()" />
<input type="text" id="idx" value="1" size="2" /> </td></tr>
</table></body>
<script>
var titles = ["zero", "one", "two", "three", "four"];
var descs = ["0 zer0", "1 one ", "2 two ", "3 three", "4 four"];
var img = document.getElementById('img');
var ttl = document.getElementById('title');
var dsc = document.getElementById('desc');
var idx = document.getElementById('idx');
var limit = titles.length-1;
function back()
{
if (parseInt(idx.value) > 1)
idx.value = parseInt(idx.value) - 1;
img.src = 'images/image' + idx.value + '.jpg';
ttl.innerHTML = titles[idx.value];
dsc.innerHTML = descs[idx.value];
}
function next()
{
if (parseInt(idx.value) < limit)
idx.value = parseInt(idx.value) + 1;
img.src = 'images/image' + idx.value + '.jpg';
ttl.innerHTML = titles[idx.value];
dsc.innerHTML = descs[idx.value];
}
</script>
</html>
I want it to be used as
<div id="main">
<img src="...." title="Title of image 1" data-desc="description of #1 image" />
<img src="...." title="Title of image 2" data-desc="description of #2 image" />
</div>
You can use nivo slider .
You just have to mention description of an image in alt attribute and title of an image in title attribute.
And just attach the plugin to your wrapper element:
$(window).load(function() {
$('#main').nivoSlider();
});
Edit1:
A simple way to create such plugin
jQuery.fn.imgSlider = function( options ) {
// default settings:
var defaults = {
textColor: "#000",
backgroundColor: "#fff",
fontSize: "16px",
getTextFromTitle: true,
getTextFromAlt: false,
animateOpacity: true,
animationDuration: 500,
clickImgToGoToNext: true,
clickImgToGoToLast: false,
nextButtonText: "next",
previousButtonText: "previous",
nextButtonTextColor: "red",
previousButtonTextColor: "red"
};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
// Plugin code would go here...
});
};
call the plugin
$( "div" ). imgSlider();
Edit 2
I have created a jQuery Image Slider Plugin.
here is the example with annotated code.
So I have created a 'add' button which is a simple circle, on hover it opens up some options around it which are clickable (shown in the image added).
on hover
Normal (not hover)
When you click one of them surrounding elements it hides all the other elements other than the one you clicked, the hidden elements are made visible again when you hover off.
My issue is I want to make it so when one is clicked another 3 divs ("zone 1", "zone2" & "zone3") are dynamically created using JavaScript and positioned around the clicked element in a similar style to the image attached.
But I obviously have the issue of finding the position and then adding these 3 new divs in the correct positions depending on which element was clicked and whether it is on the left right bottom or top.
Thanks!
<head>
<title>Add Button</title>
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="add-button">
<div class="sub-button tl" id="temp" onclick="addNew(this.id)"><i class="mdi mdi-temperature-celsius"></i></div>
<div class="sub-button tr" id="light"><i class="mdi mdi-weather-sunny"></i></div>
<div class="sub-button bl" id="fridge"><i class="mdi mdi-fridge"></i></div>
<div class="sub-button br" id="kettle"><i class="mdi mdi-coffee"></i></div>
<div class="sub-button tlo" id="cup"><i class="mdi mdi-cup"></i></div>
<div class="sub-button tro" id="lamp"><i class="mdi mdi-lightbulb-outline"></i></div>
<div class="sub-button bro" id="sound"><i class="mdi mdi-microphone-outline"></i></div>
<div class="sub-button blo" id="noise"><i class="mdi mdi-speaker"></i></div>
</div>
</header>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var type;
var elements = ["temp", "light", "fridge", "kettle", "cup", "lamp", "sound", "noise"];
function addNew(id){
type = id;
for(i = 0; i < elements.length; i++){
if(elements[i] != type){
document.getElementById(elements[i]).style.display = "none";
}
}
/*var div1 = document.createElement('div');
div1.className = '';
var elementStyle = document.getElementById("id").style;
elementStyle.position = "relative";
elementStyle.top = elementStyle.left = "50%";*/
}
function initialise(){
for(i = 0; i < elements.length; i++){
document.getElementById(elements[i]).style.display = "block";
}
}
$(document).ready(function() {
$('.add-button').hover(
function () {
},
function () {
initialise();
}
);
});
</script>
</body>
var $existingDiv = $("#div1"),
pos = $existingDiv.position(),
$newDiv = $("<div></div>").css({
"background-color": "red",
"position": "absolute"
});
$newDiv.css(pos);
$existingDiv.after($newDiv);
$existingDiv.remove();
http://jsfiddle.net/paska/uvxc1yk5/
Using position element: http://jsfiddle.net/paska/uvxc1yk5/2/
I want to open a image in lightbox like in this address using JavaScript.
this code i am using in HTML it works fine. but i want to use this code in JavaScript function.
<div class="imageRow">
<div class="single">
<img alt="" src="url" />
</div>
</div>
How to write it in JavaScript.
for example this code open a image in new window.i want code like this to open a image in Lightbox2 using classes that are in upper HTML code.
<script type="text/javascript">
function onListPhotoClicked(event) {
var position = event.getPosition();
var photo=event.getPhoto();
if(photo){
MaximizeWindow(window.open('http://static.panoramio.com/photos/original/'+photo.getPhotoId()+'.jpg'));
}
}
function MaximizeWindow(hWnd){
hWnd.moveTo(0,0);
hWnd.resizeTo(screen.width, screen.height);
}
panoramio.events.listen(
attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked(e); });
</script>
this code open a image in new tab.but i want that this code open image in lightbox2.
i am new in programming.please tell me in detail by writing code.
this is code of a panoramio.com widget.
<div>
<img border="0" height="0" src="http://3.bp.blogspot.com/-EHT3COGzPHY/UnTXKACCkMI/AAAAAAAAAuI/KXnLjT-6ovk/s1600/98289201.jpg" width="0" /></div>
<script src="http://www.panoramio.com/wapi/wapi.js?v=1" type="text/javascript"></script>
<style type="text/css">
#div_attr_ex .panoramio-wapi-images {
background-color: transparent;
}
</style>
<br />
<div id="div_attr_ex" style="float: center; margin: 5px 10px;">
<div id="photo_widget_id_a11">
</div>
<div id="photo_widget_id_b11">
</div>
<div id="photo_widget_id_c11">
</div>
</div>
<script type="text/javascript">
var sand = {'set': panoramio.PhotoSet.RECENT };
var sandRequest = new panoramio.PhotoRequest(sand);
var attr_ex_photo_options = {
'width': 600,
'height': 480,
'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
'attributionStyle': panoramio.tos.Style.HIDDEN};
var attr_ex_photo_widget = new panoramio.PhotoWidget(
'photo_widget_id_a11', sandRequest, attr_ex_photo_options);
var attr_ex_list_options = {
'width': 600,
'height': 110,
'columns': 6,
'rows': 1,
'croppedPhotos': true,
'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
'orientation': panoramio.PhotoListWidgetOptions.Orientation.HORIZONTAL,
'attributionStyle': panoramio.tos.Style.HIDDEN};
var attr_ex_list_widget = new panoramio.PhotoListWidget(
'photo_widget_id_b11', sandRequest, attr_ex_list_options);
var attr_ex_attr_options = {'width': 300};
var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget(
'photo_widget_id_c11', attr_ex_attr_options);
function onListPhotoClicked2(event) {
var position = event.getPosition();
var photo=event.getPhoto();
document . apple . banana . value = position;
if(photo){
MaximizeWindow(window.open('http://static.panoramio.com/photos/large/'+photo.getPhotoId()+'.jpg'));
}
}
function MaximizeWindow(hWnd){
hWnd.moveTo(0,0);
hWnd.resizeTo(screen.width, screen.height);
}
panoramio.events.listen(
attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked2(e); });
function onListPhotoClicked(event) {
var position2 = attr_ex_list_widget.getPosition();
attr_ex_list_widget.setPosition(position2+1);
var position = event.getPosition();
if (position !== null) attr_ex_photo_widget.setPosition(position);
document . apple . banana . value = position;
}
panoramio.events.listen(
attr_ex_list_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked(e); });
attr_ex_photo_widget.enablePreviousArrow(true);
attr_ex_photo_widget.enableNextArrow(true);
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
function increase()
{
var temp = parseInt (document . apple . banana . value);
if (isNaN (temp))
return;
if (temp>=0 )
{
attr_ex_photo_widget.setPosition(temp);
attr_ex_list_widget.setPosition(temp);
document . apple . banana . value = temp;
}
else
{
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
document . apple . banana . value = 0;
}
}
function startDownload()
{
var photo3=attr_ex_photo_widget.getPhoto();
var url='http://static.panoramio.com/photos/original/'+photo3.getPhotoId()+'.jpg';
window.open(url);
}
</script>
<form name="apple">
<input max="10000" maxlength="4" min="0" name="banana" size="4" type="number" />
<input onclick="increase ();" type="button" value="View" /></form>
<button onclick="startDownload()">Download</button>