Canvas Upload from Client

Transloadit
1

I create a lot of custom images with HTML5 canvas and would love to upload those images to Transloadit via the JS SDK or the RUBY SDK. I couldn’t find a similar topic so apologies if this has been covered before.

2

Ignore me, Transloadit XHR to the rescue. :raised_hands:

3

Glad you were able to figure it out Lee, if you think we can do a better job at providing boilerplate for this, maybe we can hack it into uppy.io for you? Would have to know a bit more about the use case to determine if this could be helpful for others too

1 Like
4

As it turns out, I’m running into a little issue I just dropped on the Intercom. I’m trying to do an XHR upload via a canvas.toBlob method on an iOS 11 device but I’m receiving “We could not parse the meta data for the file…” from Transloadit. Works fine from Desktop browsers. Do we think this is an issue of how iOS Safari handles the toBlob function?

It would seem as is no file is being sent via mobile but the size looks okay in console.

[Log] File {name: "commonground.jpg", lastModified: 1516719550084, size: 158763, type: "", slice: function}

Here’s what my function looks like

finalCanvas.toBlob(function(blob) {
  photo = new File([blob], "commonground.jpg");

  console.log(photo);
  
  transloadit.uploadFile(photo, [{ name: "email", value: $("input[name=email]").val()} ]);
}, "image/jpeg", 1.0);
5

Well dropping the new File() and just sending the blob straight to the uploadFile function seems to have done it. Any tips on naming that file? Not the end of the world…

6

I’m not entirely sure, but it does seem there is a bug in safari regarding toBlob(): https://bugs.webkit.org/show_bug.cgi?id=148878 - could it be you are hitting that? Would supplying a quality make a difference? Any chance it throws a js error and you can see it?

If the workaround works for you and you want to stick with it, and you just care about giving it a filename now, you could likely pass the filename along in a different form field, and use Assembly Variables for it to alter the export path. Also see: https://transloadit.com/docs/#assembly-variables

Please let me know if you have follow up questions, happy to figure this one out with you