SQLの窓

2011年04月03日


HTML5 : 画像にテキストを重ねて少し回転して「名前を付けて画像を保存」するとどうなるか

キャンバスの大きさは、500 x 120 で、画像サイズは 334 x 80 です。Firefox 4.0 で保存すると以下のようになります。



ctx.rotate で回転する事を前提に以降の命令が実行されます。基本的に背景は透過しています。元の画像が png なのでそうなったのだとは思いますが、他ではまだ確認していません。

他を試してみると・・・

Google Chrome => x
Opera => x
Safari => x

思いの他、画像として保存できないようですが、IE9 はまだ試してませんが、Firefox 的にはかなりリードしてるような気がします。

( canvas に特別な指定をしていません )


IE9 製品候補版で試すと・・・

期待していたのですが、ダメでした。保存できませんので、Firefox のみブラウザで簡単な画像加工ができるという事になります。


toDataURL() を使うと可能ですが・・・

srcData = canvas.toDataURL()
document.getElementById("img_test").src = srcData;
---------------------------------------
<img src="" id="img_test" />

但し、この場合は元々の画像が同一ドメインでないと既存画像オブジェクトにセットできないのです。セキュリティエラーが出るので、そもそも正しいのですが、そうなると逆に Firefox はひょっとしてまずいのでは・・と思う事なるのですが、ブラウザの機能だから OK という事なのでしょうね。( 個人利用という考え方で、操作する人に依存する処理だから )

・・・でも、突っ込まれるのは確実そうな理屈ではあります。


<div id="target"><input type="button" value="CANVAS + 画像表示テスト" onclick='drawMyImage()'><br></div>
<script type="text/javascript">
function drawMyImage() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "500");
		canvas.setAttribute("height", "120");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');
	var img = new Image();
	img.src = "http://winofsql.jp/image/logical_error.png?" + new Date().getTime();
	img.onload = function() {
		ctx.rotate( 8 * Math.PI / 180 );
		ctx.drawImage(img, 0, 0);  
		ctx.font = "bold 22px 'MS Pゴシック'";
		ctx.strokeText("文字を重ねる", 15, 75);
		ctx.fillText("文字を重ねる", 15, 95);
	}
}
</script>


関連する記事

HTML5 : canvas 要素に画像をロードする



posted by lightbox at 2011-04-03 21:32 | HTML5 | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり