3

I'm using a plugin that returns a PNG encoded base64 string, I cannot change it, I must work with it, but what I really need is the tiff encoded value (base-64). Is there a way of doing this?

I tried to create a canvas, load the png base64 and then used toDataURL('image/tiff') but after some research, I'd found that tiff is not supported as output of toDataURL().

Any suggestions?

Improve this question
0

1 Answer 1

Reset to default
5

As TIFF is not generally supported as target file-format in the browser, you will have to manually encode the TIFF file by building up the file-structure using typed arrays and in accordance with the file specifications (see Photoshop notes here). It's doable:

  • Get the raw RGBA bitmap from canvas (remember that CORS matters)
  • Use typed arrays with DataView view to be able to write various data at unaligned positions
  • Build up file header, define minimum set of TAGS and encode the RGBA data in the way you need (uncompressed is simple to implement, or a simple RLE compression).
  • Construct the final file buffer. From here you have an ArrayBuffer you can transfer as bytes, optionally:
  • Convert to Blob with ArrayBuffer and tiff mime-type.
  • Convert to Data-URI using ArrayBuffer as basis

Update canvas-to-tiff can be used to save canvas as TIFF images (disclaimer: I'm the author).

To get an Data-URI using canvas-to-tiff you can simply do:

CanvasToTIFF.toDataURL(canvasElement, function(url) { // url now contains the data-uri. window.location = url; // download, does not work in IE; just to demo });

Although, I would recommend using toBlob(), or if you want to give the user a link, toObjectURL() (instead of toDataURL).

Demo using Data-URI

var c = document.querySelector("canvas"), ctx = c.getContext("2d"); // draw some graphics ctx.strokeStyle = "rgb(0, 135, 222)"; ctx.lineWidth = 30; ctx.arc(200, 200, 170, 0, 2*Math.PI); ctx.stroke(); // Covert to TIFF using Data-URI (slower, larger size) CanvasToTIFF.toDataURL(c, function(url) { var a = document.querySelector("a"); a.href = url; a.innerHTML = "Right-click this link, select Save As to save the TIFF"; })
<script src="https://cdn.rawgit.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js"> </script> <a href=""></a><br> <canvas width=400 height=400></canvas>

Demo using Object-URL

var c = document.querySelector("canvas"), ctx = c.getContext("2d"); // draw some graphics ctx.strokeStyle = "rgb(0, 135, 222)"; ctx.lineWidth = 30; ctx.arc(200, 200, 170, 0, 2*Math.PI); ctx.stroke(); // Covert to TIFF using Object-URL (faster, smaller size) CanvasToTIFF.toObjectURL(c, function(url) { var a = document.querySelector("a"); a.href = url; a.innerHTML = "Right-click this link, select Save As to save the TIFF"; })
<script src="https://cdn.rawgit.com/epistemex/canvas-to-tiff/master/canvastotiff.min.js"> </script> <a href=""></a><br> <canvas width=400 height=400></canvas>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hi. First of all thanks a lot! It seems that this is what I'm looking for. Second, I'm trying to use your library but I haven't been able. Would you please explain how can I get the base64 string after calling CanvasToTIFF.toDataURL? Isn't the image being used from the canvas? if so, what is the reason for the uri? Thanks again and apologize if my questions are silly, I just want to understand exactly how it works
@johansebasb if you want to save the canvas as a TIFF you need a format to distribute the resulting file int. Data-URIs are convenient as they can be transported as pure strings without risk of (char) encoding errors. I would recommend using toBlob though when possible as this is pure byte buffer which is faster and more size efficient. Pass the data-uri or blob-url as source to link etc. so user can download, or upload to server. See the incl. demo there for how to use those (it's also shown in the readme file - you need to use callbacks).
@johansebasb added demo on how to use it
@K3N this project is no longer available on github. Could you please upload it to somewhere else? thanks!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.