httpstersk / image-mask Goto Github PK
View Code? Open in Web Editor NEWA Polymer element for masking the images with basic (and some extraordinary) geometric shapes
A Polymer element for masking the images with basic (and some extraordinary) geometric shapes
Hey, nice component. Just letting you know the hexagon mask isn't working for me.
I can't see it on the demo either: http://hejty.github.io/demos/image-mask/
OS
Elementary OS Freya (Ubuntu 14.04 LTS)
Browsers
Chrome Version 51.0.2704.54 beta (64-bit)
Firefox Version 46.0.1
Thanks again for the element!
Check your demo on Safari, I get an error:
NoModificationAllowedError: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed.
The placeholder http://placehold.it/320 is not loaded over SSL.
This content should be served over HTTPS if you use SSL.
You could replace it with https://placehold.it/320
Thanks for the element!
Please update your element to support Polymer 1.0!
If src property is set dynamically, the image doesn't display.
Visit will be set from outside the element:
<image-mask id="avatar" class="card-image" shape="circle"
src="[[visit.image]]"
size="50">
</image-mask>
.
.
.
visit: {
type: Object,
value: function () { return {}; },
notify: true
}
If I want to use a 64 bit encoded image, the path is chopped.
This is how I declare the value:
<image-mask shape="circle" size="64" src="data:image/png;base64,[[user.image]]">
</image-mask>
But the browser renders only partially:
<image-mask shape="circle" size="64" class="style-scope mproof-profile-badge" src="data:image/png;base64,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">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" role="img" aria-labelledby="title desc" class="style-scope image-mask" width="64" height="64" viewbox="0 0 64 64">
<title id="title" class="style-scope image-mask">
<span class="style-scope image-mask"></span>
</title>
<desc id="desc" class="style-scope image-mask">
<span class="style-scope image-mask"></span>
</desc>
<defs class="style-scope image-mask">
<clipPath clipPathUnits="objectBoundingBox" class="style-scope image-mask" id="circle-ms6a">
<path class="style-scope image-mask" d="M 0.5, 0.5 m -0.5, 0 a 0.5, 0.5 0 1, 0 1, 0 a 0.5, 0.5 0 1, 0 -1, 0"></path>
</clipPath>
</defs>
<image height="100%" width="100%" preserveAspectRatio="xMidYMid slice" class="style-scope image-mask" clip-path="url(#circle-ms6a)" **xlink:href="data:image/png;base64,"**></image>
</svg>
</image-mask>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.