ロト君のサイト by lotokunn

L'sCore ロト君のサイトへようこそ!

  1. TOP
  2. パソコン
  3. Canvasでサムネイル作成

Canvasでサムネイル作成

皆さんこんにちは!こんばんは!!ロト君です。
今回は、新しくサムネイル作成Appを作りましたので紹介したいと思います。

このAppは基本的に、HTML5のCanvas機能を使って作成しているものです。
従って、ブラウザを使える環境ならだれでも使えますので便利ソフトですね!

見た目は↑の様な感じです。
文字入力と、背景画像を選択できるようにしています。

プログラムは↓の様な感じです。少しゴチャゴチャしてますが、一応動きますねww


<!DOCTYPE html>
<html>
<head>
<title>Canvasでサムネイル作成</title>
</head>
<body>
<h1>Canvasでサムネイル作成</h1>
<canvas id="canvas" style="border: 5px solid rgba(200,150,88,0.5)" width="850px" height="478px"></canvas>
<table style="table-layout: fixed;width: 100%;">
<tr style="vertical-align: top;">
<td>
<h2>文字入力</h2>
<form name="js">
txt1:<input type="text" name="txt1" value=""><br>
txt2:<input type="text" name="txt2" value=""><br>
txt3:<input type="text" name="txt3" value=""><br>
<input type="button" value="作成" onclick="create()"><br>
<input type="button" value="クリア" onclick="canvas_clear()"><br>
</td>
<td>
<h2>背景画像</h2>
<table>
<tr>
<td>
<input type="radio" name="img" value="sample.jpg">
<img src="sample.jpg" width="100px" height="100px">
</td>
<td>
<input type="radio" name="img" value="sample1.jpg">
<img src="sample1.jpg" width="100px" height="100px">
</td>
<td>
<input type="radio" name="img" value="sample2.jpg">
<img src="sample2.jpg" width="100px" height="100px">
</td>
</tr>
<tr>
<td>
<input type="radio" name="img" value="sample3.jpg">
<img src="sample3.jpg" width="100px" height="100px">
</td>
<td>
<input type="radio" name="img" value="sample4.jpg">
<img src="sample4.jpg" width="100px" height="100px">
</td>
<td>
<input type="radio" name="img" value="sample5.jpg">
<img src="sample5.jpg" width="100px" height="100px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script>
function create(){
div();
draw();
}
function canvas_clear(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.clearRect(0,0,canvas.width,canvas.height);
}

function div(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var txt1 = document.js.txt1.value;
var txt2 = document.js.txt2.value;
var txt3 = document.js.txt3.value;
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='width: 850px;height: 478px;display: table-cell;text-align: center;vertical-align: middle;'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='display: table-cell;text-align: center;vertical-align: middle;width: 850px;background-color: rgba(255,200,150,0.75); height: 318px'><p style='margin: 0px;line-height: 1.25em;color: rgba(255,0,0,1.0);font-size: 70px;color: #f04848;text-shadow: 5px 5px 1px #FFFF00;word-wrap: break-word;width: 850px;font-weight: bold'>"
+ txt1 +"</p><p style='margin: 0px;line-height: 1.25em;color: rgba(255,0,0,1.0);font-size: 70px;color: #f04848;text-shadow: 5px 5px 1px #FFFF00;word-wrap: break-word;width: 850px;font-weight: bold;'>"
+ txt2 +"</p><p style='margin: 0px;line-height: 1.25em;color: rgba(255,0,0,1.0);font-size: 70px;color: #f04848;text-shadow: 5px 5px 1px #FFFF00;word-wrap: break-word;width: 850px;font-weight: bold;'>"
+ txt3 +"</p></div>" +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);

img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);

ctx.globalCompositeOperation = 'destination-atop';
}
img.src = url;
}
function draw() {
var canvas = document.getElementById('canvas');
if ( ! canvas || ! canvas.getContext ) { return false; }
var ctx = canvas.getContext('2d');
/* Imageオブジェクトを生成 */
var img = new Image();
img.src = document.js.img.value + '?' + new Date().getTime();//"sample.jpg?" + new Date().getTime();
/* 画像が読み込まれるのを待ってから処理を続行 */
img.onload = function() {
ctx.drawImage(img, 0, 0, 850, 478);
}
}
</script>
</body>
</html>

HTMLとJavaScriptを使って出来ています。ルートフォルダ等は適当に任意のものを置いて下さい。

今まで、スクショを加工してサムネイルを作っていたので、これなら簡単に作成できるようになりました!

まだまだ、Canvasの機能はたくさんあると思うで、少しづつ勉強したいと思います!!!
では!(>ω<)ノシ


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA



Hello!!

皆さんこんにちは!こんばんは!!ロト君です。

このサイトは私が興味を持ったモノやコトについて掲載をしていくサイトです。

主にパソコン関係やアニメ・ゲーム等について掲載すたいと思いますので、 どうぞ宜しくお願い致します!

コメント等はTwitter等を活用して頂けると有り難いです!!

Twitter: ロト君@lotokunn