{"id":20,"date":"2012-05-04T23:42:18","date_gmt":"2012-05-04T23:42:18","guid":{"rendered":"http:\/\/beta.robertprice.co.uk\/robblog\/2012\/05\/draw_something_solver_first_ocr_attempt-shtml\/"},"modified":"2012-05-04T23:42:18","modified_gmt":"2012-05-04T23:42:18","slug":"draw_something_solver_first_ocr_attempt-shtml","status":"publish","type":"post","link":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/","title":{"rendered":"Draw Something Solver &#8211; First OCR Attempt"},"content":{"rendered":"<p>\nAs part of my Draw Something Solver, I have worked out how to load and extract images from an HTML 5 canvas, now I need to work out what letters the images represent.\n<\/p>\n<p>\nI am hoping that as the images of the letters are all computer generated I can simply compare them and create a lookup table.\n<\/p>\n<p>\nI initially tried a basic serialisation by running <code>join()<\/code> over the ImageData as it was type of array, but this didn&#8217;t work as it wasn&#8217;t an array as such.\n<\/p>\n<p>\nCanvases offer a <code>toDataURL()<\/code> method, that saves the canvas out as a base64 encoded png or jpeg image. Base64 is a text based encoding, so could be suitable. When I tried this, I found the string to be very long, and not very pratical to use.\n<\/p>\n<p>\nSo I have a long unique string I need to perform a lookup and match against, this is crying out for a hashing function to turn it into something more manageable.\n<\/p>\n<p>\nJavaScript doesn&#8217;t have a native hashing function like some languages. I found a good <a href=\"http:\/\/www.webtoolkit.info\/javascript-sha1.html\">JavaScript SHA1<\/a> script so used this to get the encoded images down to a more manageable 40 characters.\n<\/p>\n<p>\nRunning the resulting code over several images has produced some disappointing results. Not all letters appear to consistantly encode to the same SHA1 hash, which means there is some tiny difference in the images of the letters sometimes, even though visually they look the same to the human eye.\n<\/p>\n<p>\nI now need to look at another approach for letter detection. There are two I can think of, the first is to convert the image into one less complex, a simple black and white image that should hopefully be more likely to match. The second is to investigate full OCR technology.\n<\/p>\n<p>\nI have looked at <a href=\"https:\/\/www.robertprice.co.uk\/robblog\/archive\/2005\/3\/Grayscaling_Images_With_Perl.shtml\">Grayscaling Image With Perl<\/a> in the past, so I hope I can reuse that knowledge again with this project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>As part of my Draw Something Solver, I have worked out how to load and extract images from an HTML 5 canvas, now I need to work out what letters the images represent. I am hoping that as the images of the letters are all computer generated I can simply compare them and create a &hellip; <a href=\"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Draw Something Solver &#8211; First OCR Attempt&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[2],"tags":[24,31],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-dev","tag-html5","tag-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Draw Something Solver - First OCR Attempt - Robert Price<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Draw Something Solver - First OCR Attempt - Robert Price\" \/>\n<meta property=\"og:description\" content=\"As part of my Draw Something Solver, I have worked out how to load and extract images from an HTML 5 canvas, now I need to work out what letters the images represent. I am hoping that as the images of the letters are all computer generated I can simply compare them and create a &hellip; Continue reading &quot;Draw Something Solver &#8211; First OCR Attempt&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/\" \/>\n<meta property=\"og:site_name\" content=\"Robert Price\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-04T23:42:18+00:00\" \/>\n<meta name=\"author\" content=\"rob\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rob\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/\"},\"author\":{\"name\":\"rob\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"headline\":\"Draw Something Solver &#8211; First OCR Attempt\",\"datePublished\":\"2012-05-04T23:42:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/\"},\"wordCount\":324,\"keywords\":[\"HTML5\",\"JavaScript\"],\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/\",\"name\":\"Draw Something Solver - First OCR Attempt - Robert Price\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\"},\"datePublished\":\"2012-05-04T23:42:18+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/draw_something_solver_first_ocr_attempt-shtml\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Draw Something Solver &#8211; First OCR Attempt\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#website\",\"url\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/\",\"name\":\"Robert Price\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.robertprice.co.uk\\\/robblog\\\/#\\\/schema\\\/person\\\/fac6d5b076e0e14e1fb13e15b542a6c5\",\"name\":\"rob\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g\",\"caption\":\"rob\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Draw Something Solver - First OCR Attempt - Robert Price","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/","og_locale":"en_GB","og_type":"article","og_title":"Draw Something Solver - First OCR Attempt - Robert Price","og_description":"As part of my Draw Something Solver, I have worked out how to load and extract images from an HTML 5 canvas, now I need to work out what letters the images represent. I am hoping that as the images of the letters are all computer generated I can simply compare them and create a &hellip; Continue reading \"Draw Something Solver &#8211; First OCR Attempt\"","og_url":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/","og_site_name":"Robert Price","article_published_time":"2012-05-04T23:42:18+00:00","author":"rob","twitter_card":"summary_large_image","twitter_misc":{"Written by":"rob","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/#article","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/"},"author":{"name":"rob","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"headline":"Draw Something Solver &#8211; First OCR Attempt","datePublished":"2012-05-04T23:42:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/"},"wordCount":324,"keywords":["HTML5","JavaScript"],"articleSection":["Dev"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/","url":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/","name":"Draw Something Solver - First OCR Attempt - Robert Price","isPartOf":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website"},"datePublished":"2012-05-04T23:42:18+00:00","author":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5"},"breadcrumb":{"@id":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.robertprice.co.uk\/robblog\/draw_something_solver_first_ocr_attempt-shtml\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.robertprice.co.uk\/robblog\/"},{"@type":"ListItem","position":2,"name":"Draw Something Solver &#8211; First OCR Attempt"}]},{"@type":"WebSite","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#website","url":"https:\/\/www.robertprice.co.uk\/robblog\/","name":"Robert Price","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.robertprice.co.uk\/robblog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.robertprice.co.uk\/robblog\/#\/schema\/person\/fac6d5b076e0e14e1fb13e15b542a6c5","name":"rob","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6f0eb511179100a4e968abc70403e33686e6ab3e992e392bedd2ccac01da666c?s=96&d=mm&r=g","caption":"rob"}}]}},"_links":{"self":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":0,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.robertprice.co.uk\/robblog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}