create sample image -dummy image generator

README

html5のcanvasを使用してサンプル画像ダミー画像生成のjsを作成しました。

http://web.loft-net.co.jp/lofttecs/create_sample_image/


透過の指定を修正いたしました。

jQuery 1.7.2 でとりあえず動いています。

copdepen:
https://codepen.io/lofttecs/pen/KKPaqrQ

jsdoit.css

body {
  font: 0.8em sans-serif;
}
dt.textalignright{
	float: left;
	width: 9em;
	padding-right: 1em;
	text-align: right;
}

jsdoit.html

<dl>
<dt class="textalignright">width:</dt>
<dd><input id="inp_w" name="width" value="" type="text" /> px</dd>
<dt class="textalignright">height:</dt>
<dd><input id="inp_h" name="height" value="" type="text" /> px</dd>
<dt class="textalignright">font color:</dt>
<dd><input id="inp_fc" name="font_color" value="#" type="text" />
, alpha:<input type="text" id="inp_txa" name="inp_txa" value="" /></dd>
<dt class="textalignright">text shadow:</dt>
<dd><input id="inp_tso" name="text_shadow_on" value="1" checked="checked" type="checkbox" /> <input id="inp_tsc" name="text_shadow_color" value="#" type="text" /> size:<input id="inp_tss" name="text_shadow_size" value="" type="text" />px
<dl>
<dd>offset X:<input id="inp_tsx" name="text_shadow_x" value="" type="text" />px Y:<input id="inp_tsy" name="text_shadow_y" value="" type="text" />px</dd>
</dl>
</dd>
<dt class="textalignright">background color:</dt>
<dd><input id="inp_bc" name="background_color" value="#" type="text" />
 , alpha:<input type="text" id="inp_bga" name="inp_bga" value="" /></dd>
<dt class="textalignright">border color:</dt>
<dd><label><input id="inp_border1" name="border" value="0" type="radio" />none</label>
    <input id="inp_border2" name="border" value="1" checked="checked" type="radio" />
    <input id="inp_border3" name="borderColor" value="#" type="text" />
    <input id="inp_border4" name="borderSize" value="" type="text" /> px
    , alpha:<input type="text" id="inp_boa" name="globalAlpha" value="" /></dd>
<dt class="textalignright">text:</dt>
<dd><label><input id="inp_tt1" name="text_type" value="fc" checked="checked" type="radio" />size</label> <input id="inp_tt2" name="text_type" value="fr" type="radio" /> <input id="inp_tf" name="text_free" value="sample" type="text" /></dd>
<dt class="textalignright">fontSize:</dt>
<dd><label><input id="inp_fontSize1" name="fontSize" value="auto" checked="checked" type="radio" />auto <span id="auto_fs" style="font-size: 0.8em;"></span></label> <input id="inp_fontSize2" name="fontSize" value="manual" type="radio" /> <input id="inp_fontSize3" name="text_fontSize" value="" type="text" /> px</dd>
<dt class="textalignright">fontFamily:</dt>
<dd><input name="fontFamily" id="inp_fontFamily" type="text" /><select name="slc_fontFamily" id="slc_fontFamily">
<option value="sans-serif">sans-serif</option>
<option value="serif">serif</option>
<option value="cursive">cursive</option>
<option value="fantasy">fantasy</option>
<option value="monospace">monospace</option>
</select>
<div id="suggest" style="display: none; background-color: #eee; position: absolute;"></div>
</dd>
<dt class="textalignright">fontDecration:</dt>
<dd><label><input id="inp_fontDecrationBold" name="fontDecrationBold" value="1" type="checkbox" />Bold</label> <label><input id="inp_fontDecrationItalic" name="fontDecrationItalic" value="1" type="checkbox" />Italic</label> <!--<label><input type="checkbox" id="inp_fontDecrationUnderline" name="fontDecrationUnderline" value="1" />Underline</label>--></dd>
<dt class="textalignright">window color:</dt>
<dd><input id="inp_wc" name="window_color" value="#" type="text" /></dd>
<dt class="textalignright">create</dt>
<dd><input id="inp_b" name="set" value="create" type="button" /></dd>
</dl>
<p id="createsampleimage"></p>

jsdoit.js

