Uploading image stored under "data:image/png;base64" in browser to IPFS

johnversus · December 26, 2022, 1:29pm

I converted data from HTML page by converting it to a canvas using “html2canvas” and also converted the canvas to url using “toDataURL” function which left me with a data url of the image.

And now i am trying to upload this “data:image/png;base64” which i got from “toDataURL” to IPFS. Is it possible?

I am actually trying to skip downloading the canvas as image and then reuploading to IPFS by directly uploading the canvas data to IPFS.

Image Url Sample

cryptokid · November 13, 2021, 10:35am

it should be possible to upload that data to IPFS or in other location, but I don’t know exactly how you are going to display it, as I think that you will have to download that data in order to display it.

johnversus · November 13, 2021, 11:06am

The data from “data:image/png;base64” can be viewed using img tag.
So I think I can skip uploading the image to IPFS and instead i can give the image url as “data:image/png;base64,…” while minting, but the url length will be crazy huge.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Image</h2>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAAAXNSR0IArs4c6QAAG3NJREFUeF7t2FGOHMkNRVFpG137X5rWMQYG/pANj8Wu7owgH4+/U53Bw0hc1/z8+Pj464f/ESBAgAABAqMFfgr66P05PAECBAgQ+FtA0F0EAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAAECBATdHSBAgAABAgECgh6wRCMQIECAAAFBdwcIECBAgECAgKAHLNEIBAgQIEBA0N0BAgQIECAQICDoAUs0AgECBAgQEHR3gAABAgQIBAgIesASjUCAAIFUgV+/fj0+2uv1evwdJ14g6CeUvYMAAQIE3hIQ9DqboNetPEmAAAEChwUEvQ4u6HUrTxIgQIDAYQFBr4MLet3KkwQIECBwWEDQ6+CCXrfyJAECBAgcFhD0Orig1608SYAAAQKHBQS9Di7odStPEiBAgMBhAUGvgwt63cqTBAgQIHBYQNDr4IJet/IkAQIECBwWEPQ6uKDXrTxJgAABAocFBL0OLuh1K08SIECAwGEBQa+DC3rdypMECBAgcFhA0Ovggl638iQBAgQIHBYQ9Dq4oNetPEmAAAEChwUEvQ4u6HUrTxIgQIDAYQFBr4MLet3KkwQIECBwWEDQ6+CCXrfyJAECBAgcFhD0Orig1608SYAAAQKHBQS9Di7odStPEiBAgMBhAUGvgwt63cqTBAgQIHBYQNDr4IJet/IkAQIECBwWEPQ6uKDXrTxJgAABAocFBL0OLuh1K08SIECAwGEBQa+DC3rdypMECBAgcFhA0Ovggl638iQBAgQI/CZwIrYp4K/X6/FRBP1xYi8gQIBApoCg1/cq6HUrTxIgQIDAYQFBr4MLet3KkwQIECBwWEDQ6+CCXrfyJAECBAgcFhD0Orig1608SYAAAQKHBQS9Di7odStPEiBAgMBhAUGvgwt63cqTBAgQIHBYQNDr4IJet/IkAQIECBwWEPQ6uKDXrTxJgAABAocFBL0OLuh1K08SIECAwGEBQa+DC3rdypMECBAgcFhA0Ovggl638iQBAgQIHBYQ9Dq4oNetPEmAAAEChwUEvQ4u6HUrTxIgQIDAYQFBr4MLet3KkwQIECBwWEDQ6+CCXrfyJAECBAgcFhD0Orig1608SYAAAQKHBQS9Di7odStPEiBAgMBhAUGvgwt63cqTBAgQIHBYQNDr4IJet/IkAQIECBwWEPQ6uKDXrTxJgAABAocFBL0OLuh1K08SIECAwGEBQa+DC3rdypMECBAgcFhA0Ovggl638iQBAgQIHBYQ9Dq4oNetPEmAAAEChwVOBP1ECFPm+Pnx8fHX4TvgdQQIECAQIJASwpQ5BD3gozICAQIEbgikhDBlDkG/8RV4JwECBAIEUkKYMoegB3xURiBAgMANgZQQpswh6De+Au8kQIBAgEBKCFPmEPSAj8oIBAgQuCGQEsKUOQT9xlfgnQQIEAgQSAlhyhyCHvBRGYEAAQI3BFJCmDKHoN/4CryTAAECAQIpIUyZQ9ADPiojECBA4IZASghT5hD0G1+BdxIgQCBAICWEKXMIesBHZQQCBAjcEEgJYcocgn7jK/BOAgQIBAikhDBlDkEP+KiMQIAAgRsCKSFMmUPQb3wF3kmAAIEAgZQQpswh6AEflREIECBwQyAlhClzCPqNr8A7CRAgECCQEsKUOQQ94KMyAgECBG4IpIQwZQ5Bv/EVeCcBAgQCBFJCmDKHoAd8VEYgQIDADYGUEKbMIeg3vgLvJECAQIBASghT5hD0gI/KCAQIELghkBLClDkE/cZX4J0ECBAIEEgJYcocgh7wURmBAAECNwRSQpgyh6Df+Aq8kwABAgECKSFMmUPQAz4qIxAgQOCGQEoIU+YQ9BtfgXcSIEAgQCAlhClzCHrAR2UEAgQI3BBICWHKHIJ+4yvwTgIECAQIpIQwZQ5BD/iojECAAIEbAikhTJlD0G98Bd5JgACBAIGUEKbMIegBH5URCBAgcEMgJYQpcwj6ja/AOwkQIBAgkBLClDkEPeCjMgIBAgRuCKSEMGUOQb/xFXgnAQIEAgRSQpgyh6AHfFRGIECAwA2BlBCmzCHoN74C7yRAgECAQEoIU+YQ9ICPyggECBC4IZASwpQ5BP3GV+CdBAgQCBBICWHKHIIe8FEZgQABAjcEUkKYMoeg3/gKvJMAAQIBAikhTJlD0AM+KiMQIEDghkBKCFPmEPQbX4F3EiBAIEAgJYQpcwh6wEdlBAIECNwQSAlhyhyCfuMr8E4CBAgECKSEMGUOQQ/4qIxAgACBGwIpIUyZQ9BvfAXeSYAAgQCBlBCmzCHoAR+VEQgQIHBDICWEKXMI+o2vwDsJECAQIJASwpQ5BD3gozICAQIEbgicCOGJuV6v14nXPP4OQX+c2AsIECCQKSDovfYq6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAg8JvAif/T8Hq9IswFPWKNhiBAgECmgKDX9yrodStPEiBAgMBhAUGvgwt63cqTBAgQIHBYQNDr4IJet/IkAQIECBwWEPQ6uKDXrTxJgAABAocFBL0OLuh1K08SIECAwGEBQa+DC3rdypMECBAgcFhA0Ovggl638iQBAgQIHBYQ9Dq4oNetPEmAAAEChwUEvQ4u6HUrTxIgQIDAYQFBr4MLet3KkwQIECBwWEDQ6+CCXrfyJAECBAgcFhD0Orig1608SYAAAQKHBQS9Di7odStPEiBAgMBhAUGvgwt63cqTBAgQIHBYQNDr4IJet/IkAQIECBwWEPQ6uKDXrTxJgAABAocFBL0OLuh1K08SIECAwGEBQa+DC3rdypMECBAgcFhA0Ovggl638iQBAgQIHBYQ9Dq4oNetPEmAAAEChwUEvQ4u6HUrTxIgQIDAYQFBr4MLet3KkwQIECBwWEDQ6+CCXrfyJAECBAgcFhD0Orig1608SYAAAQK/CYhtr+sg6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBAYIyDovVYl6L324TQECBD4FgGx/RbGUX9E0Eety2EJECBQExD0mlPSU4KetE2zECBA4N8Cgr7vKgj6vp2bmACBBQKCvmDJ/zWioO/buYkJEFggIOgLlizo+5ZsYgIE9gkI+r6d+4W+b+cmJkBggYCgL1iyX+j7lmxiAgT2CQj6vp37hb5v5yYmQGCBgKAvWLJf6PuWbGICBPYJCPq+nfuFvm/nJiZAYIGAoC9Ysl/o+5ZsYgIE9gkI+r6d+4W+b+cmJkBggYCgL1iyX+j7lmxiAgT2CQj6vp37hb5v5yYmQGCBgKAvWLJf6PuWbGICBPYJCPq+nfuFvm/nJiZAYIGAoC9Ysl/o+5ZsYgIE9gkI+r6d+4W+b+cmJkBggYCgL1iyX+j7lmxiAgT2CQj6vp37hb5v5yYmQGCBgKAvWLJf6PuWbGICBPYJCPq+nfuFvm/nJiZAYIGAoC9Ysl/o+5ZsYgIE9gkI+r6d+4W+b+cmJkBggYCgL1iyX+j7lmxiAgR6CYhtr32knMYv9JRNmoMAgTECgj5mVaMOKuij1uWwBAgkCAh6whb7zSDo/XbiRAQIhAsIeviCL40n6JfgvZYAgb0Cgr53909OLuhP6vrbBAgQ+B8Cgu5aPCEg6E+o+psECBD4PwKC7no8ISDoT6j6mwQIEBB0d+CwgKAf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" width="100" height="100">

</body>
</html>

cryptokid · November 13, 2021, 11:07am

you want to save that image data in a smart contract at mint time?

johnversus · November 13, 2021, 11:09am

Yes
Hoping it is possible

cryptokid · November 13, 2021, 11:11am

hoping you are using a chain with small gas fees

filos · September 16, 2022, 5:52pm

Hi bro, if you don’t mind me asking, can you please write me on Instagram? my name is @filos__ I’m working on that rn and I think I’m very near to the solution. Would be great if we can talk and figure it out together

alex · September 16, 2022, 9:01pm

You can share what you’re doing exactly and you can get a discussion going here as well.