브라우저에서 안전하게 Base64 이미지를 미리 보세요.

안정적인 이미지 미리보기에는 Base64 표현을 디코딩하고 결과 이미지 형식을 디코딩하는 두 가지 별도 작업이 있습니다. 파일이 잘리거나, 레이블이 잘못 지정되었거나, 브라우저에서 지원되지 않기 때문에 문자열이 첫 번째 단계를 통과하고 두 번째 단계에서 실패할 수 있습니다. 해당 상태를 별도로 표시합니다.

바이트 지향 파이프라인 유지

파서를 통해 인식된 데이터 URI 래퍼를 제거하고 Base64을 검증하고 Uint8Array을 얻습니다. 텍스트 디코더를 통해 이미지 바이트를 라우팅하지 마십시오. 간단한 로컬 미리보기를 원할 경우 바이트를 Blob으로 래핑하고 URL 개체를 만듭니다. 이는 단지 결과를 표시하기 위해 또 다른 큰 Base64 문자열을 조합하는 것을 방지합니다.

// bytes is a validated Uint8Array; type comes from checked raster metadata.
async function previewRaster(bytes, type, imageElement) {
  const allowed = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
  if (!allowed.includes(type)) throw new Error('Unsupported raster preview type');
  const url = URL.createObjectURL(new Blob([bytes], { type }));
  try {
    imageElement.src = url;
    await imageElement.decode();
    return { width: imageElement.naturalWidth, height: imageElement.naturalHeight,
      dispose: () => URL.revokeObjectURL(url) };
  } catch (error) {
    URL.revokeObjectURL(url);
    imageElement.removeAttribute('src');
    throw error;
  }
}

필요한 동안에만 URL 객체를 유지하세요.

미리보기를 바꾸거나 제거할 때 반환된 dispose 함수를 호출하세요. 정리하지 않고 미리보기를 반복하면 브라우저 리소스가 유지됩니다. 이미지가 로드되기 전에 URL을 취소하지 말고, 나중에 다운로드하기 위해 폐기된 URL을 재사용하지 마세요. 다운로드를 계속 사용할 수 있어야 하는 경우 수명을 별도로 관리하세요.

실제 이미지 디코더 피드백 사용

파일 서명은 초기 힌트일 뿐입니다. 이미지 요소의 디코드 단계에서는 브라우저가 실제로 이를 로드할 수 있는지 확인하고 해당 크기를 노출합니다. 여기서 오류는 검사 또는 다운로드를 위해 원본 바이트를 유지하는 동안 이미지 디코딩이 실패했음을 나타냅니다. 입력을 덮어쓰거나 Base64 알파벳이 유효하지 않다고 보고해서는 안 됩니다.

가능한 경우 비용이 많이 드는 렌더링 전에 바이트 및 크기 제한을 적용하십시오. 작은 압축 파일은 매우 큰 이미지를 설명할 수 있습니다. SVG을 일반 래스터 페이로드로 취급하지 마세요. 보안을 고려하여 구조화된 마크업입니다. 미리보기가 작동하도록 페이지에 알 수 없는 SVG 또는 HTML을 직접 삽입하지 마십시오.

마지막으로 미리보기와 변환을 구별하세요. 이미지 요소에 JPEG을 표시해도 PNG이 생성되지 않습니다. 변환하려면 디코딩된 이미지를 캔버스에 그리고 명시적인 품질 및 투명도 선택과 함께 선택한 형식을 내보내야 합니다. 데이터 URI 래퍼는 다음에 설명되어 있습니다. MDN: 데이터 URL; 미리보기 성공은 일반 안전 인증이 아닌 브라우저 형식 확인으로 유지됩니다.