もちろん、サーバー側でのチェックを行うのは当然ですが、無駄な通信 が減り、JavaScript で記述する労力も軽減されます ここをクリックすると、実際にテストできます ※ この他にもチェック機構があります。 ▼ Firefox4Firefox4 では、title 属性では無く x-moz-errormessage="必須入力です" とする必要がありました ▼ Google Chrome
<form> <input type="text" required title="必須入力です"> <input type="submit" value="送信"> </form>
※ IE9 は明日チェックしますが、ドキュメント見る限りにおいて存在しません ※ 2011/04/07 : IE9、Opera11、Safari5 では動作しません。
キャンバスの大きさは、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 要素に画像をロードする
IE9 はまだ製品候補版ですし、そもそも IE8 では canvas は実装されていませんが、 今後は IE9 をターゲットとしていろいろなものが作られるでしょうから、今のうち に IE8 でもある程度は慣れておいたほうがいいと思います。 もちろん、HTML5 を想定した場合は、Firefox 等、IE 以外を使うのがテストの上で は間違いありませんが、IE8 以下のシェアを無視できるほど提供側の懐は豊かでは 無いので、ガンガンに HTML5 を使わない場合は考慮しなければなりません。 excanvas.js は、そんな IE8 以前の為のライブラリで、完全に IE を無視できない 人の為にあります。プログラムで「ふり」をしているので、動的に canvas を作る 場合はちょっと解りません。そこまで調べる必要があるほど、IE8 の価値はもう無 いのでは無いかとも思うのも事実ですし。
<!--[if lte IE 8]>
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/excanvas.js"></script>
<canvas id="c1" width="334" height="80"></canvas>
<![endif]-->
<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 ) {
canvas = document.getElementById('c1');
if ( ! canvas || ! canvas.getContext ) {
return false;
}
}
else {
canvas.setAttribute("width", "334");
canvas.setAttribute("height", "80");
}
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.drawImage(img, 0, 0);
}
}
</script>
関連する記事 HTML5 : 画像にテキストを重ねて少し回転して 「名前を付けて画像を保存」するとどうなるか
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
