http://bzmm.jp/hs_gene/
http://vllv.us/CGI/yugioh/
上のようなジェネレーターが作りたいです。
やりたいこと
1.テキストボックスに文字を入れ、その文字が入った画像を作成する。
2.画像に入れる文字のフォントを指定できるようにする。
3.(下の遊戯王ジェネレーターのように)画像を選択し、その画像を自動で大きさを変えて貼り付ける。
4.作成した画像をtwitterに投稿できるようにする。
(この時、twitterの画像として貼り付けるのではなく別ページを開いてそこに画像が貼ってある形にしたい)
検索しても方法がわからないので方法を教えてください。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
以下の HTML ファイルを Web サーバーに配置するだけで実現可能です
<script>addEventListener('DOMContentLoaded',function(ev){ _=0;
function subs(f){return [].slice.call(arguments,1).reduce(function(s,v){return s.replace(/%/,v)}, f)}
function range(n){return Array.apply(null,new Array(n)).map(function(v,i){return i})}
function drawVision(name, role, font, imga) {
var pane = document.getElementById('vision');
var CX = pane.width/2, CY = pane.height/2;
var R = Math.sqrt(pane.width*pane.width + pane.height*pane.height) / 2 - 5;
var M = R/10;
var PW = pane.width - M*2|0, PH = pane.height - M*2|0;
var ctx = pane.getContext('2d');
ctx.clearRect(0,0, pane.width,pane.height);
// 枠
var points = range(18).map(function(i){return Math.PI*i/9}).map(function(s){return [CX+R*Math.sin(s), CY-R*Math.cos(s)]});
ctx.beginPath();
points.forEach(function(p){points.forEach(function(q){ctx.moveTo(p[0],p[1]),ctx.lineTo(q[0],q[1])})});
ctx.shadowBlur = 0; ctx.lineWidth = 1; ctx.strokeStyle = 'navy'; ctx.stroke();
// 角丸箱
function plotRoundBox(x,y, w,h, r) {
var s = Math.PI/2;
ctx.beginPath();
ctx.arc(x+w-r, y+h-r, r, s*0, s*1, false);
ctx.arc(x+0+r, y+h-r, r, s*1, s*2, false);
ctx.arc(x+0+r, y+0+r, r, s*2, s*3, false);
ctx.arc(x+w-r, y+0+r, r, s*3, s*4, false);
ctx.closePath();
return ctx;
}
ctx.fillStyle = 'white'; ctx.shadowBlur = M; ctx.shadowColor = 'navy';
plotRoundBox(M,M, PW,PH, M/2).fill();
ctx.shadowBlur = 0;
// テロップ
function plotTelop(){
var x = CX, y = M + PH - M, yy = y - M*1.5, w = PW - M;
var fx = ((font.indexOf(' ') >= 0)? subs('"%"', font): font) + ',serif';
ctx.fillStyle = 'white';
ctx.strokeStyle = 'rgba(0,0,0,0.7)'; ctx.lineWidth = 2;
ctx.shadowBlur = 10; ctx.shadowColor = 'black';
ctx.textAlign = 'center'; ctx.textBaseline = 'ideographic';
if (role) {
ctx.font = subs('%px %', M/2, fx);
ctx.strokeText(role, x,yy, w);
ctx.fillText(role, x,yy, w);
}
if (name) {
ctx.font = subs('%px %', M, fx);
ctx.strokeText(name, x,y, w);
ctx.fillText(name, x,y, w);
}
ctx.shadowBlur = 0;
}
// 画像
if (imga) {
var img = new Image();
img.src = imga;
img.onload = function(){
var iw = img.width, ih = img.height;
var zw = PW/iw, zh = PH/ih;
var sx = 0, sy = 0, sw = iw, sh = ih;
if (zw < zh) { sx = (iw-PW/PH*ih)/2|0, sw = PW/PH*ih; }
if (zw > zh) { sy = (ih-PH/PW*iw)/2|0, sh = PH/PW*iw; }
ctx.save();
plotRoundBox(M,M, PW,PH, M/2).clip();
ctx.drawImage(img, sx,sy,sw,sh, M,M,PW,PH);
ctx.restore();
plotTelop();
};
} else {
plotTelop();
}
}
// 描画ボタン
document.forms['teloparg'].addEventListener('submit',function(fev){
fev.preventDefault();
var es = fev.target.elements;
var role = es['ro'].value;
var name = es['na'].value;
var font = es['fo'].value; if(!font) font = 'serif';
var imga = es['im'].value;
if (name) drawVision(name, role, font, imga);
var a = fev.target.querySelector('a');
a.href = window.location.href.replace(/\?.+$/,'')+subs('?ro=%&na=%&fo=%&im=%', role, name, font, imga);
a.textContent = a.href;
},false);
// 外部リンクより
var args = window.location.search;
if (args) {
var a = {}, m, re = /[\?&](\w+)=([^&]+)/g;
while (m = re.exec(args)) a[m[1]] = decodeURI(m[2]);
var es = document.forms['teloparg'].elements;
for (var i in a) if(es[i]) es[i].value = a[i];
if (a.na) drawVision(a.na, a.ro, a.fo, a.im);
}
},false)</script>
<form name=teloparg><dl>
<dt>肩書<dd><input name=ro value='清国欽差大臣 兼 両広総督'>
<dt>名前<dd><input name=na value='林 則徐'>
<dt>書体<dd><input name=fo value='sans-serif'>
<dt>画像URL<dd><input name=im value='./lin_zexu.jpg'>
<dt><dd><button type=submit>描画</button>
<dt>外部リンク<dd><a></a>
</dl></form>
<canvas id=vision width=400 height=640>要 HTML5 処理系</canvas>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Word(ワード) 分かる方教えてください。 wordに図を差込して資料を作成してますが その図上の説明したい箇所に①と 3 2022/10/20 20:05
- Word(ワード) 写真3枚をA4に貼り付けたい 5 2023/07/03 14:36
- 写真 私が撮った別の写真に、下の画像の「LEON」の文字をそっくりそのまま貼り付けるにはどうすれば良いです 2 2022/10/28 11:42
- その他(法律) Wikipediaの著作権について 2 2022/08/14 07:14
- 教えて!goo 「教えて!goo」や「Yahoo知恵袋」に投稿する際の画像についてお聞きします。 2 2023/05/23 12:53
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- その他(メールソフト・メールサービス) メールソフトを教えてください 1 2023/03/28 23:32
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- その他(アニメ・マンガ・特撮) 著作権について アニメのオタ活手帳に貼るために、ワンシーンやキャラクターの立ち絵などを印刷したいです 3 2023/03/07 17:26
- Visual Basic(VBA) PowerPoint VBA で画像の鮮明度を変更する方法がわかりません 2 2023/03/24 13:34
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマフォではボタンを表示させ...
-
なぜmatchメソッドがエラーにな...
-
gas スプレッドシートがアクテ...
-
イラレでナンバリングする方法
-
ローカルにあるファイルを検索...
-
【JavaScript】数当てゲームを...
-
vb.netでの記述方法について 以...
-
gas 日付けの加算
-
var exports = exports || {}; ...
-
JavaScriptで平日のみをカウン...
-
GASのエラー「undefined からプ...
-
1日1回だけ引けるjavascriptお...
-
C#OpenCv V4にのエラーに関する...
-
ASP.NETのコントロールの値をJa...
-
jsによって検索プルダウン、都...
-
GASでundefinedエラーが出ます
-
JavaScript でのリアルタイム時...
-
翌月を取得するGASが分かりません
-
nullまたはオブジェクトではあ...
-
極小コードに挑戦!part2 数列...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
var exports = exports || {}; ...
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
GASでGoogleフォームの自動返信...
-
HTMLで作った時報アプリが動き...
-
javascriptでテーブルに追加し...
-
html javascript リンク先アド...
-
【西暦等の変換】
-
ローカルにあるファイルを検索...
-
ASP.NETのコントロールの値をJa...
-
なぜmatchメソッドがエラーにな...
-
翌月を取得するGASが分かりません
-
gas スプレッドシートがアクテ...
-
ASP.NET MVCでObjectをjsに渡す
-
カンマで終わってるのはセミコ...
-
JavaScriptで文字列の特定文字...
-
javascriptでiframeのURL変更は?
-
APIを使って埋め込んだグーグル...
おすすめ情報