添加对css滤镜的支持

2023-08-10 21:13:10 +03:00 · 2020-08-31 16:37:19 +08:00
parent 51bb0da805
commit 94e966d147
9 changed files with 1426 additions and 7 deletions
--- a/examples/demo4.html
+++ b/examples/demo4.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Nested transform tests</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        #first {
+            background: indianred;
+            margin-top: 100px;
+        }
+
+        #second {
+            border: 15px solid red;
+            background: darkseagreen;
+            -webkit-transform: rotate(7.5deg);
+            /* Chrome, Safari 3.1+ */
+            -moz-transform: rotate(7.5deg);
+            /* Firefox 3.5-15 */
+            -ms-transform: rotate(7.5deg);
+            /* IE 9 */
+            -o-transform: rotate(7.5deg);
+            /* Opera 10.50-12.00 */
+            transform: rotate(7.5deg);
+        }
+
+        #third {
+            background: cadetblue;
+            -webkit-transform: rotate(-70.5deg);
+            /* Chrome, Safari 3.1+ */
+            -moz-transform: rotate(-70.5deg);
+            /* Firefox 3.5-15 */
+            -ms-transform: rotate(-70.5deg);
+            /* IE 9 */
+            -o-transform: rotate(-70.5deg);
+            /* Opera 10.50-12.00 */
+            transform: rotate(-70.5deg);
+            /* Firefox 16+, IE 10+, Opera 12.10+ */
+        }
+
+        #fourth {
+            background: #bc8f8f;
+        }
+
+        div {
+            display: inline-block;
+        }
+
+        body {
+            font-family: Arial;
+        }
+
+        img.test {
+            width: 100px;
+            -webkit-filter: saturate(1600%);
+            /* Chrome, Safari, Opera */
+            filter: saturate(1600%);
+        }
+    </style>
+</head>
+
+<body>
+
+    <div id="fourth"><img class="test" src="../tests/assets/image.jpg" crossOrigin="anonymous" alt=""></div>
+    <div id="fourth2"><img src="../tests/assets/image.jpg" crossOrigin="anonymous" alt=""></div>
+    <script type="text/javascript" src="../dist/html2canvas.js"></script>
+    <script type="text/javascript">
+        html2canvas(document.body, { allowTaint: true, scale: 1 }).then(function (canvas) {
+            document.body.appendChild(canvas);
+        });
+    </script>
+</body>
+
+</html>