0

I am using canvas fabric to screen shot the image and output as image , and then use ajax through php to send mail out. the mail send was really slow , like 40 sec pre mail . i notice the image file size i create is one take most time in the mail.

each mail contain 4 image and each image is around 200 kb , like 800kb more each.

i need to find a way to compress it down. it was always png : is lossless

var url = this.canvas.toDataURL();

i found out this https://www.npmjs.com/package/canvas-png-compression

it said CanvasPngCompression.replaceToDataURL() to replace toDataURL();

i cant get it work and how to use it ?

so is there anyway i can compress my canvas image size to 100kb ?? need some advice compress those image.

dee cheok
  • 257
  • 3
  • 17
  • 1
    To get a slightly smaller size convert the dataURL from base64 to a Uint8Array, create a blob from that and send the blob. As Base64 encoding only uses 6 bits in every byte you will get an immediate file size reduction of 25% (200Kb becomes 150Kb) – Blindman67 Mar 15 '17 at 05:21
  • @Blindman67, in mails, image attachments are b64 encoded... – Kaiido Mar 15 '17 at 05:47
  • @Blindman67 how was the quality of the image ? – dee cheok Mar 15 '17 at 06:04
  • @Kaiido So it wont work ? – dee cheok Mar 15 '17 at 06:05
  • @deecheok, Blindman's suggestion was well founded and was just about the fact that the base64 encoded version is larger than the actual octet-stream version of your image, but it's actually exactly the same data, just written differently, so it takes more space (like `hello` converted to b64 becomes `aGVsbG8=`, which is bigger). So to answer your question to him, the quality is exactly the same. My point was that, yes, it won't reduce final size, because when you do send your images in mails, they have to be converted to a b64 version anyway. 1/2 – Kaiido Mar 15 '17 at 06:14
  • 2/2 But it could actually be good to only do the b64 conversion server-side, so the browser->server step goes faster. And at this effect, you can directly use canvas.toBlob method. Also, check (http://stackoverflow.com/questions/34711715/phpjs-how-to-do-fileuploads-in-html-form-as-content-type-multipart-via-js/34713226#34713226) – Kaiido Mar 15 '17 at 06:23
  • Got it , thank you guys so much , but because it was png , i was thinking about ziping those image to zip file and send by mail , it may low reduce the size , hopefully. – dee cheok Mar 15 '17 at 07:00
  • PNG files as saved by the browsers are already compressed (zLib), adding them to zip will not reduce size by much. In some cases PNG images have smaller file size than the default quality jpeg. This is dependent on the image content. Jpegs are good for photos/art, png for diagrams/text and the like. If you are in control of the rendering you can be PNG friendly. Avoid gradients, blurs (such as use for shadows), noisy textures (especially error based dithering (the better dithers)). If the png contains content from jpegs it might pay to just send the images as JPEG if you dont need alpha. – Blindman67 Mar 15 '17 at 08:43
  • Is the time you are waiting divided between you sending the file to the server and the server packaging and sending the email? What about just a smaller resized image? – AndreaBogazzi Mar 15 '17 at 22:11

0 Answers0