[ガイド] ブラウザで Base64 エンコードされた画像をプレビューする方法

const img = new Image();
img.src = 'data:image/png;base64,' + base64String;
document.body.appendChild(img);

// If the string already starts with 'data:image/...;base64,'
// — just assign it directly without prepending anything:
img.src = base64StringWithDataUriPrefix;

// Plain HTML — no JavaScript needed if the string is static
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="preview">

// Dynamic JavaScript — load from a variable, fetch, or input field
function renderBase64Image(base64, mimeType = 'image/png', containerId = 'preview') {
  const container = document.getElementById(containerId);
  const img = new Image();

  img.onload = () => {
    container.innerHTML = '';
    container.appendChild(img);
  };

  img.onerror = () => {
    container.textContent = 'Invalid image data';
  };

  // Tolerate both raw Base64 and full data: URIs
  img.src = base64.startsWith('data:')
    ? base64
    : `data:${mimeType};base64,${base64}`;
}

renderBase64Image(myBase64String, 'image/jpeg');

<input type="file" id="fileInput" accept="image/*">
<img id="preview" alt="">

<script>
document.getElementById('fileInput').addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const reader = new FileReader();

  reader.onload = (event) => {
    // event.target.result is a complete data URI
    // e.g. 'data:image/png;base64,iVBORw0KGgo...'
    document.getElementById('preview').src = event.target.result;
  };

  reader.onerror = () => {
    console.error('FileReader failed:', reader.error);
  };

  reader.readAsDataURL(file);
});
</script>

// 1. Draw on canvas
const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#00FF41';
ctx.fillRect(0, 0, 200, 200);
ctx.fillStyle = '#000';
ctx.font = '20px monospace';
ctx.fillText('Hello, Base64!', 20, 100);

// 2. Export to data URI
const pngDataURL = canvas.toDataURL('image/png');
// pngDataURL === 'data:image/png;base64,iVBORw0KGgo...'

// 3. Display directly
const img = new Image();
img.src = pngDataURL;
document.body.appendChild(img);

// JPEG with quality control (0–1)
const jpegDataURL = canvas.toDataURL('image/jpeg', 0.85);

// WebP if supported
const webpDataURL = canvas.toDataURL('image/webp', 0.9);

// Convert a Base64 string to a Blob, then to a blob: URL
function base64ToBlobURL(base64, mimeType = 'image/png') {
  // Strip the data: prefix if present
  const payload = base64.includes(',') ? base64.split(',')[1] : base64;

  // Decode Base64 to binary string
  const binary = atob(payload);

  // Convert binary string to Uint8Array
  const bytes = new Uint8Array(binary.length);
  for (let i = 0; i < binary.length; i++) {
    bytes[i] = binary.charCodeAt(i);
  }

  // Wrap in a Blob and create an object URL
  const blob = new Blob([bytes], { type: mimeType });
  return URL.createObjectURL(blob);
}

// Usage
const blobURL = base64ToBlobURL(myBase64, 'image/jpeg');
const img = new Image();
img.src = blobURL;
document.body.appendChild(img);

// IMPORTANT: free the memory when you're done with the image
img.onload = () => URL.revokeObjectURL(blobURL);

function detectImageFormat(base64) {
  // Look at the first ~12 characters of the Base64 string
  const head = base64.replace(/^data:[^,]+,/, '').slice(0, 16);

  if (head.startsWith('iVBORw0KGgo')) return 'image/png';
  if (head.startsWith('/9j/'))         return 'image/jpeg';
  if (head.startsWith('R0lGOD'))       return 'image/gif';
  if (head.startsWith('UklGR'))        return 'image/webp';
  if (head.startsWith('PHN2Zy') ||
      head.startsWith('PD94bWw'))      return 'image/svg+xml';
  if (head.startsWith('Qk'))           return 'image/bmp';
  if (head.startsWith('AAABAA'))       return 'image/x-icon';

  return 'application/octet-stream'; // unknown
}

// Build a correct data URI even when the user only gave us the payload
function toDataURI(base64) {
  if (base64.startsWith('data:')) return base64; // already complete
  const mime = detectImageFormat(base64);
  return `data:${mime};base64,${base64}`;
}

import { useMemo } from 'react';

function Base64Image({ base64, mimeType = 'image/png', alt }) {
  const src = useMemo(() => {
    if (!base64) return '';
    return base64.startsWith('data:')
      ? base64
      : `data:${mimeType};base64,${base64}`;
  }, [base64, mimeType]);

  if (!src) return <div>No image</div>;
  return <img src={src} alt={alt} loading="lazy" />;
}

// Usage
<Base64Image
  base64={apiResponse.avatar}
  mimeType="image/jpeg"
  alt="User avatar"
/>

// For large images, prefer blob URLs (Method 4) and useEffect for cleanup:
function LargeBase64Image({ base64 }) {
  const [blobURL, setBlobURL] = useState('');

  useEffect(() => {
    const url = base64ToBlobURL(base64, 'image/png');
    setBlobURL(url);
    return () => URL.revokeObjectURL(url); // cleanup on unmount
  }, [base64]);

  return blobURL ? <img src={blobURL} alt="" /> : null;
}

<script setup>
import { computed } from 'vue';

const props = defineProps({
  base64: String,
  mimeType: { type: String, default: 'image/png' },
  alt: { type: String, default: '' }
});

const src = computed(() => {
  if (!props.base64) return '';
  return props.base64.startsWith('data:')
    ? props.base64
    : `data:${props.mimeType};base64,${props.base64}`;
});
</script>

<template>
  <img v-if="src" :src="src" :alt="alt" loading="lazy" />
  <div v-else>No image</div>
</template>

<script>
  export let base64 = '';
  export let mimeType = 'image/png';
  export let alt = '';

  $: src = base64
    ? (base64.startsWith('data:') ? base64 : `data:${mimeType};base64,${base64}`)
    : '';
</script>

{#if src}
  <img {src} {alt} loading="lazy" />
{:else}
  <div>No image</div>
{/if}

// Quick validation snippet
function looksLikeValidBase64(str) {
  const cleaned = str.replace(/^data:[^,]+,/, '').replace(/\s+/g, '');
  if (cleaned.length === 0) return false;
  if (cleaned.length % 4 !== 0) return false;
  if (!/^[A-Za-z0-9+/]+={0,2}$/.test(cleaned)) return false;
  return true;
}