JavaScript를 사용하여 캔버스 이미지의 해상도(DPI) 수정

적용 시나리오:

창고는 각 배송에 대해 라벨을 인쇄해야 합니다. Canvas는 데이터베이스에서 읽은 제품 정보를 기반으로 라벨 JPG를 생성할 수 있지만 이 JPG 이미지의 기본 해상도(DPI)는 72입니다.

이 DPI가 너무 낮아서 인쇄된 이미지가 흐릿하게 나옵니다.

DPI를 수정하는 일반적인 방법은 이미지를 서버에 업로드한 후 C#을 사용하여 DPI를 수정한 다음, 서버에 다운로드

그런데 클라이언트에서 이미지가 생성된 것 같아 매우 답답합니다. 단지 작은 표시(DPI 정보는 JPEG 형식의 헤더 META일 뿐입니다)만 수정해야 합니다. 대용량 이미지를 서버에 업로드했습니다.

나중에 다음 방법을 사용했습니다

JavaScript를 사용하여 DPI를 직접 수정했습니다.

소스 코드 여기에 게시된 것은 아니며 솔루션 아이디어만 제공됩니다. 필요하기를 바랍니다. 친구들이 직접 시도해 보세요

이제 DPI는 JPEG 형식의 헤더 정보일 뿐이라는 것을 알았습니다. 아주 작은 부분이고 base64는 스트림 인코딩이고 canvas.toDataURL() 이상은 base64 문자열에서 이 DPI 정보의 위치도 고정해야 합니다

이미지 처리를 사용합니다 프로그램(저는 Fireworks를 사용합니다)을 사용하여 동일한 콘텐츠로 두 개의 JPG 이미지를 생성하고 DPI만 수정합니다. 그림 A의 DPI는 72이고 그림 B의 DPI는 300

확인을 위해 UE를 사용하여 비교합니다. 실제로 헤더의 몇 바이트만 다릅니다

C#을 사용하여 A/B 이미지를 읽고 각각 BASE64로 인코딩한 다음 A.txt 및 B.txt를 생성합니다

UE 또는 다른 텍스트 편집기를 사용하여 두 텍스트 파일을 비교하고 다른 부분을 찾으십시오. 머리 근처의 문자가 10개 미만인 것을 알 수 있습니다.

다른 그림을 사용하여 위의 실험을 반복하십시오. , 고정 문자는 결국 항상 다르며 DPI가 동일한 한 고정 문자는 해당 위치의 문자도 동일합니다

에서 canvas.toDataURL을 사용하십시오. 브라우저를 사용하여 jpg 이미지의 base64 문자를 생성한 다음 테스트 중에 고정 위치의 문자를 DPI가 300인 특성 문자로 수정합니다.

자, 이제 DPI가 있는 JPG 이미지를 얻었습니다. of 300.

관심 있는 친구들은 BASE64 인코딩을 연구한 다음 다양한 DPI에 해당하는 특성 문자를 계산하는 함수를 만들 수 있습니다.

바이너리 상태의 경우 계산기로 클릭하면 직접 저장된 DPI 값임을 알 수 있습니다.

더보기:

에서 회사의 프로젝트에서는 운영자가 매번 고정된 폴더에 서로 다른 배치의 이미지를 저장하는 데 익숙하며, 캔버스에서 생성된 이미지는 별도로 저장됩니다. 기본 파일 이름은 항상 canvas.jpg

입니다. 저장 시 기본 파일 이름으로 익숙한 배치 번호.jpg를 사용하면 훨씬 좋을 것입니다

여기에는 두 가지 옵션이 있습니다.

Google로 이동하여 downloadify라는 Flash 구성 요소를 찾으세요. "다운로드" 버튼을 클릭하면 저장 위치를 ​​선택하는 팝업이 표시되고 기본 파일 이름을 지정할 수 있습니다. js

를 사용하고 HTML5 다운로드 속성을 사용하여 A 태그에 추가합니다. 이 솔루션은 더 간단하지만 Firefox/Chrome에서는 이를 기본 다운로드 위치에 직접 저장하고 사용자가 선택하고 마우스 오른쪽 버튼을 클릭할 수 없게 합니다. 다른 이름으로 저장하면 기본 파일 이름의 기능이 상실됩니다

두 옵션 모두 운영자의 사용 습관에 따라 장단점이 있습니다