2021・06・03
*入力した文字が画像になり、ダウンロードできます!*
文字色とふちどりの色を選択し、文字を入力して「画像化する」ボタンを押すと、入力した文字が画像かされます。
さらに、その後「画像をダウンロード」をクリックすることで、画像を保存できます。
保存した画像は、LINEなどでちょっとしたスタンプ代わりにも使えますよ☆
主な使用機能:HTML(canvas)・JavaScript
文字色を選択
ふちどりの色を選択
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)
HTML・CSS・JavaScript
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.sampletextareabox {
font-family: "游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
width: 90%;
margin: 2rem auto;
text-align: center;
}
.samplecolorbox {
font-size: .8rem;
text-align: left;
display: grid;
grid-template-columns: repeat(4,max-content);
gap: 10px;
justify-content: center;
align-items: center;
}
.samplecolorbox input {
justify-self:end;
}
.sampletextareabox textarea {
display: block;
padding: 30px;
margin: 2rem auto;
border-radius: 10px;
box-shadow: 2px 2px 2px grey;
background-image: linear-gradient(rgba(166, 201, 238, 0.52),white 30%,white 70%,rgba(166, 201, 238, 0.52));
}
.mojiimgbox {
display: flex;
flex-direction: column;
width: fit-content;
margin: 0 auto;
}
#samplecanvas {
background-color: rgba(230, 242, 255, 0.52);
margin-bottom: 10px;
box-shadow: 0px 0px 2px;
}
@media screen and (max-width:400px){
.samplecolorbox {
transform-origin: bottom;
transform: scale(.78);
}
}
</style>
</head>
<body>
<div class="" style="height:60px;">
</div>
<div class="sampletextareabox">
<div class="samplecolorbox">
<input id="samplecolor1" type="color" name="" value="#fa8282"><p>文字色を選択</p>
<input id="samplecolor2" type="color" name="" value="#12503e"><p>ふちどりの色を選択</p>
</div>
<textarea id="sampletextbox" name="name" rows="1" cols="15"></textarea>
<button class="samplemojicheck" type="button" name="button">文字を画像化する</button>
<button class="samplemojierase" type="button" name="button">画像を消去する</button>
</div>
<div class="mojiimgbox">
<canvas id="samplecanvas" width="290" height="60"></canvas>
<button id="btnDownload" type="button" name="button">画像をダウンロード</button>
</div>
<script defer>
{
const textarea = document.getElementById('sampletextbox');
const mojicheckEmp = document.querySelector('.samplemojicheck');
const mojicheckErase = document.querySelector('.samplemojierase');
const mojicolor1 = document.getElementById('samplecolor1');
const mojicolor2 = document.getElementById('samplecolor2');
const btnDownload = document.getElementById('btnDownload');
//カラーの選択がない場合のアラート
mojicheckEmp.addEventListener('click', colorAlert);
function colorAlert() {
alert('文字色とふちどりの色を選択して下さい。');
}
//画像がセットされていない場合のアラート
btnDownload.addEventListener('click', gazouAlert);
function gazouAlert() {
btnDownload.removeEventListener('click',gazouDownload);
alert('画像がありません');
}
mojicolor1.addEventListener('change',() => {
let mojiColor = event.target.value;
mojicolor2.addEventListener('change',() => {
let mojifuchiColor = event.target.value;
mojicheckEmp.removeEventListener('click', colorAlert);
mojicheckEmp.id = 'samplemojicheck';
const mojicheck = document.getElementById('samplemojicheck');
mojicheck.addEventListener('click',function () {
if (textarea.value == 0) {
alert('文字を入力して下さい');
}
else {
//画像アラートを解除
btnDownload.removeEventListener('click', gazouAlert);
btnDownload.addEventListener('click', gazouDownload);
const textcounter = textarea.value;
const samplecanvas = document.getElementById('samplecanvas');
const context = samplecanvas.getContext('2d');
context.fillStyle = mojiColor;
context.lineWidth = 5;
context.strokeStyle = mojifuchiColor;
context.font = 'bold 38px sans-serif';
context.textBaseline = 'top';
let mojiNum = textcounter;
context.beginPath();
context.strokeText(mojiNum,10,10);
context.fillText(mojiNum,10,10);
}
});
});
});
mojicheckErase.addEventListener('click', () =>{
const contextErase = samplecanvas.getContext('2d');
contextErase.clearRect(0,0,290,60);
});
//ダウンロード処理
btnDownload.addEventListener('click', gazouDownload);
function gazouDownload() {
const canvas2 = document.getElementById('samplecanvas');
const mimeType = 'image/png';
const fileName = 'download.png';
const base64 = canvas2.toDataURL(mimeType);
const bin = atob(base64.replace(/^.*,/, ''));
const buffer = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
const blob = new Blob([buffer.buffer], {
type: mimeType
});
if (window.navigator.msSaveBlob) {
// for IE
window.navigator.msSaveBlob(blob, fileName);
} else if (window.URL && window.URL.createObjectURL) {
// for Firefox, Chrome, Safari
const a = document.createElement('a');
a.download = fileName;
a.href = window.URL.createObjectURL(blob);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} else {
// for Other
window.open(base64, '_blank');
}
}
}
</script>
</body>
</html>