<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像の上に文字を重ねる</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
<!--
.text-image{
position: relative;
width: 320px;
}
.text-image img{
width: 100%;
}
.text-image p{
position: absolute;
top: 70%;
left: 0%;
font-size: 30px;
color: #ffffff;
background-color:#000000;
}
-->
</style>
</head>
<body>
<div class="text-image">
<img src="pic/N24_33.JPG" alt="文字の代替">
<p>文字１</p>
</div>
<div class="text-image">
<img src="pic/N24_34.JPG" alt="文字の代替">
<p>文字２</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta charset="UTF-8">
<title>画像ファイル読込</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<input type="file" onChange="filer(this.files, 'canvas1')"><br>
<canvas id="canvas1"></canvas>
<script>
function filer(files, cvs) {
var canvas = document.getElementById(cvs); //canvasの定義
var ctx = canvas.getContext('2d');
var reader = new FileReader(); //ローカルファイルの処理
reader.onload = function(event) { //ローカルファイルを読込後処理
var img = new Image(); //画像ファイルの処理
img.onload = function() { //画像ファイル読込後の処理
canvas.width = img.naturalWidth; //naturalWidthは画像の元のサイズ
canvas.height = img.naturalHeight; //canvas.widthはcanvasのサイズ
ctx.drawImage(img, 0, 0); //画像をcanvasに表示
}
img.src = event.target.result; //画像を読み込む
}
reader.readAsDataURL(files[0]); //ローカルファイルを読み込む
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ドラッグ＆ドロップ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="text/javascript">
</script>
</head>
<body>
<div id="target" style="border: solid 5px #ccc; padding:2em; text-align:center;">
ここに画像ファイルをドロップします。
</div>
<canvas id="cvs"></canvas>
<script>
<!--
var target = document.getElementById('target'); //ドロップエリアの指定
target.addEventListener('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});
target.addEventListener('drop', function (e) {
e.stopPropagation();
e.preventDefault();
var canvas = document.getElementById("cvs"); //canvasの定義
var ctx = canvas.getContext('2d');
const reader = new FileReader();
reader.onload = function (e) {
var img = new Image();
img.onload = function() { //画像ファイル読込後の処理
canvas.width = img.naturalWidth; //naturalWidthは画像の元のサイズ
canvas.height = img.naturalHeight; //canvas.widthはcanvasのサイズ
ctx.drawImage(img, 0, 0); //画像をcanvasに表示
}
img.src = e.target.result; //画像を読み込む
}
reader.readAsDataURL(e.dataTransfer.files[0]);
});
-->
</script>
</body>
</html>