mirror of https://gitgud.io/fatchan/gm
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
8.6 KiB
285 lines
8.6 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>gm : GraphicsMagick for node.js</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Cabin+Sketch|Open+Sans' rel='stylesheet' type='text/css'>
|
|
<style type="text/css">
|
|
body {
|
|
margin-top: 1.0em;
|
|
background-color: #fefefe;
|
|
font-family: 'Open Sans', Helvetica, Arial, FreeSans;
|
|
color: #333;
|
|
}
|
|
#container {
|
|
margin: 0 auto;
|
|
width: 712px;
|
|
}
|
|
#drawing-primitives{ margin-top: 35px; }
|
|
h1 { margin-bottom: 3px; color: #333; font-family: 'Cabin Sketch'; font-weight: normal; }
|
|
h1 .small { font-size: 40px; }
|
|
h1 a { text-decoration: none; color: #333; font-size: 148px; padding-right: 8px; }
|
|
h2 { font-size: 1.5em; margin-top: 40px; }
|
|
h3 { margin-top: 40px; }
|
|
#docs { padding-left: 39px; }
|
|
li { list-style: none; }
|
|
code { font: 14px Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace; }
|
|
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
|
|
.download { position: absolute; right: 132px; top: 0px; }
|
|
pre { background: #f9f9f9; color: #222; padding: 15px; border: 1px solid #c6c6c6; border-radius: 4px; box-shadow: 0px 2px 10px #ddd; }
|
|
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
|
|
.footer { text-align:center; padding-top:30px; font-style: italic; }
|
|
#example { float: left; }
|
|
#example code { display: inline-block; height: 225px; width: 296px; }
|
|
#frame-wrap div, iframe { width: 350px; height: 310px; float: right; border: 0 none; }
|
|
#example-wrap:before, #example-wrap:after { content: ""; display: table; visibility: hidden; }
|
|
#example-wrap:after { clear: both; }
|
|
#example-wrap { zoom: 1; margin-top: 50px; margin-bottom: -20px;}
|
|
#frame-wrap { margin-top: 13px; }
|
|
#frame-wrap img { position: absolute; margin: 112px 172px; display:none; }
|
|
#btns { clear: both; }
|
|
#btns button {
|
|
font-family: arial;
|
|
font-size: 13px;
|
|
padding-left: 6px;
|
|
padding-right: 4px;
|
|
margin-right: 3px;
|
|
text-indent: 0;
|
|
white-space: inherit;
|
|
}
|
|
</style>
|
|
<script type="text/javascript">
|
|
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-30923162-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<a href="https://github.com/aheckmann/gm"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
|
|
|
|
<div id="container">
|
|
|
|
<div class="download">
|
|
<a href="https://github.com/aheckmann/gm/zipball/master">
|
|
<img border="0" width="80" src="https://github.com/images/modules/download/zip.png"></a>
|
|
<a href="https://github.com/aheckmann/gm/tarball/master">
|
|
<img border="0" width="80" src="https://github.com/images/modules/download/tar.png"></a>
|
|
</div>
|
|
|
|
<h1><a href="https://github.com/aheckmann/gm">gm <small>v1.9.0</small></a>
|
|
<span class="small">GraphicsMagick for node.js</span>
|
|
</h1>
|
|
|
|
<div id=example-wrap>
|
|
<pre id="example"><code data-code="default">var gm = require('gm');
|
|
|
|
gm('/path/to/image.jpg')
|
|
.resize(353, 257)
|
|
.autoOrient()
|
|
.write(writeStream, function (err) {
|
|
if (!err) console.log(' hooray! ');
|
|
});</code></pre>
|
|
<div id='frame-wrap'>
|
|
<iframe name="preview" id="preview" scrolling="no" src="examples/imgs/nodejs.png"></iframe>
|
|
<img src="loader.gif">
|
|
</div>
|
|
<form action="https://freezing-spring-5684.herokuapp.com/" target="preview">
|
|
<select name="op">
|
|
<option value="blur">blur</option>
|
|
<option value="implode">implode</option>
|
|
<option value="contrast">constrast</option>
|
|
<option value="colorize">colorize</option>
|
|
<option value="equalize">equalize</option>
|
|
<option value="sepia">sepia</option>
|
|
<option value="swirl">swirl</option>
|
|
<option value="rotate">rotate</option>
|
|
<option value="rotate-edge">rotate-edge</option>
|
|
<option value="flip-rotate-edge">flip-rotate-edge</option>
|
|
</select>
|
|
<input type="submit" value="Go!">
|
|
</form>
|
|
</div>
|
|
|
|
<h2>Get it!</h2>
|
|
<p>First install either <a href="http://www.graphicsmagick.org/" target="_blank">GraphicsMagick</a> or <a href="https://www.imagemagick.org/" target="_blank">ImageMagick</a>. Then:</p>
|
|
<pre><code>> npm install gm</code></pre>
|
|
<h3><a href="docs.html">Read the documentation</a></h3>
|
|
</div>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
<script>
|
|
;(function(){
|
|
var form = $('form')
|
|
, select = $('form')
|
|
, options = select.find('option')
|
|
, wrap = $('#frame-wrap')
|
|
, loader = wrap.find('> img')
|
|
, exampleCode = $("#example code");
|
|
|
|
var btns = $('<div id="btns"/>');
|
|
|
|
options.each(function (_, option) {
|
|
var o = $(option)
|
|
var txt = o.text()
|
|
, id = o.val()
|
|
btns.append("<button type='button' id="+id+">" + txt + "</button>");
|
|
});
|
|
|
|
btns.insertAfter("#example-wrap");
|
|
|
|
form.remove();
|
|
wrap.find('iframe').remove();
|
|
|
|
var preview = $('<div style="background: transparent url(examples/imgs/nodejs.png) no-repeat;">')
|
|
wrap.prepend(preview);
|
|
|
|
btns.on('click', 'button', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
preview.stop(true, true).fadeTo(400, '0.7');
|
|
|
|
var btn = $(e.target);
|
|
var code = $("#raw-code code[data-code='" + e.target.id + "']").text();
|
|
exampleCode.text(code);
|
|
|
|
var url = 'https://freezing-spring-5684.herokuapp.com/?op='
|
|
+ e.target.id
|
|
|
|
var img = new Image;
|
|
img.onload = function () {
|
|
preview.css('background-image', 'url('+url+')' );
|
|
preview.stop(true, true);
|
|
preview.fadeTo(120, '1.0');
|
|
}
|
|
img.src = url;
|
|
});
|
|
|
|
})();
|
|
</script>
|
|
|
|
<div id="raw-code" style="display:none">
|
|
<code data-code="blur">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.blur(30, 20)
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="implode">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.implode(-1.2)
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="contrast">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.contrast(-6)
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="colorize">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.colorize(200, 200, 256)
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="equalize">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.equalize()
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="sepia">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.sepia()
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="swirl">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.resize(resizeX, resizeY)
|
|
.region(101, 112, 90, 87)
|
|
.swirl(200)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="rotate">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.rotate('green', -25)
|
|
.resize(resizeX, resizeY)
|
|
.autoOrient();
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="flip-rotate-edge">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.flip()
|
|
.rotate('green', -25)
|
|
.edge(3)
|
|
.resize(resizeX, resizeY)
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
<code data-code="rotate-edge">var gm = require('gm')
|
|
, resizeX = 343
|
|
, resizeY = 257
|
|
|
|
gm('/path/to/image.jpg')
|
|
.rotate('green', -25)
|
|
.edge(3)
|
|
.resize(resizeX, resizeY)
|
|
.write(response, function (err) {
|
|
if (err) ...
|
|
});</code>
|
|
</div>
|
|
<br><br>
|
|
|
|
</body>
|
|
</html>
|
|
|