canvas

Memo

toDataURLの際にjpegと比較して軽い方を選ぶように

canvasから画像スキームデータを抽出する際のtoDataURL()メソッドですが、 そのままだとpng画像になります。 toDataURL()はpngの対応が必須実装なので、canvasが使えるブラウザは必ずpng出力が出来ます。 です...
Web

アイコンのデコレーション処理をnode.jsで立ち上げたAPIに回す

以前ちょっとnode.jsについて書きましたが、概ねAPIの立ち上げが済んだので、今は試験的に内部運用しています。 ざっくりどういうAPIかというと、パラメータをGETで渡すと、iconDecotterのcanavs上で描画されるような画像...
Web

canvas.getImageData・putImageDataを利用したレイヤー効果

canvasに画像を貼り付ける際に、様々な画像加工エフェクトを付けられたら幅が広がるのでは、と思って少し調べた所、こちらのスクリプトで同様のことがされておりましたので、参考にさせて頂きました。 フォトレタッチやドローイングツールのレイヤー効...
Web

canvas.drawImagで貼り付ける画像を回転させる

さて今度は回転の話です。これはdrawImageの引数では指定できませんので、変形マトリックスを使います。これもまた2通りのやり方があります。 rotateメソッドでcanvasの変形をしてから、drawImageで貼り付ける transf...
Web

canvas.drawImageで貼り付け先のサイズを調整する

位置調整が出来たら、今度は拡大縮小についてです。これについてもいくつかの方法があります。 drawImageメソッドの引数で貼り付けサイズを指定する scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける tran...