Single image in displayHTML


#1

Is there any reason why one couldn’t put a single image tag into displayHTML that simply shows the whole certificate?

So, say you were issuing a blockcert for a bachelor’s degree, could you generate an image that exactly matched the paper copy of the degree, and put the base64 version of that image into an tag?

That way the digital version (the blockcert) would look exactly like the paper version, and you’d hopefully insulate the blockcert from differences across browsers or changing HTML specs, which might be a problem if you had more elaborate HTML in displayHTML.


#2

LearningMachine is doing exactly what you say as their Bitocoin mainnet example present in the test fixtures inside the cert-verifier-js repo shows:

https://raw.githubusercontent.com/blockchain-certificates/cert-verifier-js/master/test/fixtures/mainnet-valid-2.0.json


#3

Thanks David,

That’s a good example of how to embed images in the HTML, but the HTML you pointed me at actually has several sections, with three images and formatted text:

<section class="image" style="margin-top:12px">
	<section style="width:100%;display:inline-block;">
		<img src="data:image/png;base64,iVBO" style="max-width:100%;height:auto;width:inherit;display:block;float: left;width:6em" />
	</section>
</section>
<section class="text" style="margin-top:24px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-weight:bold;font-size:2.5em;text-align:left;text-transform:none;color:#4e5f6b;margin:0 auto;width:100%">
		Brandon Sanders, PhD.
	</span>
</section>
<section class="text" style="margin-top:12px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-weight:normal;font-size:1em;text-align:left;text-transform:none;color:#4e5f6b;float: left;width:100%">
		CERTIFIED SECURITY EXPERT &amp; SYSTEM DESIGNER
	</span>
</section>
<section class="image" style="margin-top:12px">
	<section style="width:100%;display:inline-block;">
		<img src="data:image/png;base64,iVBO" style="max-width:100%;height:auto;width:inherit;display:block;float: left;width:11em" />
</section>
</section>
<section class="text" style="margin-top:0px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-weight:normal;font-size:1.25em;text-align:left;text-transform:none;color:#4e5f6b;margin:0 auto;width:100%">
		Software developer with 15 years of experience. Broad foundation in algorithms, mathematics, distributed systems, and scalability. Certification renewed by Federation of CompSci based in Washington D.C on December 2017.
	</span>
</section>
<section class="image" style="margin-top:24px">
	<section style="width:100%;display:inline-block;">
		<img src="data:image/png;base64,iVB..." style="max-width:100%;height:auto;width:inherit;display:block;margin:0 auto;width:100%" />
	</section>
</section>
<section class="text" style="margin-top:24px;width:100%;display:inline-block;">
	<span style="display:block;font-family:Helvetica, sans-serif;font-style:italic;font-size:1.25em;text-align:center;text-transform:none;color:#4e5f6b;margin:0 auto;width:100%">
		This sample certificate is for educational purposes only.
	</span>
</section>

I wanted to instead use something more like:

<section class="image" style="margin-top:10px">
    	<section style="width:100%;display:inline-block;">
    		<img src="data:image/png;base64,iVB..." style="max-width:100%;height:auto;width:inherit;display:block;margin:0 auto;width:100%" />
    	</section>
</section>

and nothing more. Just a single image that is an exact copy of the corresponding paper certificate. The image would in fact be derived from the PDF used to print the certificate.

I was more asking if anyone could see any reason not to do this, or had experience doing such a thing.

Nonetheless, I do appreciate your reply.

James