clip-path-canvas v0.2.5
ClipPathCanvas.js
Do you enjoy using the SVG masks with clip-path
CSS attribute on images in your web pages/applications? Annoyed that some browsers still doesn't support the attribute? https://caniuse.com/#feat=css-clip-path. Well now you can allow users from all un-supported browsers
enjoy you the visual qualities of your site with ClipPathCanvas
.
Simply put, this package will detect if the current browser cannot support clip-path
then mimics the style by replacing the image with a canvas replica whilst retaining the style and other attributes on the initial image element.
- Author : Alex Shortt <hello@alex-shortt.com>
- Source : https://github.com/ajshortt/clip-path-canvas
Installaltion
NPM
$ npm install clip-path-canvas
Yarn
$ yarn add clip-path-canvas
Import
If you are using a bundler, import the package to your application like so:
import convertClipPath from 'clip-path-canvas';
Script
If you want to add the script directly, add the following to your HTML:
<script src="path/to/clip-path-canvas/dist/clip-path-canvas.min.js"></script>
Usage
Example HTML
You need to make sure the image that you want to clip has a parent container element which is required by ClipPathCanvas to create the fallback canvas.
<div id="clip-path-wrapper">
<img class="clip-path-image" src="..." alt="...">
</div>
Example SVG Mask
You will obviously need your SVG mask within your markup. It is recommended that you hide the mask visually as it is simply referenced by
CSS to create the clip-path. Make sure the SVG internal definitions e.g a path
is wrapped in a clipPath
element with the corresponding id
which the CSS references when creating the clip-path.
<div class="masks">
<svg
xmlns="http://www.w3.org/2000/svg"
width="180"
height="180"
viewBox="0 0 180 180"
>
<defs>
<clipPath
id="clip-path-mask-id"
clipPathUnits="objectBoundingBox"
transform="scale(0.00558 0.00555)"
>
<path d="M0 .674v178.952h178.667l-63.33-94.968L175.247.674z" />
</clipPath>
</defs>
</svg>
</div>
Example CSS (prior to ClipPathCanvas usage)
.clip-path-image {
clip-path: url('#clip-path-mask-id');
}
/* Make sure to visually hide the SVG mask */
.masks {
max-height: 0;
max-width: 0;
overflow: hidden;
}
Great, this looks sweet...but not on unsupported browsers. In steps ClipPathCanvas
!
ClipPathCanvas usage
// Get the wrapping element
var wrapper = document.getElementById('clip-path-canvas-wrapper');
// Run ClipPathCanvas passing in the wrapping element and the ID of the desired mask
ClipPathCanvas(wrapper, 'clip-path-mask-id');
Development
Roadmap
- 🔥 Add custom user agent sniffer to decrease distribution payload weight
- 🔥 Add full un-supported list of browsers
- 🔥 Add linting & unit tests
- ⚠️ Add target element by string functionality
Contribute
- Submit an issue in the issues section of the Github repo
- Fork and clone this repository
- Make some changes as required on a branch
change/#{issue-id}
e.gchange/#123
Write a unit test for your changecoming soonRun the test suites to confirm none braking codecoming soon$ npm run test
- Commit and push to your own repository
- Submit a pull request to this repository to the
development
branch
Build
$ cd /path/to/local/clip-path-canvas
$ npm install
$ npm run build
Donate
All donations welcome
License
MIT License
Copyright (c) 2012-2019 Alex Shortt <hello@alex-shortt.com>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.