base64 문자열과 이미지 간의 변환 예

1. base64 문자열을 이미지로 변환하는 원리는 base64 문자열이 img 태그의 src 속성으로 사용될 때 유효한 경우 미리보기가 가능하다는 것입니다. 다운로드하려면 새 a 태그를 생성하고 a 태그의 href 속성을 base64 문자열로 설정하고 a 태그의 다운로드 속성을 파일 이름으로 설정한 다음 다음을 통해 a 태그의 클릭 이벤트를 수동으로 트리거하세요. Node.js를 사용하면 다운로드 동작이 완료됩니다. (브라우저에 따라 다운로드 디렉터리를 선택하거나 기본 디렉터리를 사용해야 할 수도 있습니다.)

2. 이미지를 base64 문자열로 변환

두 가지 유형이 있는데, 하나는 이미지의 src 태그를 제공하는 것이고 다른 하나는 이미지 파일을 업로드하는 것입니다.

3. 이미지의 src 태그 제공

은 캔버스 태그의 도움을 받아야 합니다.
장점은...사진을 확대할 수 있나요?

단점은 도메인을 넘을 수 없다는 것입니다(다른 도메인도 마찬가지입니다).

순서는 다음과 같습니다.
1. 사용자가 src를 제공합니다.
2. 새 img 태그를 만들고 src를 img 태그로 설정합니다. img 태그가 로드되면(onload 콜백 트리거) 다음 코드를 계속 실행합니다.
4. 이미지를 캔버스에 씁니다(이때 이미지 크기에 따라 캔버스 크기를 설정하거나 이미지를 캔버스 크기에 맞게 조정)
5. 캔버스 문자열의 toDataURL 메소드를 통해 base64를 가져옵니다.

4. 파일 업로드 양식
입력 태그는 type=file을 지원해야 합니다.
파일을 선택한 후 자동으로 변환이 되어 작업이 더 간편해지는 것이 장점입니다.
순서는 다음과 같습니다.
1. type=file의 입력 태그가 onchange 이벤트를 트리거하면 다음 지침을 실행합니다.
2. readAsDataURL API를 사용하여 파일 내용을 읽습니다.
4 .읽기가 성공하면(onload 콜백 함수가 트리거됨) 콜백 함수의 매개변수 e와 e.target.result 속성을 통해 base64 문자열을 얻을 수 있습니다.
5 base64 문자열은 필수입니다. .

5.DEMO 페이지:

이미지를 base64 문자열로 변환

base64 문자열을 이미지로 변환

관련 권장 사항:

이미지를 base64 문자열로 변환하는 PHP 코드

위 내용은 base64 문자열과 이미지 간의 변환 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!