現在の言語: 日本語

戻る

画像データ退避
画像表示処理

共通画像を保存しておき使用するサンプルです。
同じ画像を使い回す場合、何度もコールするのは手間がかかるため
一度保存しておき、それを再利用するためのサンプルとなります。

[サンプル]

copy
let csv=[];
let no=1;
const display = document.getElementById('display');
display.addEventListener('click', (e) => 
{
console.log("display.addEventListener");
	const no = document.getElementById("no").value;
console.log("no:"+no);
	const img = document.getElementById("p" + no);
	if (!img)
	{
console.log("if (!img)");
		return;
	}
	document.getElementById("chooseImage").src = img.src;
});
const btn = document.getElementById('btn');
btn.addEventListener('click', (e) => 
{
	prepareImageArray();
	let csvNo = 0;
	for(i=0; i < csv.length; i++)
	{
		csvNo = csv[i];
		//存在チェック
		if (existsImageData(csvNo) > 0)
		{
console.log("no:" + csvNo + " continue");
			continue;
		}
		getImage(csvNo);
	}
});
//テストデータとして使用する配列データを準備する
function prepareImageArray()
{
	csv = []
	switch(no)
	{
		case 1:
			csv.push(1);
			csv.push(3);
			csv.push(20);
			break;
		case 2:
			csv.push(2);
			break;
		case 3:
			csv.push(1);
			csv.push(5);
			csv.push(20);
			break;
		default:
			csv.push(10);
			break;
	}
	if(no > 3)
	{
		return;
	}
	no++;
}
async function getImage(no)
{
console.log("getImage no:"+no);
	//アイコン
	fetch("http://localhost/test41.php", {
		method: 'POST',
		headers: { 'Content-Type': 'application/json' },
		body: JSON.stringify({
			no: no,
		}),
	})
	.then(res => res.blob())
	.then(blob => {
		const url = URL.createObjectURL(blob);
		console.log("no:"+no+" 画像URL:", url);
		const img = document.getElementById("p" + no);
		img.src = url;
	})
	.catch(err => console.error("画像取得失敗:", err));

}
//存在チェック
function existsImageData(no)
{
	const img = document.getElementById("p" + no);

	if (!img)//noが存在しない場合は終了します
	{
console.log("noが存在しない場合は終了します");
		return 2;
	}
	//すでに画像が入っているか（srcがセットされているか）チェックします
	//img.getAttribute('src') が null または 空なら、まだ保存されていない
	if (img.getAttribute('src'))
	{
console.log("すでに画像が入っているか（srcがセットされているか）");
		return 1;
	}
	return 0;
}
copy
let csv=[];
let no=1;
const display = document.getElementById('display');
display.addEventListener('click', (e) =>
{
console.log("display.addEventListener"); 
	const no = document.getElementById("no").value;
console.log("no:"+no); 
	const img = document.getElementById("p" + no); 
	if (!img) 
	{
		console.log("if (!img)"); 
		return; 
	} 
	document.getElementById("chooseImage").src = img.src;
});
const btn = document.getElementById('btn');
btn.addEventListener('click', (e) =>
{ 
	prepareImageArray(); 
	let csvNo = 0; 
	for(i=0; i < csv.length; i++)
	{
		csvNo = csv[i];
		//Check existence
		if (existsImageData(csvNo) > 0)
		{
			console.log("no:" + csvNo + " continue");
			continue;
		}
		getImage(csvNo);
	}
});
//Prepare array data to use as test data
function prepareImageArray()
{
	csv = []
	switch(no)
	{
		case 1:
			csv.push(1);
			csv.push(3);
			csv.push(20);
			break;
		case 2:
			csv.push(2);
			break;
		case 3:
			csv.push(1);
			csv.push(5);
			csv.push(20);
			break;
		default:
			csv.push(10);
			break;
	}
	if(no > 3)
	{
		return;
	}
	no++;
}
async function getImage(no)
{
console.log("getImage no:"+no);
	//Icon
	fetch("http://localhost/test41.php", {
		method: 'POST',
		headers: { 'Content-Type': 'application/json' },
		body: JSON.stringify({
		no: no,
		}),
	})
	.then(res => res.blob())
	.then(blob => {
		const url = URL.createObjectURL(blob);
		console.log("no:"+no+" Image URL:", url);
		const img = document.getElementById("p" + no);
		img.src = url;
	})
	.catch(err => console.error("Image retrieval failed:", err));
	
}
//Check existence
function existsImageData(no)
{
	const img = document.getElementById("p" + no);
	
	if (!img) //Exit if no does not exist
	{
		console.log("Exit if no does not exist");
		return 2;
	}
	//Check if an image is already included (src is set)
	//If img.getAttribute('src') is null or empty, it has not yet been saved
	if (img.getAttribute('src'))
	{
		console.log("Is an image already included (src is set)?");
		return 1;
	}
	return 0;
}

//テストデータとして使用する配列データを準備する
function prepareImageArray()
画像をimgタグに追加するための画像管理番号を配列に追加します。
let csv = [];とすると新しい配列を再作成するので
csv =[];
とすることで新規配列領域を作成します。

//存在チェック
function existsImageData(no)
下記チェックをして問題があれば処理を抜けます。

if (!img)
タグが存在しない場合は処理を終了させています。

if (img.getAttribute('src'))
画像が指定のタグに存在している場合の判定処理です。
既に画像がsrcプロパティに存在しているのであれば、再度画像を格納する必要がないため
処理を抜けます。

async function getImage(no)
画像を取得して問題がなければ該当するimgタグに保存します。

fetch("http://localhost/test41.php", {
使用するphpパスにフェッチします。

body: JSON.stringify({
no: no,
}),
画像管理番号を渡す準備します。

const url = URL.createObjectURL(blob);
画像urlオブジェクトを取得します。
img.src = url;
指定のsrcプロパティに取得したオブジェクトを設定します。




戻る

著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームページおよびアプリ等を利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。