make the photo-wallpaper example respnsive

2017-08-08 12:30:22 +02:00
parent 74b042a496
commit d04bc6ef45
2 changed files with 13 additions and 2 deletions
@@ -1,9 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <link rel="stylesheet" href="/examples/photo-wallpaper/style.css" />
+    </head>
    <body>
        <label>Width: <input type="text" id="width" name="width" value="500" /></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/fabric.js/1.7.11/fabric.js"></script>
@@ -11,6 +16,7 @@
        <script type="text/javascript">
            var width = document.getElementById('width');
            var height = document.getElementById('height');
+            var wrapper = document.getElementById('wrapper');

            var editor = new ImageEditor('image-editor', {
                type: 'photo-wallpaper'
@@ -25,7 +31,7 @@
                if(isFullscreen) {
                    editor.canvas.resize({width: window.innerWidth, height:  window.innerHeight});
                } else {
-                    editor.canvas.resize({width: 800, height: 600});
+                    editor.canvas.resize({width: wrapper.offsetWidth, height: wrapper.offsetHeight});
                }
            }

@@ -37,6 +43,7 @@
            //load the image
            editor.loadImage('/examples/photo-wallpaper/image.jpg', function() {
                cropImage();
+                resizeEditor();
            });

        </script>
@@ -0,0 +1,4 @@
+#wrapper {
+    width: 100%;
+    height: 600px;
+}