var $j = jQuery.noConflict();

$j(document).ready(function() {
	create_image();
	$j('#inp_b').click(function (){
		create_image();
	})
	$j('input').bind('keydown', function(e) {
		if(e.which == 13 ) create_image();
	});
});

function create_image(){
	if ( $j('#canvassample') ) {
		$j('#canvassample').remove();
	}
	var w = 200;
	var h = 200;
	var fc = "#333333";
	var bc = "#DDDDDD";
	var bga = "1.0";
	var boa = "1.0";
	var txa = "1.0";
	var wc = "#FFFFFF";
	var brc = "#333333";
	var br = $j('#inp_border2').attr("checked");
	var brs = 1;
	var tso = 1;
	var tsc = "#333333";
	var tss = "3";
	var tsx = "0";
	var tsy = "0";
	
	if($j('#inp_w').attr("value") ) w = $j('#inp_w').attr("value");
	if($j('#inp_h').attr("value") ) h = $j('#inp_h').attr("value");
	if($j('#inp_fc').attr("value")!='#' ) fc = $j('#inp_fc').attr("value");
	if($j('#inp_bc').attr("value")!='#' ) bc = $j('#inp_bc').attr("value");
	if($j('#inp_bga').attr("value") ) bga = $j('#inp_bga').attr("value");
	if($j('#inp_boa').attr("value") ) boa = $j('#inp_boa').attr("value");
	if($j('#inp_txa').attr("value") ) txa = $j('#inp_txa').attr("value");
	if($j('#inp_wc').attr("value")!='#' ) wc = $j('#inp_wc').attr("value");
	($j('#inp_border3').attr("value")!='#' )? brc = $j('#inp_border3').attr("value") : $j('#inp_border3').attr({value:brc});
	($j.isNumeric($j('#inp_border4').attr("value")) )? brs = $j('#inp_border4').attr("value") : $j('#inp_border4').attr({value:brs});
	if($j('#inp_tsc').attr("value")!='#' ) tsc = $j('#inp_tsc').attr("value");
	tso = $j('#inp_tso').attr("checked");
	tsx = ($j.isNumeric($j('#inp_tsx').attr("value")) )?$j('#inp_tsx').attr("value"):0;
	tsy = ($j.isNumeric($j('#inp_tsy').attr("value")) )?$j('#inp_tsy').attr("value"):0;
	
	$j("#createsampleimage").append('<canvas id="canvassample" width="' + w + '" height="' + h + '"></canvas>');
	if ( ! $j('#canvassample') || ! $j('#canvassample')[0].getContext ) {
		return false;
	}
	if(!$j('#inp_w').attr("value") ) $j('#inp_w').attr({value:w});
	if(!$j('#inp_h').attr("value") ) $j('#inp_h').attr({value:h});
	if($j('#inp_fc').attr("value")=='#' ) $j('#inp_fc').attr({value:fc});
	if($j('#inp_bc').attr("value")=='#' ) $j('#inp_bc').attr({value:bc});
	if(!$j('#inp_bga').attr("value") ) $j('#inp_bga').attr({value:bga});
	if(!$j('#inp_boa').attr("value") ) $j('#inp_boa').attr({value:boa});
	if(!$j('#inp_txa').attr("value") ) $j('#inp_txa').attr({value:txa});
	if($j('#inp_wc').attr("value")=='#' ) $j('#inp_wc').attr({value:wc});
	if($j('#inp_tsc').attr("value")=='#' ) $j('#inp_tsc').attr({value:tsc});
	$j('#inp_tsx').attr({value:tsx});
	$j('#inp_tsy').attr({value:tsy});
	
	var fs = (w * 13 / 100 < h)? w * 13 / 100 : h * 0.8;
	
	var ff = $j('#inp_fontFamily').val();
	
	ff=(ff=="sans-serif"  || ff=="serif" || ff=="cursive" || ff=="fantasy" || ff=="monospace")?ff:"'"+ff+"'";
	
	var fd_b = $j('#inp_fontDecrationBold').attr("checked");
	var fd_i = $j('#inp_fontDecrationItalic').attr("checked");
	
	$j("#auto_fs").text("(" +fs + " px)");

	$j('#canvassample').css({
		 width:w
		,height:h
		});
	$j("body").css({
			"background-color":wc
		});
	var ctx = $j('#canvassample')[0].getContext('2d');
	
	
	ctx.clearRect(0, 0, w, h);
	
	ctx.fillStyle = bc; 
	ctx.globalAlpha = bga;

	ctx.fillRect(0, 0, w, h);

	//border
	ctx.globalAlpha = boa;
	if(br){
		for(i=0;i<brs;i++){
			ctx.moveTo(i, i);
			ctx.lineTo(w-i, i);
			ctx.lineTo(w-i, h-i);
			ctx.lineTo(i, h-i);
			ctx.closePath();
			ctx.strokeStyle = brc;
			ctx.stroke();
		}
	}
	
	if($j('#inp_fontSize2').attr("checked") && $j.isNumeric($j('#inp_fontSize3').val()) && $j('#inp_fontSize3').val() > 0 ){
		fs = parseInt($j('#inp_fontSize3').val());
	}
	ctx.font = fs + "px " + ff;
	if(fd_b){
		ctx.font = "bold " + ctx.font;
	}
	if(fd_i){
		ctx.font = "italic " + ctx.font;
	}
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	
	var t = w+"px x "+h+"px";
	if($j('#inp_tt2').attr("checked") ){
		t = $j('#inp_tf').attr("value");
	}
	ctx.fillStyle = fc;
	if(tso){
		tss =($j.isNumeric($j('#inp_tss').attr("value")))?$j('#inp_tss').attr("value"):(fs >= 10)?3:1;
		$j('#inp_tss').attr({value:tss});
		/* ぼかしの範囲を定義 */
		ctx.shadowBlur = tss;
		/* ぼかしの色を定義 */
		ctx.shadowColor = tsc;
		/* ぼかしのオフセット（水平方向）を定義 */
		ctx.shadowOffsetX = tsx;
		/* ぼかしのオフセット（垂直方向）を定義 */
		ctx.shadowOffsetY = tsy;
	}
	/* 文字列の幅を調べる */
	tm = ctx.measureText(t);
	tw = tm.width;
	var line = [""];
	var line_i = 0;
	for (i=0; i < t.length; i++) {
		var char = t.charAt(i);
		if ( ctx.measureText(line[line_i] + char).width > w ) {
			line_i++;
			line[line_i] = "";
		}
		line[line_i] += char;
	}
	
	ctx.globalAlpha = txa;
	lines = line.length;
	flg = 0;
	line_h = h / 2 - lines / 2 * fs - 0.5 * fs;
	for (i=0; i < lines; i++) {
		line_h += fs ;
		ctx.fillText(line[i], w/2, line_h ,w);  
	}
	
	if ( $j('#img_jpeg') ) {
		$j('#img_jpeg').remove();
	}
	if ( $j('#img_png') ) {
		$j('#img_png').remove();
	}
	$j("#createsampleimage").append('<span id="img_jpeg"><br /> jpeg : <br /><a href=""><img src="" alt="" /></a></span>');
	$j('#img_jpeg img').attr({src:$j('#canvassample')[0].toDataURL("image/jpeg") + ""});
	$j('#img_jpeg a').attr({href:$j('#canvassample')[0].toDataURL("image/jpeg") + ""});
	$j("#img_jpeg").append('<textarea cols="50" rows="2" readonly="readonly" style="height: 40px; width: 100%;">'+$j('#img_jpeg a').html()+'</textarea>');
	$j("#createsampleimage").append('<span id="img_png"><br /> png : <br /><a href=""><img src="" alt="" /></a></span>');
	$j('#img_png img').attr({src:$j('#canvassample')[0].toDataURL("image/png")});
	$j('#img_png a').attr({href:$j('#canvassample')[0].toDataURL("image/png") + ""});
	$j("#img_png").append('<textarea cols="50" rows="2" readonly="readonly" style="height: 40px; width: 100%;">'+$j('#img_png a').html()+'</textarea>');
	
	$j("#slc_fontFamily").change(function(){
		$j("#inp_fontFamily").val($j("#slc_fontFamily option:selected").val())
	});
	if($j("#inp_fontFamily").val() == "")$j("#inp_fontFamily").val($j("#slc_fontFamily option").eq(0).val());
	


}