내 웹 사이트에 org 계층을 그리는 캔버스가 있습니다.
HTML5 캔버스에서 텍스트 렌더링
그 사람의 이미지와 the name, email, department 등이 들어 있습니다. 셀렌을 사용하여 자동화 테스트를 실행 중이며 캔버스에서 텍스트 데이터를 가져올 수 있는지 확인하려고합니다.
캔버스에 텍스트로 데이터를 가져올 수있는 방법이 있습니까?
그 부분을 이미지로 잘라내면 그 이미지에서 텍스트를 줄 수있는 JS library이 있습니까?
누구든지이 문제에 대해 도움을 줄 수 있습니까?
귀하의 도움에 감사드립니다.
최고 감사합니다.
캔버스의 요소가 렌더링되면 벡터 이미지입니다. 이미지를 만드는 데 사용 된 요소에는 개체 인식이 없으므로 이미지에 사용한 텍스트를 저장하는 것은 없습니다.
그러나 이미지 위치와 특성을 프로그래밍 개체에 연결할 수있는 것과 같은 방법으로 텍스트 정보를 캔버스 이미지에 채워지는 동시에 업데이트되는 데이터 구조에 저장할 수 있습니다.
... 데이터베이스 정보 검색을 사용하여 이름, 이메일 및 부서 데이터로 캔버스를 채우는 경우 해당 정보를 캔버스 이미지에 그릴뿐만 아니라 데이터 구조에 저장할 수 있습니다.
그런 다음 해당 개체에 저장된 값을 검색하면 트릭을 수행하게됩니다.
캔버스에서 일어나는 일은 캔버스에 머물러 있습니다. 캔버스는 비트 맵이므로 그 위에 그려진 텍스트는 래스터 화 된 다음 잊어 버리게됩니다. 이 시점 이후에 텍스트를 추출하는 유일한 방법은 OCR을 사용하는 것입니다 (그리고 나를 믿으십시오. 실제 코드보다 수정 알고리즘을 작성하는 데 더 많은 시간을 할애 할 것입니다). 그러나 당신이 자폐증을 느낀다면 두 가지 옵션이 있습니다 : Ocrad, Tesseract.
그러나 내 권장 사항은 다음과 같습니다. 항상 출처로 이동하십시오! 원래 텍스트 소스 (처음부터 캔버스에 그리는 데 사용됨)에 액세스 할 수 있으면 대신 해당 텍스트 소스를 사용하십시오.