photowall/image-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fullscreen support to the wallpaper example

Browse Source
This commit is contained in:
Martin
2017-08-04 15:42:40 +02:00
parent 66a6f828b0
commit ad351e7fe0
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/photo-wallpaper/index.html
+14 -3
View File
@@ -1,7 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
</head>
<body> <body>
<label>Width: <input type="text" id="width" name="width" value="500" /></label> <label>Width: <input type="text" id="width" name="width" value="500" /></label>
<label>Height: <input type="text" id="height" name="height" value="400" /></label> <label>Height: <input type="text" id="height" name="height" value="400" /></label>
@@ -13,19 +11,32 @@
<script type="text/javascript"> <script type="text/javascript">
var width = document.getElementById('width'); var width = document.getElementById('width');
var height = document.getElementById('height'); var height = document.getElementById('height');
var dimensions = {width: 800, height: 600};
var editor = new ImageEditor('image-editor', { var editor = new ImageEditor('image-editor', {
type: 'photo-wallpaper', type: 'photo-wallpaper',
dimensions: {width: 800, height: 600} dimensions: dimensions
}); });
function cropImage() { function cropImage() {
editor.crop(width.value, height.value, 'cm'); editor.crop(width.value, height.value, 'cm');
} }
function resizeEditor() {
var isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
if(isFullscreen) {
editor.canvas.resize({width: window.innerWidth, height: window.innerHeight});
} else {
editor.canvas.resize(dimensions);
}
}
//add event listeners //add event listeners
width.addEventListener('keyup', cropImage); width.addEventListener('keyup', cropImage);
height.addEventListener('keyup', cropImage); height.addEventListener('keyup', cropImage);
window.addEventListener('resize', resizeEditor);
//load the image //load the image
var image_url = '//images-dev.photowall.com/products/45825.jpg?h=450'; var image_url = '//images-dev.photowall.com/products/45825.jpg?h=450';
editor.loadImage(image_url, function() { editor.loadImage(image_url, function() {