1

Backstory to the below issue:

I'm using the jQuery plugin Cropit to produce an image which I get in data URL form (the user uploads an image and Cropit allows them to manipulate it, when the user is happy, Cropit exports the final image).

This data URL is attached to the product (this is a Shopify website) via Shopify properties (in a similar way you would attach text for an engraved product) and then when the order is created, I have an app listening for new orders and I pull the data URL from the order.

From testing, I can confirm that the data URL is wrong / corrupted / broken at the time the order is placed and not being broken in transit.

Original Question

I have a bit of a weird situation and I can't find any similar situations online.

I'm being sent an image in data URL format (from Shopify if it's relevant, I have written a private app and their webhook is sending me an image)

The image is in a data URL format that starts with, as an example, 

data:image/png;base64,iVBORw0KGgoAAAANSU.....

The problem I am having is sometimes (and it's maybe less than 10% of the time) when I get the image and try to print it, it's missing the bottom chunk of the image. In a PDF, it considers the image corrupt, and in a web browser, it just sees the bottom of the image as transparent, however much is missing.

This is what it looks like in Inspect Element on Google Chrome when you hover over the image URL (image has been purpled out for anonymity)

enter image description here

My question is, does anyone know why?

We can't find a correlation with browser or device type. And I'm not sure if it's because part of the data URL is somehow missing (maybe a character limit, because it's a really long string!) or if it's the type of image. Might possibly be something going wrong in the upload process?

Is anyone able to shed any light? It's such a weird issue I'm not even sure what to google!

And just to confirm, the image absolutely has to be sent in this format for a whole series of reasons, mainly Shopify restrictions so I can't send the image in file format.

Pippa Rose Smith
  • 1,377
  • 5
  • 18
  • 42
  • What do you see in the browser network tab when this happens - do you get a 200 response code? – halfer Apr 01 '19 at 19:20
  • Yes there's no error message or anything and the image is technically showing, so the response code is 200. It's just got the transparent squares at the bottom of the image. – Pippa Rose Smith Apr 02 '19 at 09:34
  • Hmm, OK. Also, `data:` seems to be an odd construction - can this be made unescaped, like so: `data:`? – halfer Apr 02 '19 at 12:33
  • I wonder whether the browser is making it transparent because the last bit is corrupting for some reason. Maybe write a test script that pulls the image a hundred times to see if any of them are corrupted? – halfer Apr 02 '19 at 12:35
  • @halfer yes sorry it is data: - didn't notice it had been changed I think as I was copying and pasting across stuff. I did think it might be corruption like a dodgy internet connection or just something going wrong in the transfer but it's happening quite a lot. I don't know how likely it is for corruption to happen with data urls? – Pippa Rose Smith Apr 03 '19 at 10:26
  • I've never heard of them corrupting, I don't think there is any reason for it. Have you found whether it is corrupted when you receive it, or when you output it again? You could hash it when you receive it, then hash it when you wget it, to see if there is a discrepancy. – halfer Apr 03 '19 at 12:03
  • Right so I've run a test, it's being received wrong so it's quite early on the problem is happening. If it helps, I'm using $('.image-editor').cropit('export') to get the image in the first place (https://github.com/scottcheng/cropit) but I can't tell if that function is giving me the corrupted data URL or if it's being corrupted when it's saved to a field (which I then pick up at my end). But it's corrupted when I pick it up. – Pippa Rose Smith Apr 03 '19 at 12:19
  • I don't quite grok where that jQuery plugin fits in. Would you edit your question to describe the points at which the data gets moved from one place to another, and then for each path between two adjacent points, perhaps you could investigate whether corruption is happening? – halfer Apr 03 '19 at 17:52
  • I assume when you say that Shopify sends the image, that you mean the JS in the frontend of a Shopify site (as opposed to a curl call originating from the Shopify server). Is that being sent to a server endpoint written by you? If so, I wonder if you could save it to disk as part of a debugging investigation, to see if the PNG data is valid. Or could you use some JS to inject that data image into a new image element in the DOM, in case that plugin has a bug? – halfer Apr 03 '19 at 18:00
  • Sorry @halfer is the edits to the question making things clearer? I am going to see if I can run some tests to work out where exactly the problem is coming from. I was hoping it would be an obvious problem but clearly it's not. – Pippa Rose Smith Apr 04 '19 at 09:45
  • Yes, that helps (though I don't know Shopify at all). So I guess you have control over the Cropit plugin. I would suggest echoing the data using `console.log()` (base64 encoding it if necessary) to see if the corruption is happening in the JS frontend, or whether the issue is when you are saving to the Shopify product in the backend. – halfer Apr 04 '19 at 12:56
  • If that does not help (e.g. because the corruption is sporadic) I can add a bounty to this question on request (I am not sure I can advise much more, other than general debugging ideas). – halfer Apr 04 '19 at 12:57

0 Answers0