0

I'm trying to do image compression using the canvas, but the safari is not working. Google chrome works well.

ResizeImage = function (base64data, index, size, orientation) {
  jQuery("#" + self.canvas).after('<canvas style="display:none" id="UsedCanvas"></canvas>');

  var canvas = document.getElementById("UsedCanvas");
  var ctx = canvas.getContext("2d");
  var image = new Image();
  image.src = base64data;
  image.onload = function () {
    canvas.width = image.width;
    canvas.height = image.height;
    var height = canvas.height,
      width = canvas.width;
    if (orientation > 4) {
      canvas.width = height;
      canvas.height = width;
    }
    if (canvas.width > 1600 || canvas.height > 1200) {
    if (canvas.width > canvas.height) {
      var newheight = (1600 * canvas.height) / canvas.width;
      canvas.height = newheight;
      canvas.width = 1600;
    } else {
      var newwidth = (1600 * canvas.width) / canvas.height;
      canvas.width = newwidth;
      canvas.height = 1600;
    }
  }
    ProcessNewImage(canvas.toDataURL('image/jpeg', 0.7));
  };
};

According to my research, the datatourl parameter quality does not work on safari.

But I found no alternative to that.

gansonic
  • 1
  • 2
  • If the optional parameter for [`toDataURL()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) or [`toBlob()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob) does not work for you, your only alternative is to use a 3rd party library that rolls its own jpeg compression algorithm. That would be extremely inefficient to do in JavaScript though. – Patrick Roberts Dec 17 '18 at 17:39
  • You could also perform image compression server-side, if that's something you're willing to consider. – Patrick Roberts Dec 17 '18 at 17:41
  • What makes you think it doesn't work? Depending on the image content 0.7 might not be low quality enough to overcome the increase in size induced by *whatever quality* to *raw* to *jpeg*. I.e the canvas API is aboit the worth for compressing an image (not only browsers don't like to spend too much time on correct compression levels, but they always start from raw pixels (and hence generate new data when the source is already in a lossy format). Related: https://stackoverflow.com/questions/48632459/downsizing-image-dimensions-via-pure-js-leads-to-image-size-inflation-in-bytes/48634519#48634519 – Kaiido Dec 17 '18 at 23:50
  • @Kaiido I tested the same image using safari and chrome. In chrome it worked perfectly – gansonic Dec 18 '18 at 12:25
  • That doesn't mean anything. Every browser may have their own internal compression settings and it may very well differ (actually it will differ), because some prefer to sacrifice performance over compression level, some the other way around, and some others in between. In any case, you can't rely on the canvas API to compress an image. Ps: just to be sure, I tried on Safari 12.0.2 and it definitely works: https://i.stack.imgur.com/KDmKa.png from left to right: png, image/jpeg 0.1, image/jpeg 0.7 – Kaiido Dec 18 '18 at 12:37

0 Answers0