異文化に恋してる

異質な考え方に触れて参考になったときの備忘録
異文化に恋してる TOP  >  スポンサー広告 >  web・ネット備忘録 >  javascriptで画像加工する方法に感激!

スポンサーサイト

--/--/-- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
このエントリーをはてなブックマークに追加
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)


javascriptで画像加工する方法に感激!

2013/04/26 18:30

javascriptで

pixastic1.jpg

色調変更したり

pixastic2.jpg

エッジ加工したり

pixastic3.jpg

ポスタりぜーションしたり

pixastic4.jpg

する方法があって感激!



1.ベースのスクリプトをダウンロード

どの加工法でも必要なベースとなるスクリプトをダウンロードします。



2.加工法別のスクリプトをダウンロード

加工法別にスクリプトが異なるので、ほしいものをダウンロードします。

  • Introductionで加工法が紹介されているので、欲しい加工法を探します。
    pixastic-intro.jpg

  • 欲しい加工方が見つかったら、黄色矢印のところからコードをダウンロードします。
    pixastic-demo.jpg


3.HTMLへ記述

  • DemoのページのExample codeを開くと、親切にコードが書かれています。
    pixastic-code.jpg

  • 黄色の矢印の部分を、自分の画像名に置き換えます。

  • HTML全体は、こう書けばOKです。
    <html>
    <head>
    <!--ベースのファイル-->
    <script src="http://shimz.me/libs/pixastic/pixastic.core.js"></script>
    <!--選択した加工法のファイル-->
    <script src="http://shimz.me/libs/pixastic/actions/coloradjust.js"></script>
    </head>
    <body>
    <!--Example codeを貼り付け-->
    var img = new Image();
    img.onload = function() {
       var blendImg = new Image();
       blendImg.onload = function() {
          Pixastic.process(img, "blend",
             {
                amount : 1,
                mode : "multiply",
                image : blendImg
             }
          );
       }
       blendImg.src = "blendimage.jpg";
    }
    img.src = "myimage.jpg";
    </body>
    </html>





格安Adobeソフト価格比較

Adobe Photoshop Elements 新品 10,090円 このエントリーをはてなブックマークに追加
[ 2013/04/26 18:30 ] web・ネット備忘録 | TB(0) | CM(0)


コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

有咲

著:有咲
旅行しながら風景描きまくりたいな。

ブログランキング・にほんブログ村へ
にほんブログ村 美術ブログ スケッチ旅行へ
にほんブログ村 その他日記ブログ 雑感へ

ブロとも申請
☆ブロとも申請大歓迎☆

この人とブロともになる
facebook
ご連絡等を承っております

QLOOKアクセス解析


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。