brianium / watermarkjs

:rice_scene: Watermarking for the browser
http://brianium.github.io/watermarkjs/
Other
1.73k stars 230 forks source link

How to watermark on sever? #60

Open seyedasfar opened 4 years ago

seyedasfar commented 4 years ago

My client-side uploading photos to sever and saving on Gridfs MongoDB, How can I able to watermark before storing my images on database?

what I tried.

      const storeUpload = async (file) => {
        watermark([file, 'https://dcassetcdn.com/design_img/1559024/551167/551167_7840631_1559024_911ff84c_image.png'])
          .image(watermark.image.lowerRight(0.5))
          .then(img => file = img);

        const { createReadStream, filename } = await file
        const stream = createReadStream()
        await new Promise((resolve, reject) =>
          stream
            .pipe(bucket.openUploadStream(filename))
            .on('error', error => reject(error))
            .on('finish', (res) => {
              resolve()
              photos.push(res._id)
            })
        )
      }

      await Promise.all(data.photos.map(file => storeUpload(file)))
skliffmueller commented 4 years ago

watermarkjs was built with the intent to only run on client side as it relies on the HTMLCanvasContext elements to exist which is only native to browsers. Typically you'd watermark on client side then upload the watermarked image to the server.

You might be able to do some hackery, or fork and update watermarkjs to use something like this https://github.com/Automattic/node-canvas to give node js canvas abilities.

The traditional way is to use something like graphicmagick gm Here is some articles on how to do that http://www.proccli.com/2013/10/watermark-images-with-node.js-and-graphicsmagick https://stackoverflow.com/questions/24375090/node-js-express-and-gm-graphicsmagick-adding-watermarks-and-general-image https://github.com/aheckmann/gm/issues/276

Note: You must install graphicsmagick library on your system, or the server itself. Here are some Dockerfiles which show some of the resources you will have to install via aptitude, or apk https://hub.docker.com/r/jameskyburz/graphicsmagick-alpine/dockerfile https://github.com/jtblin/debian-node-graphicsmagick/blob/master/Dockerfile

And a general guide to installation: http://www.graphicsmagick.org/README.html