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)
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.
Related
I was copying image links from google and I'm seeing more and more urls like this. What exactly is going on here and why are developers doing this? Heres a example.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAO0AAADVCAMAAACMuod9AAAAXVBMVEX///9Twd5Kv91AvNxNv91Fvtyi2uvq9vr6/f7L6vPP6/Tk9Pk8vNvE5/Lw+fz1+/1ox+FexOCQ1Oh/zuV1y+Pa8Pey4O664/Cc2Oqq3e2W1ul7zeSH0eav3+7e8fh0dubVAAATFElEQVR4nO1d6baqOgzellZlUEFFnN//Ma+gTdIBOoi4zl1+/87ZAh3SzEn//n744Ycffvjhhx9++OGHH0bBMq+zrM43Y75zU68Ot9OhqddjvvVtpNtZIjokbD9Px5hyfriyxztZC5HMjvcR3jkGNkch+AzAmSjKw+KtV+bzWcHIOx9vTcpspPG+hUPCZjo4S8om+o1NVZivfMx3txxx2FFY7oU5sG5wQhxjjtuDUtRdpWuYjz7+sLHNekbWghXbUIJen23bCtMt6o/MwhPL/pG9hrcN2d/lsRhYvBbJN3e3dAyune/c+20HMbCvr9fx753dozI6zhjn5vQZW3m97F6ZHODxylYI0f/Zf3hO/eNLcBBCXI6n0/FaJSaTEaXH8d3qRMxZwa+nJs1Wp32CfxN+azc+kI5Zlcr/XNbzypBJxcnxqoxpj7Bi3+Aabba4sOxT0xlGCpQnjupfFnMu1J0S1eD2bgt1W8XspnG3FKbLXCv3GVRyQsLCiNJSm0Bx6H1RPlPPf1Km5o9SeN9XNreWn+cX+9/paWvXZN/DThvlxHLRoyICSxTxWlo8tnKMSZ8RUJcKl+XcqtnvlB+xmWVfn5CKDC9HGX8Y5EFiAwJ1xRUatVDzulLkS3EbeJlcluQ9kyMGGXx7UN7PFTIVV/0tCrUXu0FbEfZ/YEk+hPNrmEyfgIaFQs6sUuZzoKyMs14ifuLGvkbKsF1Os/OmbC+1Y84J+YNwGnRr+fNiavURv+z+7UI5mwUsz4XsOk88OK1UZ9wrPDLg2NrFj4YzpdjkxatKsgZsWPt4Yf56YnIF4xT24YzqVknLxTd0wxPH4Ye3vAhh98bIY3BlYUSlSBqx/VsrvNhTX9jAOY8feBTkEUq8rfUrOaXiSnweXHh7JORDHsxiVIC09X/kRA4v9VFW/u6NvVytaV0Yy0QONeChVDUUXgc/xDw/f4cpL+QJ8mLJErnpTTS0q0FI/cLTHTIW7pI7boMeW+suyuQc9HwjZ9tvPn4CIAuO7t9SLCtlukmg4JQOhCFL5AOAzwbL+T2ZLgu1VOvIRX4Tq+jZUqds8NORB+hdwGxDD5DqgfZRjinyf2u2e821WDiMPA0w2yBO/jZgtmGG9dYIBhRBcdkvzTaOS50s8UAREij6EiVnMaJghboURlD4LMA0/xKXihEFNU5WHFHuhvhd4LNhSsm7iFjkNZIxu/6t8QQz/3dEkdT7iNCTyW62hkCOPqnEm7HHi/m3IO1qfzK84GSfdlOGhJ34GrigJ08cLgDfuefvj0DHEHBucHd9GbP0D00d1oRt8fs5MW3R009WwNNMltEYf2/HOJDKvV+UYoHbSBNFLsCqXD54+YCkhYnTL8JWGc1aVTOuev6/D5X89cTu81MIv9hhEF+VNkQqFT7bJUlERI05His5Ww/Jd8DzqbNw1Di4h9d0HSwJRkLt78i+44zM/B+yEu43yY96nvLxEODIRovWRq1X4FTumHvzrcjInxykk2HgobWHBJBTOY/uUbLGybOIwJHtYMoNkGqPPrz2P7pS7InJk5Xnfkx5gXNB1rLsIP+VudYD4JcO8AlIpuywgohHtSwrJpIiQRSFYLNqD7+YJYOOG9BRQgIU4yAfZFPLPGtO20ulBAfsKaBKaiSb7a/HQ3q35l+svsWS/whZKSNb3lenbfmsCOBDyct94G0dgSiK8jpf1eqk59+JFHQANiUjUPlqfmmLKZglkTVi1m3+asL2x+YuT2n5JZugxYloU/fmXBbCnV4cM2smimrbtBP8WpLJH2Gl1b4YaT97Z/yYclJKQyQoijoWlkROTgFYz4mDQE/k0aNGRL1g+lS4dMt6KmNs82NdFViRdOK1Ksty/8BD/FYzLlqx2/5ZT8cemq64hgVU3sJql4iAbeG7ZpXV+XrTw1yW68U9SxsaSHDt+mORdpPoytm1GJ5qy1GK2ZX8h+eb57C7/FK2alZfFdRrwsX1w9kXiznrFzMd52wFZLZA97rqiBoGaJmtNrquV/PdLBni9o+xzD+XvJvu+wqxniLi3KDyA4w6IBKQA5dP5K4t781xSMCxYv+ZI3yY9fIlXp0b1TYlVBnwiWPPU/nq2F9nJfhhbG1jeRpSlIz0pYW5S15AijDcXfv+Q8zEfMwi5+XcWiIKQsMwSkr4TZi5gk65QjuQYPNzG+9iyXG0/b1Z9vXBEncraePqHk+oAJiJwEFAacZMcytKlxSv0qtN/rGAesEhaJUQT9IR245C5aw0Ug5wrGlY4qOqPJXntnPAZQ/dxpgwGyEUppYFdKvLUNBdrQ4MZDbhfl8kCyWeBoScvFxSNrEvqjf9VXM9EZMrJeJQ3EaDX4vew+cD8NswqvwfYAHx/1Zlos2XF+/E7NWCgHYEyVmVNHJigkg9HG/MUbKvFRCy8sr8qHMUxqMt/YNaJMrFzHCRACmjox/rC0NELQJENSm1Bf+bUVvdzDSCLiLtQbXkjIvKooenptMTZOawA7Ef6E0H3je3ELLEqlLny8oI4auWnD30KLvNIWcLDBEDO/1p1ot6qOsJMCp0UsBMrCGRVKvKDvdb5cqC9XN3mQ0ufeNLtAbsLOo+L4uu70nCrz1GGxx8KcCwiq6H7a3UmtYk0BqsaRUWHzgLNQzkeaJA+jDrM6uK9Ch5WKlH2w7neqktcId+iXZSCwKD3Bs1FTzDZe8wsG5268Ga4Huly0hmzcc+c+Wl4AEb0h82F7pBIWnepPz/IWCHfdUn2Mz2XxCftGlRc1s3C1Ga+TTkOLR/BGE7HP9ZKRVW3rtL8gPcJWcgH1tVD2jQ5gXt6/FiSRkBVtdZFdLKd5kYSheZwvfskkhV4rbFJU9pxSPwF4uhp6cmk30wFT4QY0WOrMHNa2nJkVciB42We5WckZJn5G2m9NkN2ccGMadEjl3l1npkZtRIzT4/b8udcbJepjjoPnOwuM0c68OgQ9ake/BVCFhNr2DXAn06XqFAQsZ+UhqEDnrzjYSRta3Mi2yuwUKRTIAm/GLUpCuSh/8PeKznzlI9Hp40ONvOwo2VJwy5e9Gf8E0O3uCiuwNGQHH+9Rx757jy4a21pVcba+hdgYBphs5slKbX19SPVDuT5kZtHVtrI1PtmYCMMLDCnM8Adwgx19SBW3TGZOaCuQ3aUQ/JGsLGI8NSCKggKCXpoOrkxtZm7giZRXM4q91rAsYDupgjjWw1YEgOvJ3unWVr5wOyFh4zntoobw0rxfHrjCGzzQJjpGeqoZpmjYsjd4+Z6jJtTRaWIuXZnwLSncO8d4SB2iy9ymO2FrVwSeqHAt1r8ovFYAo/FP8Her1JMqPFYvUJRNuKw/EEhHovZQnd8K7JNQko/u+QKUaLDp8wvm22C3gwNLEECuwH1Sm5t7YdGgIKR2ahCp9Avm22yA5CXU3SkhguQJAUGdh0gLBPG/N0t3200hxlyoGNDeVjw+045EkJ5ApUxFhy/q8eB9fCKSin97RWX8j9ypXg/IXVKSgtpMzNPfiwKeOpjdJ8KqgqEzyhw4V36PAKiWo0ChsyF+ru1hwtxHRW6D+Ek4C4dYX9wNDyb0Cjy1PL5rp31mQUmp4csvzoVXBMAu0Zf5uj1rbOPIInJymbarBuN/m3cQRScxDyH0198A4fXfVxGU8uXaRsemEM+9Y78o0VOW7nyyrYnN8YprqpKrvsAnNrDd3aN3UVVRIfsYXC0dMlezL9UiYDHU50NR2ydzND1s9NtkY3nI+6SbwqftOFYW1hoczvDLJlSwYZvqqG9/t4U0ibIz++RtIrB1rFAkBEF3k2wB6a/ularNCMeKaBdjyEEHEP++rWJBHLI1YgD1h7rmBHLFR36puu7UCCTHvoUKBAui16GivwrddekkPmjHRvaACuHvJ/9eyusPCSRjGpkOc7xk3jQN61+ErYS0kgsQADcO2/MNBsOfK1mXnV0wUe7dp2g+DMD9sqKU3o9g56/SntGdpmi0OmPQTgOpo3As0qjloGIS9Km7aPIe+z+o0BPrW80jH79kx8Iqehbj7Qhi3X0rZAA7JzxE2b4Pz8CeeiuFjJDXXGV+Jg4w7gNkocPGyyesM6se8zuOQ2SFaDNmmfol2fdlWRJKw8r3pYAujq0he4dGn5tZpnEtjH6a/NqVFNkK19aEwbGNE1gtoBEhApIv8LSoGsynuu9hyPu47koqwXT+YWMkJhCzuJuk9k2j9IBOSPmMtiqkf5TjOWYvKl/lTpNeuSgPsDPChGMN0prlvqDYiDbCSMQRe5ei/56Fy4VmSob2LJViMSCEEQPgYqRlR5O9oY1DlzsscwVpUmwzl/p47kqr8tUaoWkJAJlZNiiIgLgiBjQTEtMNERnXVtAYsWByzerMzNdI2ACzaHRQfuoQTjgbwjrkBBFqWmretJrMumNO73YLP3S1XNO3tYUh6euwbZUYpAxnSn0BQ8yqJUYaMmKKe7xCgv4KGNP+1Y6Iygyz9vLyoDVqkFl0gfhMBvYbquZiqAxiFqa2Ed7xOR4ciMjL12wkm1txLyH415h7WrI6nYujMdk2wsRSO82I1Z9JVa5ou+CkOzREYVdhPXwCo1/b6ex1zH7sCUGln8CLbSmS8JvQZ8A0+AVlmzyU691U8Rd6X5oL703qfGEr47ZfSj6C/xj7GgqCUsap3drjPLhVKvbRXsNOpllgQL9VZF9btMJKLc3tK82xZgYAG0vFclV54dzqUoeq/n64TDZ6twV2UxUBbb1mqKgu+3pxSPoC8to2+Xn8/7WeHoJcEF/2A9qsTiNLPcJalPmiwJ297zRV9hdYdndTWjLxj+QHtr2naqrhd341JP19Bk0XxXMr974tLVzj/I8VU57/2+hxDaTtvUPr/5hKCNeXd9EKAhQmRbhHcL2KLgyl38GEKTQsYAuso/0rFFw4Pjy/aGX+lTA0kLx/p0Ya4WBtFo2XwhLvNsjddNfaMHkZKQ0ioBVdKrBcTO87Gj11P6EjRSRE3cB7wD2NdEl8nTw3nPi0TYLxD1m+TzrtCE7VtVhX4RbIa4csh3AC3ILVGcRb06nXclTxyNQEywRFQP3aTJcpt8Brfy5HeUe/WFWy+on1YUXS+4ArrCFV1ruFmFkx12oUVmc40AyHYddsuj7fdUfpebNeKlYCERO4KQ0MBrcjYFTMohDrA0ps8agnYRzvbEMgVm4pb2f+hbdbYtQ8PU7qVCU9iZRyI9j5N3nZV+InfuBzZ1sO4dds32aDsLciBqzPGo/WUfTRgx/kj7+rtzov2SrMdHSLtbTOQwHcyk56yHPnj1ZBZjQ+qNXrUlWLclNE5F+gn7eIODvjoiYJW9rK++vuc3ZNheYYUv3euFSepeJ4jmYBEiJBc0mF2zbYi9TuxdKLklbqxsNzGs8T89i/S+dD8QmvKevz8jp5JX5JBEJeFJmSD3wsNp7yD8s6hksJdugK4e/wrJmCse30cESeFOsk6NIMUG/mMHf0n4kN9AxLVEJOG4lUNzVCuEv7cfQl8xg45GzKWH9O6nE0kDDAmMSeNw2itho+5sIzMkSXpBd/JB5V3ogN9CnJg/WjzkIkh0xtYZvofIS5jMphcsLIfsn5qtUeMWaqn+W7PVSoeCLuOjj3/p3AY3bFS3NtROBdYW+Nx7iLxH86/NmSaHNtiUUdo7TYbo235rhS2H3giLrSQCn3sPsVc8ZlpgMKylGWRmTOyGizS9zEKKsJRT+KzbYTcm1lGLPLdUjQRdwZ5+yZoPvWuxxdWabODno3ni9iVPDQg+b/tlU1JuTIs0Zt5yaPulQNAu1Nd5p0pjki1I9I97Dx5uH/x86pCC0Lt6DpQZt326FnR7Cz9BBgUp0xp8JE7uxx1pB1v+9MpuaJGq2PuokMCkpnVL0dZMHj9W6hM4f5HhslTywTyOhDy2E19t/Ed8Ju5RHikVsxJ3UanB8ZC8kOo+ebQaSgpcsdS70ppYKJR/VlpIVY4sY2vf8WmQ+gVwl1ulLEFnR43SwcOxvdAVdFpNqgPU3Q7x00a59odb6uOVlCM2G6jAw8LUyS+WpO10exWMTC0mZJVFjVCUjgeR9tZHksLtcSYQBKij7nMtZaWaP9RXlX5W7aLialcdsN76nTb90QCnizX0qjdf5/012qnWpr24WmJg2FQh5haE94G54oYqlB/1ojOxH1CoN1prZW5m0KMX4Bv3SrZAj5rYE6lbzyu93IK5nBS64dveY5Uis18SW3HqnAsJEurgYnY+rFbNbVtaMjuTndNSWhuds3l3m1Ra19lhR1Zvej1KQumm2eZiMlvdA5t5qT4r8446/rzbTjEPv3HR4gse2fbM3/V0tnWB18nkKyzqiY3z4rwi5FKmxcWVvR9bnT4O1oPTZck5sBDrbtaDKpP9ghZFoalCdFsFi7lc7L7rrZ/z7tb9QVjvXOCs2Mfuw9qoEH+tnuUeh+mxuKq70TYpKW9vjSy7Ck2O8b5LbKbH5rDvLqrurpxOqt4mJSGou7tm2POlxdTFXS7kaXO4HZpszLrfxztP8+PpkH5R7Pzwww8//PDDDz/88MMP/yv8B1Phw+igFbidAAAAAElFTkSuQmCC
That is the image, stored as a base64 encoded string.
So they're not giving you a link to the image, and are instead giving you the image data directly.
Copy and paste everything after the first comma into e.g. https://www.base64decode.org/ and you'll see the picture.
This article gives a very detailed breakdown on why someone might choose to do so. One of the main reasons is to cut down the number of requests to your webserver. (clicking that link did not make a request to google, as you had already downloaded the data)
this image is just encoded using base64.
why people do this ? depend on the project. This way your page will be a bit heavier, but your image will be inside the page. If you use an URL, to load your image the browser will need to make a call.
Maybe the best call to do that, is this way you don't depend on another website to save and keep your image
Yesterday, I saw a tweet saying about holderJS library. When I read the usage, it says it will generate the image placeholder completely on client side. So I am wondering why in the life would I need a placeholder library?
What is the scenario in which rather than placing div of some size I would use image placeholder?
Image placeholders are generally meant for a page that is either in the process of dynamically loading a real image or the page is only partially designed and the placeholder image shows how the design will be laid out and how big the image should be even though the real image is not yet available. In this way, the HTML design can be nearly completed even though the final images are not yet available or done.
Wikipedia uses image placeholders when they know they want a particular image in a page, but are in search of an image they can use with the appropriate license.
Image placeholders are traditionally served up by a service on the web that automatically creates the placeholder images based on query parameters in a URL, but the holder.js library creates placeholder images entirely on the client (so no outside services are needed).
You can certainly achieve the same look as a placeholder with just a div with a background color and perhaps even some text in the div. But, when someone wanted to plug the final images into place, they would have the change the div tags to img tags. When using a placeholder image, all the HTML tags can be final and left as they are, only the .src values need to be plugged in to finish the design. So, placeholder images allow you to have a closer to complete version of the HTML even though the images are not yet done. It's a minor different, but one that is appreciated by some designers.
We are using the og:image property to supply facebook with the correct image, but in some instances it get's more images which it parses from the DOM. eg:
http://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ffunda.nl%2Fkoop%2Futrecht%2Fappartement-48611144-breedstraat-122%2F&t=Woning+te+koop%3A+Breedstraat+122%2C+Utrecht
Only the first image should be shown there. If you look in the debugger it looks fine:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.funda.nl%2Fkoop%2Futrecht%2Fappartement-48611144-breedstraat-122%2F
Anyone knows whats going on here?
I've just encountered this issue in a site I maintain.
It appears that bloody Facebook changed again things without notifying anything to developers..
Image for og:image must be now at least 200x200px.
If it is smaller, than facebook will take other images that it parses from the same URL, even if these images have nothing to do as leading image for that URL.
Just take care that og:image is big enough and it will be ok.
* Notice that even after you change it, it may appear wrong for some time, if the URL is already cached in FB. To solve it immediately, just pass again the URL to the FB debugger.
I have a web application running on local host. The requirement is to load multiple rectangular jpg images (96 images, average 7k in size each) and show on home page when it runs. Images are showed in a grid of 8x12 rows/columns. I am loading image by setting the 'src' attribute of the 'img' in javascript. The url assigned to the 'src' attribute is same for all images but the image id is different. Images are loading but the main issue is that they are not loading very quickly and they are some what loading in a sequence means 1,2,3,4... and so on but some images are not loaded in sequence. I want to improve the performance of this page. I have tried the figure out the timings at different points like:
When call is originated form client (image src attribute is set)
When server is receiving call. (the page on server which serve individual image)
When server is about to return the image.
When on client side image is received/showed (image loaded event called in javascript)
It turned out after looking at the collected data that main time is lost between 1 and 2 above that is between the client side call is originated and server is receiving call for a particular image.
I have also tried setting parameters like maxWorkerThreads, minWorkerThreads, requestQueueLimit and maxconnection in machine.config but no significant improvement yet.
Can someone please help me in this situation as i am stuck here since many days and i am really short of time now. Desperately needs to improve the performance of these images loads.
Thanks in advance.
Since you stress the lack of time, I would advise you to try a jQuery plugin that loads images on demand. The gallery in which you load the pictures, does the user scroll in it? Or is it 1 big field?
If it's a gallery the user can scroll in, I'd strongly suggest you take a look at lazyload. What this plugin does, is it fetches the image only when it is needed. As long as it's not on the screen, it will not be loaded. For a brief example, have a look at this demo.
I hope this can help you out.
I am able to utilize imagemagick to properly generate animated images and I can post them to twitter without issue, however upon posting them, it seems as though Twitter is somehow destroying the animation component I'm guessing with it's reencoding of the image.
This is less than desirable in my situation as I need to post a statistical compilation of images daily to an account and need the animation to retain integrity. I am supposing that this is a function of Photobucket that they're now using or such.
How does one encode an image and upload it such that it retains its integrity? I have wondered about uploading directly to TwitPic or other options or perhaps exploring more fully the imagemagick encoding options so that they line up precisely with Twitter requirements in order to produce an image that requires no reencoding, however I'm looking for help in this regard.