Skip to content

Instantly share code, notes, and snippets.

@xhackjp1

xhackjp1/version1-1.html

Last active January 18, 2021 12:25
Show Gist options
  • Save xhackjp1/e712d8cabc1fa65a2693a2f90329a11c to your computer and use it in GitHub Desktop.
Save xhackjp1/e712d8cabc1fa65a2693a2f90329a11c to your computer and use it in GitHub Desktop.
Download ZIP
画像加工サービスのコード
Raw
version1-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// canvas要素を取得
const canvas = document.getElementById("canvas");
// canvasを操作する機能を持った、オブジェクトを取り出す
const ctx = canvas.getContext("2d");
// Imageのインスタンス作成
const img = new Image();
img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";
const icon = new Image();
icon.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";
img.onload = () => {
ctx.drawImage(img, 0, 0);
icon.onload = () => {
// 画像の表示開始位置の x, y 座標と、表示サイズ width, hegiht
ctx.drawImage(icon, 50, 40, 40, 40);
ctx.drawImage(icon, 108, 60, 35, 35);
ctx.drawImage(icon, 165, 54, 32, 32);
};
};
</script>
</body>
</html>
Raw
version1-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// canvas要素を取得
const canvas = document.getElementById("canvas");
// canvasを操作する機能を持った、オブジェクトを取り出す
const ctx = canvas.getContext("2d");
// Imageのインスタンス作成
const img = new Image();
img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";
const icon = new Image();
icon.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";
img.onload = () => {
ctx.drawImage(img, 0, 0);
icon.onload = () => {
// 画像の表示開始位置の x, y 座標と、表示サイズ width, hegiht
ctx.drawImage(icon, 50, 40, 40, 40);
ctx.drawImage(icon, 108, 60, 35, 35);
ctx.drawImage(icon, 165, 54, 32, 32);
};
};
canvas.onclick = (event) => {
// console.log(event)
console.log({ x: event.clientX, y: event.clientY })
ctx.drawImage(icon, event.clientX, event.clientY, 32, 32);
}
// 1. クリックした場所に画像を配置したい
// 2. 配置する画像の種類を増やしたい
</script>
</body>
</html>
Raw
version1-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
// canvas要素を取得
const canvas = document.getElementById("canvas");
// canvasを操作する機能を持った、オブジェクトを取り出す
const ctx = canvas.getContext("2d");
// Imageのインスタンス作成
const img = new Image();
img.src = "https://i.pinimg.com/474x/7b/bb/72/7bbb72400b75a8d91de85d0c354dff80.jpg";
const icon1 = new Image();
icon1.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";
const icon2 = new Image();
icon2.src = "https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png";
const icon3 = new Image();
icon3.src = "https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png";
const icon4 = new Image();
icon4.src = "https://www.illust-ai.com/datas/00000463.png";
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
canvas.onclick = (event) => {
// canvasの右上と、ブラウザほ表示領域の差分を補正する
// さらに、左上が頂点になっているため、真ん中にしたい場合は、
// 表示する画像の 1/2幅 1/2高 の箇所に指定する為にさらに補正する
var rect = event.target.getBoundingClientRect();
mouseX = event.clientX - Math.floor(rect.left);
mouseY = event.clientY - Math.floor(rect.top);
const imageSize = 32
ctx.drawImage(icon4, mouseX - imageSize/2, mouseY - imageSize/2, imageSize, imageSize);
}
// 1. クリックした場所に画像を配置したい
// 2. 配置する画像の種類を増やしたい
</script>
</body>
</html>
Raw
version1-4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.iconList {
border: 1px;
border-style: solid;
}
img {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1300" height="800"></canvas>
<h3>アイコンを下記から選んでください</h3>
<div class="iconList">
<img onclick="changeIcon(1)" src="https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png">
<img onclick="changeIcon(2)" src="https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png">
<img onclick="changeIcon(3)" src="https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png">
<img onclick="changeIcon(4)" src="https://www.illust-ai.com/datas/00000463.png">
</div>
<script>
// canvas要素を取得
const canvas = document.getElementById("canvas");
// canvasを操作する機能を持った、オブジェクトを取り出す
const ctx = canvas.getContext("2d");
// Imageのインスタンス作成
const img = new Image();
img.src = "https://pbs.twimg.com/media/C0rviejUcAAJ-tC.jpg";
const icon1 = new Image();
icon1.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";
const icon2 = new Image();
icon2.src = "https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png";
const icon3 = new Image();
icon3.src = "https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png";
const icon4 = new Image();
icon4.src = "https://www.illust-ai.com/datas/00000463.png";
// 現在選択中のアイコン
let currentIcon = icon1;
function changeIcon(number){
if(number === 1){
currentIcon = icon1;
}
if(number === 2){
currentIcon = icon2;
}
if(number === 3){
currentIcon = icon3;
}
if(number === 4){
currentIcon = icon4;
}
}
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
canvas.onclick = (event) => {
// canvasの右上と、ブラウザほ表示領域の差分を補正する
// さらに、左上が頂点になっているため、真ん中にしたい場合は、
// 表示する画像の 1/2幅 1/2高 の箇所に指定する為にさらに補正する
var rect = event.target.getBoundingClientRect();
mouseX = event.clientX - Math.floor(rect.left);
mouseY = event.clientY - Math.floor(rect.top);
const imageSize = 80 // 画像サイズ
// 画像サイズの半分ずらすことで、クリック位置に画像の中心がくる
ctx.drawImage(currentIcon, mouseX - imageSize/2, mouseY - imageSize/2, imageSize, imageSize);
}
// 1. クリックした場所に画像を配置したい => clear!!
// 2. 配置する画像の種類を増やしたい
// 余談 中級者向け
// 3. 画像を配置した後に、少し調整したい時は・・・？
</script>
</body>
</html>
Raw
version1-5.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.iconList {
border: 1px;
border-style: solid;
}
img {
width: 80px;
height: 80px;
}
</style>
</head>
<body>
<canvas id="canvas" width="1300" height="800"></canvas>
<h3>アイコンを下記から選んでください</h3>
<button onclick="cancel()">取り消し</button>
<div class="iconList">
<img onclick="changeIcon(1)" src="https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png">
<img onclick="changeIcon(2)" src="https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png">
<img onclick="changeIcon(3)" src="https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png">
<img onclick="changeIcon(4)" src="https://www.illust-ai.com/datas/00000463.png">
</div>
<script>
// canvas要素を取得
const canvas = document.getElementById("canvas");
// canvasを操作する機能を持った、オブジェクトを取り出す
const ctx = canvas.getContext("2d");
// 履歴保存の変数
const workRecord = []
// Imageのインスタンス作成
const img = new Image();
img.src = "https://pbs.twimg.com/media/C0rviejUcAAJ-tC.jpg";
const icon1 = new Image();
icon1.src = "https://everydayicons.jp/wp/wp-content/themes/everydayicons/icons/thumbs/ei-child_face.png";
const icon2 = new Image();
icon2.src = "https://bsoza.com/wp/wp-content/uploads/images/icon/icon_animal_08_l.png";
const icon3 = new Image();
icon3.src = "https://nekoillust.com/wp-content/uploads/2018/03/3edb0a8530ee01b108eed4bc9ef2717c.png";
const icon4 = new Image();
icon4.src = "https://www.illust-ai.com/datas/00000463.png";
// 現在選択中のアイコン
let currentIcon = icon1;
function changeIcon(number){
if(number === 1){
currentIcon = icon1;
}
if(number === 2){
currentIcon = icon2;
}
if(number === 3){
currentIcon = icon3;
}
if(number === 4){
currentIcon = icon4;
}
}
img.onload = () => {
ctx.drawImage(img, 0, 0);
};
canvas.onclick = (event) => {
// canvasの右上と、ブラウザほ表示領域の差分を補正する
// さらに、左上が頂点になっているため、真ん中にしたい場合は、
// 表示する画像の 1/2幅 1/2高 の箇所に指定する為にさらに補正する
var rect = event.target.getBoundingClientRect();
mouseX = event.clientX - Math.floor(rect.left);
mouseY = event.clientY - Math.floor(rect.top);
const imageSize = 80 // 画像サイズ
// 画像サイズの半分ずらすことで、クリック位置に画像の中心がくる
ctx.drawImage(currentIcon, mouseX - imageSize/2, mouseY - imageSize/2, imageSize, imageSize);
// POINT1: 作業を記録しておく
workRecord.push({
currentIcon,
x: mouseX - imageSize/2,
y: mouseY - imageSize/2,
w: imageSize,
h: imageSize
})
}
function cancel(){
// 配列から、最後の作業を取り出す(削除する)
workRecord.pop()
ctx.drawImage(img, 0, 0);
// POINT2: 直線の作業までやり直しちゃう
for(let i=0;i<workRecord.length;i++){
let item = workRecord[i]
ctx.drawImage(item.currentIcon, item.x, item.y, item.w, item.h);
}
}
// 1. クリックした場所に画像を配置したい => clear!!
// 2. 配置する画像の種類を増やしたい
// 余談 中級者向け
// 3. 画像を配置した後に、少し調整したい時は・・・？
// 作業を記録しておく
// キャンセルした場合は、直前の作業をなかったことにしたい・・・
</script>
</body>
</html>
Raw
version2-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas" onclick="moveText(event)" width="400" height="400"></canvas>
<div>
<input id="messageText1" type="text" placeholder="文字1" value="小">
</div>
<div>
<input id="messageText2" type="text" placeholder="文字2" value="大">
</div>
<div>
<button onclick="drawImage()">実行</button>
</div>
<script>
const messageText1 = document.getElementById("messageText1")
const messageText2 = document.getElementById("messageText2")
// canvas要素を取得
const canvas = document.getElementById("canvas")
// canvasを操作する機能を持った、オブジェクトを取り出す
const ctx = canvas.getContext("2d")
const img1 = new Image()
// srcプロパティに画像の取得先のパスをセットする
function drawImage() {
ctx.clearRect(0,0,400,400)
let flg = false
// 文字を埋め込む
ctx.font = `20px sans-serif`
for(let i=0; i<12;i++){
for(let j=0; j<12;j++){
if (Math.random() * 100 > 99 && !flg) {
ctx.fillText(messageText1.value, 25 + 30 * i, 38 + 30 * j)
flg = true
} else {
ctx.fillText(messageText2.value, 25 + 30 * i, 38 + 30 * j)
}
}
}
}
drawImage()
</script>
</body>
</html>
@xhackjp1
Copy link
Author 

      canvas.onclick = (event) => {
        var rect = event.target.getBoundingClientRect();
        mouseX = event.clientX - Math.floor(rect.left);
        mouseY = event.clientY - Math.floor(rect.top);
        ctx.drawImage(icon, mouseX - 16, mouseY - 16, 32, 32);
      }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment