title: JIMP Image Composite. Add watermark
body: <p>Consider a scenario where I want to add watermark at different places to an image and generate individual copies of each of them. </p>
  
  <p>The images are uploaded to AWS S3. </p>
  
  <pre><code>const AWS = require('aws-sdk');
  const Jimp = require('jimp');
  </code></pre>
  
  <p>I am using AWS SDK to fetch those images as buffer</p>
  
  <pre><code>const dynamoS3Bucket = new AWS.S3();
  let a = dynamoS3Bucket.getObject({ Bucket: 'bucket.name', Key: 'raw_uploads/Sample-image10-highres.jpg' }).promise();
  let b = dynamoS3Bucket.getObject({ Bucket: 'bucket.name', Key: 'raw_uploads/Sample-image10-highres.jpg' }).promise();
  </code></pre>
  
  <p>Now, I am trying to add a <em>watermark</em> as where <strong>a</strong> is the image and <strong>b</strong> is the <em>logo</em></p>
  
  <pre><code>Promise.all([a, b]).then(async resp =&gt; {
      let aa = watermark(30, resp[0].Body, resp[1].Body, 0, 1);
      let bb = watermark(30, resp[0].Body, resp[1].Body, 1, 0);
  
      return Promise.all([aa, bb]);
  }).then(respArr =&gt; {
      return respArr[1].writeAsync('fileName2.jpg');
  });
  </code></pre>
  
  <p>The <strong>watermark</strong> function goes as,</p>
  
  <pre><code>async function watermark(percent = 10, base, logo, x_axis = 0, y_axis = 0){
      percent = Math.ceil(percent);
      if(percent &gt; 70) percent = 70;
  
      baseIMG = await Jimp.read(base);
      logoIMG = await Jimp.read(logo);
  
      logoIMG = await logoIMG.resize(Math.ceil(baseIMG.bitmap.width * percent / 100), Jimp.AUTO,  Jimp.RESIZE_BEZIER);
  
      x_axis = Math.ceil(x_axis);
      y_axis = Math.ceil(y_axis);
      if(x_axis !== 0) x_axis = x_axis/Math.abs(x_axis);
      if(y_axis !== 0) y_axis = y_axis/Math.abs(y_axis);
  
      console.log({percent, baseIMG, logoIMG, x_axis, y_axis });
  
      if(x_axis === 0) x_axis = Math.ceil((baseIMG.bitmap.width - logoIMG.bitmap.width)/2)
      else if (x_axis === 1) x_axis = Math.ceil(baseIMG.bitmap.width - logoIMG.bitmap.width)
      else x_axis = 0;
  
      if(y_axis === 0) y_axis = Math.ceil((baseIMG.bitmap.height - logoIMG.bitmap.height)/2)
      else if (y_axis === -1) y_axis = Math.ceil(baseIMG.bitmap.height - logoIMG.bitmap.height)
      else y_axis = 0;
  
      return baseIMG.composite(logoIMG, x_axis, y_axis, {
          mode: Jimp.BLEND_SOURCE_OVER,
          opacitySource: 0.4,
          opacityDest: 0.3
      });
  }
  </code></pre>
  
  <blockquote>
    <p><strong>Problem</strong>: The first processed image is perfectly fine be the second image has 2 watermarks and looks like below.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/nR56z.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nR56z.jpg" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>I have tried fixing the issue by processing one image at a time by
    <strong>nesting promises</strong> instead of <em>Promise.all()</em>. Is there any possible way to achieve this, or any explanation on why this might be happening?</p>
  </blockquote>