Submit Search
Upload
HTML5のCanvas入門 - Img画像を編集してみよう -
•
15 likes
•
16,173 views
Toshio Ehara
Follow
HTML5+α @福岡 - 第21回 2013/12/18(水) 19:30 LT資料
Read less
Read more
Technology
Entertainment & Humor
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
AWS LambdaとDynamoDBがこんなにツライはずがない #ssmjp
AWS LambdaとDynamoDBがこんなにツライはずがない #ssmjp
Masahiro NAKAYAMA
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
健人 井関
MySQLからPostgreSQLへのマイグレーションのハマリ所
MySQLからPostgreSQLへのマイグレーションのハマリ所
Makoto Kaga
[AWSマイスターシリーズ] AWS SDK for Java / .NET
[AWSマイスターシリーズ] AWS SDK for Java / .NET
Amazon Web Services Japan
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
UMLモデルを使った自動生成
UMLモデルを使った自動生成
Norihito Ohshima
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
[AKIBA.AWS] AWS Elemental MediaConvertから学ぶコーデック入門
[AKIBA.AWS] AWS Elemental MediaConvertから学ぶコーデック入門
Shuji Kikuchi
Recommended
AWS LambdaとDynamoDBがこんなにツライはずがない #ssmjp
AWS LambdaとDynamoDBがこんなにツライはずがない #ssmjp
Masahiro NAKAYAMA
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
健人 井関
MySQLからPostgreSQLへのマイグレーションのハマリ所
MySQLからPostgreSQLへのマイグレーションのハマリ所
Makoto Kaga
[AWSマイスターシリーズ] AWS SDK for Java / .NET
[AWSマイスターシリーズ] AWS SDK for Java / .NET
Amazon Web Services Japan
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
コンポーネント指向による、Reactのベストプラクティスとバッドプラクティス
Kohei Asai
UMLモデルを使った自動生成
UMLモデルを使った自動生成
Norihito Ohshima
新入社員のための大規模ゲーム開発入門 サーバサイド編
新入社員のための大規模ゲーム開発入門 サーバサイド編
infinite_loop
[AKIBA.AWS] AWS Elemental MediaConvertから学ぶコーデック入門
[AKIBA.AWS] AWS Elemental MediaConvertから学ぶコーデック入門
Shuji Kikuchi
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
信頼性とアジリティを同時に上げろ!モノタロウのカナリアリリース導入.pdf
信頼性とアジリティを同時に上げろ!モノタロウのカナリアリリース導入.pdf
株式会社MonotaRO Tech Team
AWS CognitoからAuth0への移行パターン4つ
AWS CognitoからAuth0への移行パターン4つ
株式会社スタジオメッシュ
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
MySQLの文字コード事情 2017版
MySQLの文字コード事情 2017版
Masahiro Tomita
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
Yasuhiro Yoshimura
O/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐ
kwatch
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
RxSwiftを“チーム開発に”導入する話
RxSwiftを“チーム開発に”導入する話
LINE Corporation
AWS Lambdaで作るクローラー/スクレイピング
AWS Lambdaで作るクローラー/スクレイピング
Takuro Sasaki
文献紹介:YOLO series:v1-v5, X, F, and YOWO
文献紹介:YOLO series:v1-v5, X, F, and YOWO
Toru Tamaki
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
Hirokazu Ouchi
SSII2019TS: 実践カメラキャリブレーション ~カメラを用いた実世界計測の基礎と応用~
SSII2019TS: 実践カメラキャリブレーション ~カメラを用いた実世界計測の基礎と応用~
SSII
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
エンタープライズ、アーキテクチャ、アジャイルのこれから
エンタープライズ、アーキテクチャ、アジャイルのこれから
Yusuke Suzuki
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Takahiro Inoue
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
NTT DATA Technology & Innovation
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
Masayuki Maekawa
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
More Related Content
What's hot
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
ssuser070fa9
Mavenの真実とウソ
Mavenの真実とウソ
Yoshitaka Kawashima
信頼性とアジリティを同時に上げろ!モノタロウのカナリアリリース導入.pdf
信頼性とアジリティを同時に上げろ!モノタロウのカナリアリリース導入.pdf
株式会社MonotaRO Tech Team
AWS CognitoからAuth0への移行パターン4つ
AWS CognitoからAuth0への移行パターン4つ
株式会社スタジオメッシュ
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
Akihiko Horiuchi
MySQLの文字コード事情 2017版
MySQLの文字コード事情 2017版
Masahiro Tomita
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
Yasuhiro Yoshimura
O/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐ
kwatch
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
Yoichi Toyota
RxSwiftを“チーム開発に”導入する話
RxSwiftを“チーム開発に”導入する話
LINE Corporation
AWS Lambdaで作るクローラー/スクレイピング
AWS Lambdaで作るクローラー/スクレイピング
Takuro Sasaki
文献紹介:YOLO series:v1-v5, X, F, and YOWO
文献紹介:YOLO series:v1-v5, X, F, and YOWO
Toru Tamaki
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
Hirokazu Ouchi
SSII2019TS: 実践カメラキャリブレーション ~カメラを用いた実世界計測の基礎と応用~
SSII2019TS: 実践カメラキャリブレーション ~カメラを用いた実世界計測の基礎と応用~
SSII
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
Kentaro Matsui
エンタープライズ、アーキテクチャ、アジャイルのこれから
エンタープライズ、アーキテクチャ、アジャイルのこれから
Yusuke Suzuki
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Takahiro Inoue
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
樽八 仲川
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
Yuki Hirano
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
NTT DATA Technology & Innovation
What's hot
(20)
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
AngularとSpring Bootで作るSPA + RESTful Web Serviceアプリケーション
Mavenの真実とウソ
Mavenの真実とウソ
信頼性とアジリティを同時に上げろ!モノタロウのカナリアリリース導入.pdf
信頼性とアジリティを同時に上げろ!モノタロウのカナリアリリース導入.pdf
AWS CognitoからAuth0への移行パターン4つ
AWS CognitoからAuth0への移行パターン4つ
GoによるWebアプリ開発のキホン
GoによるWebアプリ開発のキホン
MySQLの文字コード事情 2017版
MySQLの文字コード事情 2017版
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
【関東GPGPU勉強会#3】OpenCVの新機能 UMatを先取りしよう
O/Rマッパーによるトラブルを未然に防ぐ
O/Rマッパーによるトラブルを未然に防ぐ
SPA時代のOGPとの戦い方
SPA時代のOGPとの戦い方
RxSwiftを“チーム開発に”導入する話
RxSwiftを“チーム開発に”導入する話
AWS Lambdaで作るクローラー/スクレイピング
AWS Lambdaで作るクローラー/スクレイピング
文献紹介:YOLO series:v1-v5, X, F, and YOWO
文献紹介:YOLO series:v1-v5, X, F, and YOWO
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
急なトラフィック増にも動じない、Amazon S3とCloudFrontを活用したWebサイト構築
SSII2019TS: 実践カメラキャリブレーション ~カメラを用いた実世界計測の基礎と応用~
SSII2019TS: 実践カメラキャリブレーション ~カメラを用いた実世界計測の基礎と応用~
テスト文字列に「うんこ」と入れるな
テスト文字列に「うんこ」と入れるな
エンタープライズ、アーキテクチャ、アジャイルのこれから
エンタープライズ、アーキテクチャ、アジャイルのこれから
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
「GraphDB徹底入門」〜構造や仕組み理解から使いどころ・種々のGraphDBの比較まで幅広く〜
Webアプリケーション負荷試験実践入門
Webアプリケーション負荷試験実践入門
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
JavaScriptの仕組みと未来のJavaScript ~ESNextとは~
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
ストリーム処理におけるApache Avroの活用について(NTTデータ テクノロジーカンファレンス 2019 講演資料、2019/09/05)
Similar to HTML5のCanvas入門 - Img画像を編集してみよう -
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
Masayuki Maekawa
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Yuuichi Akagawa
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
Yasuhito Yabe
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
yaju88
Canvas勉強会
Canvas勉強会
Tsutomu Kawamura
メディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描く
Atsushi Tadokoro
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
Shinichi Sato
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Kazuyuki Honda
Imagemagickknowhow
Imagemagickknowhow
Yo Ya
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
スマホにおけるWebGL入門
スマホにおけるWebGL入門
Yohta Kanke
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
Atsushi Tadokoro
GoImagickThumbnail
GoImagickThumbnail
Yo Ya
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
Daisuke Imai
WordBench Nagoya 201601
WordBench Nagoya 201601
kuma2515
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
Hiroki Toyokawa
go-thumber-imagick
go-thumber-imagick
Yo Ya
Similar to HTML5のCanvas入門 - Img画像を編集してみよう -
(20)
JavaScriptで『漫画カメラ』的画像加工
JavaScriptで『漫画カメラ』的画像加工
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
JavaScriptでいいじゃなイカ
JavaScriptでいいじゃなイカ
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
レスポンシブWebデザイン【発展編】
レスポンシブWebデザイン【発展編】
静岡Developers勉強会 HTML5&CSS3
静岡Developers勉強会 HTML5&CSS3
Canvas勉強会
Canvas勉強会
メディア芸術基礎 II Canvas + Javascriptで図形を描く
メディア芸術基礎 II Canvas + Javascriptで図形を描く
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
東の方からきました@鹿駆動勉強会
東の方からきました@鹿駆動勉強会
Imagemagickknowhow
Imagemagickknowhow
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
スマホにおけるWebGL入門
スマホにおけるWebGL入門
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
情報編集(Web) HTML5 実践1 Canvas + Javascriptで図形を描く
GoImagickThumbnail
GoImagickThumbnail
Creators'night#13 tech#2今井
Creators'night#13 tech#2今井
WordBench Nagoya 201601
WordBench Nagoya 201601
HTML5の前のJavaScript入門
HTML5の前のJavaScript入門
go-thumber-imagick
go-thumber-imagick
More from Toshio Ehara
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Toshio Ehara
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Toshio Ehara
Java電卓勉強会資料
Java電卓勉強会資料
Toshio Ehara
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!
Toshio Ehara
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
Toshio Ehara
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
Toshio Ehara
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
Toshio Ehara
AngularJS入門の巻2
AngularJS入門の巻2
Toshio Ehara
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
Toshio Ehara
AngularJS入門の巻
AngularJS入門の巻
Toshio Ehara
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
Toshio Ehara
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
Toshio Ehara
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
Toshio Ehara
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)
Toshio Ehara
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
Toshio Ehara
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
Toshio Ehara
JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??
Toshio Ehara
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
Toshio Ehara
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
Toshio Ehara
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
Toshio Ehara
More from Toshio Ehara
(20)
iPhoneアプリを Javaで書くよ?
iPhoneアプリを Javaで書くよ?
Java初心者勉強会(2015/08/07)資料
Java初心者勉強会(2015/08/07)資料
Java電卓勉強会資料
Java電卓勉強会資料
BABELで、ES2015(ES6)を学ぼう!
BABELで、ES2015(ES6)を学ぼう!
AngularJSで業務システムUI部品化
AngularJSで業務システムUI部品化
traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
AngularJS入門の巻2
AngularJS入門の巻2
JenkinsをJava開発でこんな感じで使っています
JenkinsをJava開発でこんな感じで使っています
AngularJS入門の巻
AngularJS入門の巻
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
AngularJSのDirectiveで俺俺タグつくっちゃお
AngularJSのDirectiveで俺俺タグつくっちゃお
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
BACKBONEJS+SCSS+JavaEE(JAX-RS) 今風のWebアプリをNetBeansで入門!
福岡のIT勉強会情報の集め方(LT資料)
福岡のIT勉強会情報の集め方(LT資料)
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSによるWebアプリケーション開発について
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
BACKBONE.JSにJasmineでテストコード書いてみた (LT資料)
JavaScriptのテストコード 一緒に勉強しませんか??
JavaScriptのテストコード 一緒に勉強しませんか??
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
【未発表】Backbone.jsとJavaEE7でWebアプリを作ろう!(第1回) 〜GETで一覧編〜
LT Leap MotionとJavaScriptで遊ぼう!
LT Leap MotionとJavaScriptで遊ぼう!
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
JavaScriptもBACKBONE.JSならスッキリ ~MVCぽいのを初体験!~
Recently uploaded
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
Recently uploaded
(8)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
HTML5のCanvas入門 - Img画像を編集してみよう -
1.
HTML5のCanvas入門 - Img画像を編集してみよう 2013/12/18(水)
HTML5+α @福岡 - 第21回 LT資料 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
2.
自己紹介です ======== 江原と申します。(@itokami1123) 福岡で業務アプリをJavaScriptで作って暮らしてます。 来年からはJava屋に転職。今は、名刺無いです…。 こんな野望が持ってます。 ・業務系WebアプリのUIをモット使いやすくしたい! ・JavaとJavaScriptを仲良くさせたい! ・コミュニティの力で福岡を一つに!景気上昇↑雇用拡大↑ ・生涯、福岡でエンジニアしたい!
3.
本日の内容 ======== HTML5のCanvas機能を使うとImgタグの画像編集が サーバの力を借りなくても クライアント(JavaScript)側で行うことが出来ます。 簡単ですがその手順や注意事項について説明させてください!
4.
( HTML5のCanvasて何?
5.
HTML5のCanvasとは ブラウザ上に図を描くための機能です。 JavaScriptで図形や画像の描画が出来ます!
6.
例えば、ブラウザに線とか引けます。 ! <canvas id="sample" width="200"
height="150"></canvas> ! var canvas = document.getElementById('sample'); ! var ctx = canvas.getContext('2d'); ! 描画対照を選択! ctx.beginPath(); ! ctx.moveTo(10, 10); ctx.lineTo(40, 40); ! ctx.stroke();
7.
例えば、ブラウザに線とか引けます。 ! <canvas id="sample" width="200"
height="150"></canvas> ! var canvas = document.getElementById('sample'); ! var ctx = canvas.getContext('2d'); ! ctx.beginPath(); 描画道具 ! Canvas 描画対照から Context ctx.moveTo(10, 10); 描画する道具を ctx.lineTo(40, 40); ! いただきます。 ctx.stroke();
8.
例えば、ブラウザに線とか引けます。 ! <canvas id="sample" width="200"
height="150"></canvas> 座標位置を設定して描画できます。 ! ! 線が引けた! var canvas = document.getElementById('sample'); ! var ctx = canvas.getContext('2d'); ! ctx.beginPath(); ! ctx.moveTo(10, 10); ctx.lineTo(40, 40); ! ctx.stroke();
9.
( ふーん、こんなんで画像編集できんの?
10.
ではCanvasで画像編集してみましょ〜!
11.
imgとCanvasの下準備…。 (512px) (512px) のpngを用意しました。 九九衰弱 -iPhoneアプリ
https://itunes.apple.com/jp/app/99suizyaku/id571962674 九九の書かれたカードでする神経衰弱ゲーム。間に合わないと爆破しちゃうぞ。 HTMLとCSSはこんな感じで用意しました。 <img id="source_img" /> <canvas id="edit_canvas" width="200" height="200" > </canvas> img{ Canvas解像度(200px) ×(200px) width: 200px; height: 200px; box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5); } canvas{ 画面に表示するサイズ width: 200px; height: 200px; box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.5); }
12.
imgデータをロードして… var $img =
$('#source_img'); ! $img.load( drawCanvas ); ! $img.attr( "src", "http://jsrun.it/assets/3/F/d/Q/3FdQP.png" ); ! imgタグに 画像を設定! imgがload完了後 drawCanvas関数を呼びます。
13.
imgデータをロードしてからのCanvas描画! function drawCanvas( event){ Eventからimgタグを取得! var
$img = $( event.target), img = $img[0]; Canvas描画道具取得 var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage( img, 0, 0 ); } imgデータを使ってCanvaに描画!
14.
そのまま貼付けしてみると… function drawCanvas( event){ var
$img = $( event.target), imgデータを (0,0)の位置に貼付け img = $img[0]; Canvasは 200x200なのではみでます! var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage( img, 0, 0 ); } Σ (
15.
貼付け先の幅と高さを指定してあげると… function drawCanvas( event){ var
$img = $( event.target), imgデータを (0,0)の位置に img = $img[0]; 幅200px 高さ200pxで描画! var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage( img, 0, 0 , 200, 200); } (
16.
爆弾だけ切り取りたい場合は… function drawCanvas( event){ var
$img = $( event.target), imgの(12,332)から幅高さ100pxを img = $img[0]; 幅200px 縦200pxで描画! var $canvas = $( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.drawImage(img, 12,332,100,100, 0,0,200,200); } (
17.
( あっ画像の向き間違えた…
18.
大丈夫!画像を回転出来ます!
19.
30度、60度、90度で回転させてみましょう〜! ctx.rotate( 30 * Math.PI
/ 180); ctx.drawImage( img, 0, 0 , 200, 200); ctx.rotate( 60 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); ctx.rotate( 90 * Math.PI / 180); ctx.drawImage( img, 0, 0 , 200, 200); ( あれっ?消えたよ..
20.
左上(0,0)を中心に回るみたいですね! ctx.rotate( 30 * Math.PI
/ 180); ctx.drawImage( img, 0, 0 , 200, 200); (0,0)
21.
だったら下の手順で行けそうですね! ①x,y座標を-100px ずらす ②90度回転! ③x,y座標を +100pxずらす (表示されるとこに移動する)
22.
さっきのイメージをコードにして… ①x,y左上に移動して.. ctx.translate( -100, -100
); ctx.rotate( 90 * Math.PI / 180); ctx.translate( 100, 100 ); ②90度回転! ③表示できる位置に戻す ctx.drawImage( img, 0, 0 , 200, 200); !?表示されない ( あれっ!?
23.
実は変換は逆に設定する必要があるのです。 ctx.translate( ctx.rotate( 100, 100 ); ③表示できる位置に戻す 90 *
Math.PI / 180); ②90度回転! ctx.translate( -100, -100 ); ①x,y左上に移動して.. ctx.drawImage( img, 0, 0 , 200, 200); \出来た/ (
24.
( せっかく加工した画像保存したいなぁ
25.
大丈夫!画像を取り出せます!
26.
Canvasの描画内容をBase64形式で取得出来ます。 var $canvas =
$( "#edit_canvas"); var ctx = $canvas[0].getContext("2d"); ctx.translate( ctx.rotate( 100, 100 ); 90 * Math.PI / 180); Base64形式で取得! ctx.translate( -100, -100 ); ctx.drawImage( img, 0, 0 , 200, 200); var base64Data = $canvas[0].toDataURL("image/png"); $('#out_img').attr( "src", base64Data); canvasタグ imgタグ この例は、作成したBase64形式のデー タをimgタグのsrcに指定しています。 文字列なのでサーバに送信してサーバ 側でPNG画像にする事も可能です。
27.
まとめ
28.
まとめ ======== ・Canvasは自由に図形を描画する事が出来ます。 ・CanvasはImgタグ画像を取り込む事が出来ます。 ・Canvasに取り込めば画像を回転したり切り取ったり出来ます。 ・画像変換の指定は逆の順番で書きましょう。 ・加工した画像 canvas.toDataURL() で取り出せます。
29.
HTML5のCanvasが使えるブラウザは結構多いと思います! うまく使えばサーバの負荷を減らす事が出来そうですね! http://fmbip.com/litmus/
30.
これで発表はおしまいです! ご清聴ありがとうございました!
Download now