toDataURLの際にjpegと比較して軽い方を選ぶように
toDataURL()はpngの対応が必須実装なので、canvasが使えるブラウザは必ずpng出力が出来ます。 ですが、jpeg対応しているブラウザも多く、特に大きなアイコン画像などを扱うiconDecotterでは 実際のところjpegの方がだいたいは軽いので、今まではpngしか扱っていなかったのをjpeg対応するようにしました。
「canvas」一覧
アイコンのデコレーション処理をnode.jsで立ち上げたAPIに回す
以前ちょっとnode.jsについて書きましたが、概ねAPIの立ち上げが済んだので、今は試験的に内部運用しています。 ざっくりどういうAPIかというと、パラメータをGETで渡すと、iconDecotterのcanavs上で描画されるような画像を返してくれるというものです。
canvas.getImageData・putImageDataを利用したレイヤー効果
canvasに画像を貼り付ける際に、様々な画像加工エフェクトを付けられたら幅が広がるのでは、と思って少し調べた所、こちらのスクリプトで同様のことがされておりましたので、参考にさせて頂きました。
canvas.drawImagで貼り付ける画像を回転させる
さて今度は回転の話です。これはdrawImageの引数では指定できませんので、変形マトリックスを使います。これもまた2通りのやり方があります。 rotateメソッドでcanvasの変形をしてから、drawImageで貼り付ける transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける
canvas.drawImageで貼り付け先のサイズを調整する
位置調整が出来たら、今度は拡大縮小についてです。これについてもいくつかの方法があります。 drawImageメソッドの引数で貼り付けサイズを指定する scaleメソッドでcanvasの変形をしてから、drawImageで貼り付ける transformメソッドでcanvasの変形をしてから、drawImageで貼り付ける
スポンサーリンク