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

make the photo-wallpaper example respnsive

Browse Source
This commit is contained in:
Martin
2017-08-08 12:30:22 +02:00
parent 74b042a496
commit d04bc6ef45
2 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/photo-wallpaper/index.html
+9 -2
View File
@@ -1,9 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<link rel="stylesheet" href="/examples/photo-wallpaper/style.css" />
</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>
<canvas id="image-editor" width="800" height="600"></canvas> <div id="wrapper">
<canvas id="image-editor"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.js"></script>
@@ -11,6 +16,7 @@
<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 wrapper = document.getElementById('wrapper');
var editor = new ImageEditor('image-editor', { var editor = new ImageEditor('image-editor', {
type: 'photo-wallpaper' type: 'photo-wallpaper'
@@ -25,7 +31,7 @@
if(isFullscreen) { if(isFullscreen) {
editor.canvas.resize({width: window.innerWidth, height: window.innerHeight}); editor.canvas.resize({width: window.innerWidth, height: window.innerHeight});
} else { } else {
editor.canvas.resize({width: 800, height: 600}); editor.canvas.resize({width: wrapper.offsetWidth, height: wrapper.offsetHeight});
} }
} }
@@ -37,6 +43,7 @@
//load the image //load the image
editor.loadImage('/examples/photo-wallpaper/image.jpg', function() { editor.loadImage('/examples/photo-wallpaper/image.jpg', function() {
cropImage(); cropImage();
resizeEditor();
}); });
</script> </script>
examples/photo-wallpaper/style.css
+4
View File
@@ -0,0 +1,4 @@
#wrapper {
width: 100%;
height: 600px;
}