キャンバスの大きさは、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 'ＭＳ Ｐゴシック'";
ctx.strokeText("文字を重ねる", 15, 75);
ctx.fillText("文字を重ねる", 15, 95);
}
}
</script>
関連する記事 HTML5 : canvas 要素に画像をロードする
|
|
【HTML5の最新記事】
- Google Chrome の type="date" で表示される datepicker の最も使いどころは、フレームをまたいで表示されるところです
- IFRAME が各ブラウザで現在(2013/03/13)どのように振る舞うかのマトリックス
- Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )
- Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く
- Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く
- Canvas : 指定サイズ BOX の内側を指定の太さで線を引く
- HTML5 : 最も簡単な「required 属性」による未入力チェック
- HTML5 : canvas 要素に画像をロードする
