Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
139 lines (105 sloc) 4.45 KB
---
layout: main
title: Javascript Image Manipulation
section: home
---
{% include header.html %}
<div id="Content">
<h3>What is CamanJS?</h3>
<p><b>CamanJS is (ca)nvas (man)ipulation in Javascript.</b> It's a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques.</p>
<p>CamanJS is <b>very easy to extend</b> with new filters and plugins, and it comes with a wide array of image editing functionality, which continues to grow. It's completely library independent and <b>works both in NodeJS and the browser</b>.</p>
<h3>Usage</h3>
<p>Javascript</p>
{% highlight js %}
Caman('#my-image', function () {
this.brightness(10);
this.contrast(30);
this.sepia(60);
this.saturation(-30);
this.render();
});
{% endhighlight %}
<p>HTML data attribute</p>
{% highlight html %}
<img
data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)"
data-caman-hidpi="/path/to/image@2x.jpg"
src="path/to/image.jpg"
>
{% endhighlight %}
<div id="HomeExamples">
<div class="Left">
<img
src="/images/example1_290.jpg"
data-caman="brightness(0)"
data-caman-hidpi="/images/example1_580.jpg"
>
<p>Before</p>
</div>
<div class="Right">
<img
src="/images/example1_290.jpg"
data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)"
data-caman-hidpi="/images/example1_580.jpg"
>
<p>After</p>
</div>
</div>
<h3>Download</h3>
<div class="HomeLinks">
<div class="LinksSection">
<h4>Latest Stable</h4>
<p>Version {{site.caman.stable_version}}</p>
<a href="https://github.com/meltingice/CamanJS/archive/v{{site.caman.stable_version}}.zip">Download</a>
</div>
<div class="LinksSection">
<h4>Bleeding Edge</h4>
<p>Latest in master</p>
<a href="https://github.com/meltingice/CamanJS/archive/master.zip">Download</a>
</div>
<div class="LinksSection">
<h4>CDN Hosting</h4>
<p>Version {{site.caman.cdn_version}}</p>
<a href="http://cdnjs.cloudflare.com/ajax/libs/camanjs/{{site.caman.cdn_version}}/caman.full.min.js">Get Link</a>
</div>
<div class="Clear"></div>
</div>
<h3>Install</h3>
<p>CamanJS is available on some popular package management systems. Run these commands in your Terminal.</p>
<div class="HomeLinks">
<div class="LinksSection">
<h4>npm (NodeJS)</h4>
<p class="CopyCommand">npm install caman</p>
</div>
<div class="LinksSection">
<h4>bower (Browser)</h4>
<p class="CopyCommand">bower install caman</p>
</div>
<div class="Clear"></div>
</div>
<h3>Contribute</h3>
<p>Both <a href="https://github.com/meltingice/CamanJS">CamanJS</a> and <a href="https://github.com/meltingice/CamanJS-Site">this website</a> are fully open-source and accepting pull requests. To contribute: fork either project, create a new branch for your changes, and send a pull request when ready.</p>
<div class="HomeLinks Across2">
<div class="LinksSection">
<h4>CamanJS</h4>
<iframe src="http://ghbtns.com/github-btn.html?user=meltingice&repo=CamanJS&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=meltingice&repo=CamanJS&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
<div class="LinksSection">
<h4>CamanJS Plugins</h4>
<iframe src="http://ghbtns.com/github-btn.html?user=meltingice&repo=CamanJS-Plugins&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=meltingice&repo=CamanJS-Plugins&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
<div class="LinksSection">
<h4>CamanJS Website</h4>
<iframe src="http://ghbtns.com/github-btn.html?user=meltingice&repo=CamanJS-Site&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=meltingice&repo=CamanJS-Site&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
</div>
</div>