1

I am building a web application when the user can edit an image by using the CSS provided filters and then save it later. In order to save that filtered image i have to draw the image into a canvas and apply the used filters on that image on the canvas itself.

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

canvas.width = img.width;
canvas.height = img.height;

canvas.style.filter = "brightness(100%) saturate(200%) contrast(130%)";
context.drawImage(im,0,0);

The whole previous instructions works perfectly fine and i had to display the canvas to make sure that the filters are applied, and they were applied as they suppose. My problem is when i download the image using the following code it only download the image without any edition of the filters.

download(canvas, 'my-image.jpg'); 
function download(canvas, filename) {
var lnk = document.createElement('a'), e;
lnk.download = filename;
lnk.href = canvas.toDataURL("data:image/jpg;base64");
if (document.createEvent) {
   e = document.createEvent("MouseEvents");
   e.initMouseEvent("click", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
lnk.dispatchEvent(e);
} else if (lnk.fireEvent) {
    lnk.fireEvent("onclick");
 }
}

Any suggestions to solve this problem? PS: i'm on macOS and the development runs on Safari 11.1, using python and Flask as well. I tried the context.filter = "brightness(100%) saturate(200%) contrast(130%)"; and it worked fine in Chrome but not in Safari.

Moos Khaldi
  • 45
  • 2
  • 10
  • The issue is that you're applying CSS filters. They'll create the effect on screen but they've won't change the actual canvas element and content that's being downloaded. It's just like you added the filters to an image tag. Have a look at [HTML5Rocks](https://www.html5rocks.com/en/tutorials/canvas/imagefilters/) and the article about Canvas filters. There are also a few libraries out there that can make it easier to handle. –  May 03 '18 at 13:20
  • I am aware of this alreay, that's why i'm applying the filters to the canvas and not to the image, i tried to run the same code on chrome and it worked fine only if the width and height are below 900, and this is another issue too. – Moos Khaldi May 03 '18 at 13:23
  • What @SWC is telling you is that you are applying the filter **from** CSS. i.e on the DOM element, but the canvas image itself is not altered other than as DOM element (i.e its export method won't have the filter). But it's now super easy to apply CSS filters even on the canvas drawings itself: context2d has a `filter` property which does accept the same syntax as css filters. So simply replace `canvas.style.filter=...` with `context.filter=...` – Kaiido May 03 '18 at 13:53
  • @Kaiido I tried that already, and none of it worked. – Moos Khaldi May 03 '18 at 14:04
  • I mentioned before that all my experiments are on Safari, so my problem is on Safari. – Moos Khaldi May 03 '18 at 14:12
  • The context.filter = " "; works properly on Chrome, but not in Safari. – Moos Khaldi May 03 '18 at 14:14
  • Indeed Safari still doesn't support the `filter` property, sorry I misread you were using chrome. I added an other Q/A in the duplicate list, which also treats about the same thing, but gives some links that may interest you. But to apply only saturation and contrast (btw *bright(100%)* is a no-op), you might want to have a look at [globalCompositeOperations](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation) which might give you your expected result in a more performant way. – Kaiido May 03 '18 at 14:27
  • e.g [this answer](https://stackoverflow.com/questions/49313892/saturation-globalcompositeoperation-without-changing-transparency/49330331#49330331) might help you. – Kaiido May 03 '18 at 14:31
  • @Kaiido Sorry mate, but it did not help, it still download only the image without any filters. – Moos Khaldi May 03 '18 at 17:46

0 Answers0