Single image in displayHTML

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.

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

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

1 Like

Hi James,

We’ll probably deal with this in the next month, so I’ll provide you feedback about it after that!

:smile:

Great - thank you David. James

I do not know but whenever I add my base64 image in the CSV displayHTML tag then the source display unknown in the sign certificate viewer.

when I have check the test.json first with the added base64 image then works well when decoded.

after created the unsigned certificate and again take image base64 portion from json and decode it in the same tool but not worked because of \n so when I have removed the \n from base64 then the logo display but only half logo displayed