HTML5 – IMG.LY Blog

How to Draw on Images in React Native

Natalia — Thu, 20 Oct 2022 13:09:38 GMT

It has become a commonplace requirement for many applications to manipulate images in one way or another before users are ready to share them. Therefore, it is crucial to foresee end-user needs while working on an app involving any interaction with graphical content. Image annotation can be necessary in various cases, such as simple inspection apps, bug reporting software, or machine learning applications relying on manual user input.

In this article, we are shedding light on how to draw on images in React Native with the help of a simple HTML5

Enable the characteristics of the
Set the thickness and color of the brush instrument;
Define at what moment your brush needs to be activated and when the drawing process will finish;
Start drawing!

Let’s first clear up the purpose of

Canvas Integration for Images

<canvas> is an HTML component commonly used for creating and manipulating graphics, animation, and other visualization features. This element provides JavaScript APIs enabling image overlays and handling user input to make drawing possible. Moreover, while we have several methods for image manipulation with

<! -- HTML example of using canvas: -->
<canvas id="myCanvas" width="200" height="100"></canvas>

You might wonder why you cannot easily substitute <canvas> with some lines of HTML and CSS in your code. The answer lies on the surface: <canvas> creates a single flattened graphic rather than multiple components lying on top of each other (i.e., typically the output of HTML and CSS).

Now, let’s see how to implement this powerful element in your React Native application:

Drawing with Canvas

import React, { useEffect } from 'react';

// CanvasContext here is used for drawing onto the canvas
import { useCanvas } from './CanvasContext';

export function Canvas() {
  const { canvasRef, prepareCanvas, startDrawing, finishDrawing, draw } =
    useCanvas();

  useEffect(() => {
    prepareCanvas();
  }, []);

  return (
    <canvas
      onMouseDown={startDrawing}
      onMouseUp={finishDrawing}
      onMouseMove={draw}
      ref={canvasRef}
    />
  );
}

We start by enabling the characteristics of our <canvas> container, which are meant to render the CanvasContext component presented below.

The size of our future canvas is determined with prepareCanvas, which includes both the height (canvas.height) and width (canvas.width) of the HTML element. For the drawing process itself, it is necessary to assign not only the thickness and color of the brush instrument (context) but also take into account its activation (startDrawing with onMouseDown) and how the user can finish a stroke (finishDrawing with onMouseUp).

import React, { useContext, useRef, useState } from 'react';

// enabling drawing on the blank canvas
const CanvasContext = React.createContext();

export const CanvasProvider = ({ children }) => {
  const [isDrawing, setIsDrawing] = useState(false);
  const canvasRef = useRef(null);
  const contextRef = useRef(null);

  // defining width & height of the canvas
  const prepareCanvas = () => {
    const canvas = canvasRef.current;
    canvas.width = window.innerWidth * 2;
    canvas.height = window.innerHeight * 2;
    canvas.style.width = `${window.innerWidth}px`;
    canvas.style.height = `${window.innerHeight}px`;

    // defining the thickness and colour of our brush
    const context = canvas.getContext('2d');
    context.scale(2, 2);
    context.lineCap = 'round';
    context.strokeStyle = 'black';
    context.lineWidth = 5;
    contextRef.current = context;
  };

  const startDrawing = ({ nativeEvent }) => {
    const { offsetX, offsetY } = nativeEvent;
    contextRef.current.beginPath();
    contextRef.current.moveTo(offsetX, offsetY);
    setIsDrawing(true);
  };

  const finishDrawing = () => {
    contextRef.current.closePath();
    setIsDrawing(false);
  };

  const draw = ({ nativeEvent }) => {
    if (!isDrawing) {
      return;
    }
    const { offsetX, offsetY } = nativeEvent;
    contextRef.current.lineTo(offsetX, offsetY);
    contextRef.current.stroke();
  };

  // Once the canvas is cleared it return to the default colour
  const clearCanvas = () => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');
    context.fillStyle = 'white';
    context.fillRect(0, 0, canvas.width, canvas.height);
  };

  return (
    <CanvasContext.Provider
      value={{
        canvasRef,
        contextRef,
        prepareCanvas,
        startDrawing,
        finishDrawing,
        clearCanvas,
        draw,
      }}
    >
      {children}
    </CanvasContext.Provider>
  );
};

export const useCanvas = () => useContext(CanvasContext);

Drawbacks of the Canvas Method

Despite the canvas component offering powerful features, it is also quite demanding to use in its original form. For example, it may be problematic to adjust the properties of the brush to ensure that you can draw with smooth movements. Thus, implementing any solution for this issue would further increase the coding time and reduce the compatibility between different frameworks. Also, separately defining canvas and brush properties overcomplicates the code and requires advanced sources for successful integration into your React Native app. Although some temporary solutions aim to facilitate this process (such as react-native-image-draw or react-native-sketch-draw), none provides a permanent solution with clear documentation and guidance.

If you wonder about a magic door to avoid this coding nightmare, you can always choose a commercial, all-in-one solution like PhotoEditor SDK. Implementing this SDK only takes a few lines of code, saves time and expenses in building an app, and you can expect great support from the developers. This way, you can skirt the hassle of coding an editor and instead focus on creating a great product.

PhotoEditor SDK Integration for Drawing on Your Images

To get started integrating the PhotoEditor SDK in your React Native app, refer to this guide from the official documentation. You can then ensure comfortable image interaction for your users with the optimized brush tool, as in the example below.

Conclusion

This article aimed to examine image editing instruments suitable for React Native framework. The HTML <canvas> element could have big potential as it provides fundamental tools for creating graphics or animation. However, its application is time-consuming and requires comprehensive knowledge in the field. Therefore, if you want to guarantee a smooth and easy integration of image drawing tools for your app, consider using advanced software like PhotoEditor SDK.

How To Pixelate an Image in JavaScript

Antonello — Thu, 14 Oct 2021 12:20:03 GMT

In this tutorial, you will learn how to pixelate an image in Vanilla JavaScript, without any libraries. As you are about to see, you can achieve this easily by using the HTML5 <canvas> element.

Recently, websites and applications have implemented policies to prevent users from accidentally stumbling across explicit content. The most common approach to avoid this when it comes to images and photos is to pixelate them. Such a solution is so common that every frontend developer should know how to pixelate an image.

So, let’s learn how to make an image pixelated with JavaScript. By following this step-by-step tutorial, you will be able to implement the following demo.

Pixelating Images Using HTML5 `<canvas>`

Clone the GitHub repository supporting this article by launching the following commands:

git clone https://github.com/Tonel/how-to-pixelate-an-image-img-ly

Then, open the index.html file to immediately try the demo application.

Or keep reading this tutorial and build that demo application step by step.

1. Implementing the pixelation logic
Since, you can achieve the desired goal with only the HTML5 <canvas> element, there are no prerequisites. Specifically, this HTML element allows you to extract the array of pixels representing an image by using the getImageData() function. And this is what is needed to pixelate an image. Let’s see how in detail:

function pixelateImage(originalImage, pixelationFactor) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const originalWidth = originalImage.width;
  const originalHeight = originalImage.height;
  const canvasWidth = originalWidth;
  const canvasHeight = originalHeight;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  context.drawImage(originalImage, 0, 0, originalWidth, originalHeight);
  const originalImageData = context.getImageData(
    0,
    0,
    originalWidth,
    originalHeight
  ).data;
  if (pixelationFactor !== 0) {
    for (let y = 0; y < originalHeight; y += pixelationFactor) {
      for (let x = 0; x < originalWidth; x += pixelationFactor) {
        // extracting the position of the sample pixel
        const pixelIndexPosition = (x + y * originalWidth) * 4;
        // drawing a square replacing the current pixels
        context.fillStyle = `rgba(
          ${originalImageData[pixelIndexPosition]},
          ${originalImageData[pixelIndexPosition + 1]},
          ${originalImageData[pixelIndexPosition + 2]},
          ${originalImageData[pixelIndexPosition + 3]}
        )`;
        context.fillRect(x, y, pixelationFactor, pixelationFactor);
      }
    }
  }
  originalImage.src = canvas.toDataURL();
}

First, an in-memory HTML <canvas> with a 2D rendering context having the same size as the original image to be pixelated is initialized. Next, the original image is drawn into the canvas with the drawImage() function. This is required to call the getImageData() function, which allows you to retrieve the list of pixels. Do this by accessing the data attribute. You will get a one-dimensional array containing the value of the pixels in RGBA order. Particularly, it stores values as an integer between 0 and 255, and each pixel is represented by 4 consecutive values. So, the size of this array will be 4 times of the number pixels.

Then, the pixels are iterated by using pixelFactor as the increment factor. In other words, this variable is used to extract the sample pixel, whose four RGBA values will be employed to draw a square. These squares will give the image the pixelated effect. So, at the end of the cycles, the image will look pixelated.

Et voilà! As you just learned, pixelating an image in Vanilla JavaScript requires only a bunch of lines of code.

2. Pixelation in action
Let’s now see how to use the pixelateImage() function to implement a real-world example.

<!DOCTYPE html>
<html>
  <body>
    <h1>Pixelate an Image</h1>
    <p>Upload an image or pixelate the following demo image</p>
    <input id="upload" type="file" accept="image/*" />
    <div>
      <img
        style="margin-top: 5px;"
        id="pixelatedImage"
        src="demo.jpg"
        crossorigin="anonymous"
      />
    </div>
    <div style="margin-top: 5px;">
      <span>Pixelation: </span>
      <input
        type="range"
        min="0"
        max="10"
        value="0"
        step="1"
        class="pixelation"
        id="pixelationRange"
      />
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

const fileInput = document.querySelector('#upload');
const pixelatedImage = document.querySelector('#pixelatedImage');
// storying a copy of the original image
const originalImage = pixelatedImage.cloneNode(true);
const pixelationElement = document.querySelector('#pixelationRange');
fileInput.addEventListener('change', async (e) => {
  const [file] = fileInput.files;

  // showing the uploaded image
  pixelatedImage.src = await fileToDataUri(file);
  // storing the original image
  originalImage.src = await fileToDataUri(file);
  pixelationElement.value = 0;

  return false;
});
pixelationElement.oninput = (e) => {
  pixelateImage(originalImage, parseInt(e.target.value));
};
function fileToDataUri(field) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(field);
  });
}
function pixelateImage(originalImage, pixelationFactor) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const originalWidth = originalImage.width;
  const originalHeight = originalImage.height;
  const canvasWidth = originalWidth;
  const canvasHeight = originalHeight;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  context.drawImage(originalImage, 0, 0, originalWidth, originalHeight);
  const originalImageData = context.getImageData(
    0,
    0,
    originalWidth,
    originalHeight
  ).data;
  if (pixelationFactor !== 0) {
    for (let y = 0; y < originalHeight; y += pixelationFactor) {
      for (let x = 0; x < originalWidth; x += pixelationFactor) {
        // extracting the position of the sample pixel
        const pixelIndexPosition = (x + y * originalWidth) * 4;
        // drawing a square replacing the current pixels
        context.fillStyle = `rgba(
          ${originalImageData[pixelIndexPosition]},
          ${originalImageData[pixelIndexPosition + 1]},
          ${originalImageData[pixelIndexPosition + 2]},
          ${originalImageData[pixelIndexPosition + 3]}
        )`;
        context.fillRect(x, y, pixelationFactor, pixelationFactor);
      }
    }
  }
  pixelatedImage.src = canvas.toDataURL();
}

The demo.jpg image is loaded by default, but users can also upload their images thanks to the input element. Then, using the range input they can change the pixelation and see the effects on the original image. What happens behind the scene is that the change event on the range input is intercepted and used to call the pixelateImage() function. This takes care of pixelating the original image unless pixelationFactor is 0. In this last case, the original image will be restored. Note that the application implemented here is the same presented in the fiddle above.

Final Considerations

No external libraries are required to implement pixelation logic on images in JavaScript. Moreover, this requires nothing more than a few lines of code. This could be used in conjunction with explicit content identification tools, such as Google SafeSearch. On the other hand, performance is a problem. Pixelating an image frontend side takes time and resources. This could put a strain on the end user’s device, consequently introducing delays in displaying the pixelated images.

If the pixelation effect did not have to be applied programmatically, you should consider adopting a commercial solution. In this case, performance would not be a problem. There will be no issues because an experienced team of developers would have already optimized the algorithms for you. In this case, you could take advantage of an advanced SDK. And CreativeEditorSDK is the right solution for you. This all-in-one SDK comes with many features, allowing your users to unleash their creativity. So, they will be able to go beyond pixelating an image. Also, if you needed help, you could directly ask the team who built it.

Pixelating an Image with `cesdk-js`

First, read article from the official documentation on how to get started with CreativeEditorSDK in Vanilla JavaScript. Then, by selecting an image and applying the Pixelize effect, and changing the horizontal and vertical size of the pixels, you will get the desired result. You can check out this feature in the demo here.

Conclusion

In this tutorial, we learned how to pixelate an image in JavaScript. By using the HTML5 <canvas>, it was a reasonably smooth task. With just a few lines of code and by harnessing the HTML5 <canvas> functions, you can quickly obtain your desired result. On the other hand, achieving decent performance on large images may quickly become a challenge. Also, you might not want to spend too much time optimizing your algorithms. In this case, you should adopt a more performant, advanced, and complete solution – such as CreativeEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

How to Apply Custom Image Filters Using HTML5 Canvas in JavaScript

Antonello — Tue, 14 Sep 2021 15:25:56 GMT

In this article, you will learn how to apply custom filters to an image in JavaScript, without using any external library. As you are about to learn, this goal can be achieved by employing only the HTML5 <canvas> element.

Instagram has changed image processing forever. Since its market debut, users have become increasingly interested and accustomed to applying filters to their images and photos. This desirable, valuable, and requested feature might seem complex to implement, but it is not.

So, let’s see how to implement a feature for users to apply custom filters to an image with Vanilla JavaScript. Follow this step-by-step guide to achieve the following result:

Custom Filters With `<canvas>`

The HTML <canvas> element allows you to edit an image. It natively offers you the possibility to implement several image-processing features, such as implementing a brush. In other words, it is the only prerequisite required to apply custom filters to an image. All you need to do is load an image, turn it into an array of pixels by using the getImageData() function, and apply a transformation to change their value according to the result you want to achieve. Finally, you can either overwrite the original image or create a new one after applying the filter.

Now, let’s see everything required to implement such a cool feature.

Clone the GitHub repository supporting this tutorial by launching the following command:

    git clone https://github.com/Tonel/how-to-apply-custom-image-filters-in-javascript-img-ly

And try the application by opening the index.html file in your browser.

Otherwise, continue following this article to learn how to implement the same demo application step by step.

1. Implementing Simple Filters

Simple filters can be applied by changing the value of each pixel the image consists of. For example, you can implement a function to apply thresholding as follows:

function applyThreshold(sourceImageData, threshold = 127) {
  const src = sourceImageData.data;

  for (let i = 0; i < src.length; i += 4) {
    const r = src[i];
    const g = src[i + 1];
    const b = src[i + 2];

    // thresholding the current value
    const v = 0.2126 * r + 0.7152 * g + 0.0722 * b >= threshold ? 255 : 0;

    src[i] = src[i + 1] = src[i + 2] = v;
  }
  return sourceImageData;
}

This simple function receives the ImageData object relative to the image to be thresholded as a parameter. Then, its data property representing a one-dimensional array with the image data in the RGBA order is accessed. This contains integer values between 0 (black) and 255 (white). Finally, data is iterated and modified to apply the thresholding operation, before returning the updated ImageData object.

That is just an example, but with this approach, you may implement many other simple filters.

2. Implementing Convolution-Based Filters

Convolution is one of the most important concepts when it comes to image processing. Particularly, it allows you to apply a filter by taking the weighted sum of a rectangle of pixels from an image and use it as the output value pixel by pixel. The coefficients used to perform the weighted sum are defined through a matrix, which is called kernel. By changing the kernel, the final result will change accordingly. Some kernels are more popular than others and can be used for blurring, sharpening, and edge detection. You can find a list of these well-known kernels here.

function applyConvolution(sourceImageData, outputImageData, kernel) {
  const src = sourceImageData.data;
  const dst = outputImageData.data;

  const srcWidth = sourceImageData.width;
  const srcHeight = sourceImageData.height;

  const side = Math.round(Math.sqrt(kernel.length));
  const halfSide = Math.floor(side / 2);

  // padding the output by the convolution kernel
  const w = srcWidth;
  const h = srcHeight;

  // iterating through the output image pixels
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      let r = 0,
        g = 0,
        b = 0,
        a = 0;

      // calculating the weighed sum of the source image pixels that
      // fall under the convolution kernel
      for (let cy = 0; cy < side; cy++) {
        for (let cx = 0; cx < side; cx++) {
          const scy = y + cy - halfSide;
          const scx = x + cx - halfSide;

          if (scy >= 0 && scy < srcHeight && scx >= 0 && scx < srcWidth) {
            let srcOffset = (scy * srcWidth + scx) * 4;
            let wt = kernel[cy * side + cx];
            r += src[srcOffset] * wt;
            g += src[srcOffset + 1] * wt;
            b += src[srcOffset + 2] * wt;
            a += src[srcOffset + 3] * wt;
          }
        }
      }

      const dstOffset = (y * w + x) * 4;

      dst[dstOffset] = r;
      dst[dstOffset + 1] = g;
      dst[dstOffset + 2] = b;
      dst[dstOffset + 3] = a;
    }
  }

  return outputImageData;
}

This function expects the source ImageData object as a parameter. Similarly, you must provide it with a blank ImageData object with the same size as the first one to be used as output, and a matrix representing the kernel. Then, the convolution algorithm is applied on the outputImageData object by iterating on the sourceImageData one.

Et voilà! Now, you have the building blocks required to implement a filtering feature in Vanilla JavaScript. Let’s see how in detail.

3. Filtering in Action

Let’s take a look at how to implement a simple application allowing users to upload an image, choose the filter to apply, and see the final result :

<!DOCTYPE html>
<html>
  <body>
    <h1>Image Resizer</h1>
    <p>
      Please, upload an image and apply the filter that best suits the image
    </p>
    <input id="upload" type="file" accept="image/*" />
    <div id="images" style="visibility: hidden;">
      <h2>Original image</h2>
      <img id="imageToFilter" style="max-width: 100%; height: 200px;" />
      <div style="margin-top: 5px;">
        <span>Filter: </span>
        <input type="radio" name="filterRadio" value="noFilter" checked />
        <label>No Filter</label>
        <input type="radio" name="filterRadio" value="threshold" />
        <label>Threshold</label>
        <input type="radio" name="filterRadio" value="sharpen" />
        <label>Sharpen</label>
        <input type="radio" name="filterRadio" value="blur" />
        <label>Blur</label>
      </div>
      <h2>Filtered image</h2>
      <img id="filteredImage" style="max-width: 100%;" />
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

// hiding the div that will contain the images
const imagesDiv = document.querySelector('#images');
const fileInput = document.querySelector('#upload');

let imageToFilter = null;
const filteredImage = document.querySelector('#filteredImage');

// initializing the filter value
const filterElement = document.getElementsByName('filterRadio');

let filter;
filterElement.forEach((f) => {
  if (f.checked) filter = f.value;
});

// applying the selected filter
filterElement.forEach((f) => {
  f.onclick = () => {
    filter = f.value;
    filteredImage.src = filterImage(imageToFilter, filter);
  };
});

fileInput.addEventListener('change', async (e) => {
  const [file] = fileInput.files;

  // displaying the uploaded image
  imageToFilter = document.querySelector('#imageToFilter');
  imageToFilter.src = await fileToDataUri(file);

  // making the div containing the image visible
  imagesDiv.style.visibility = 'visible';

  // applying the defaul filter
  imageToFilter.addEventListener('load', () => {
    filteredImage.src = filterImage(imageToFilter, filter);
  });
  return false;
});

function fileToDataUri(field) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(field);
  });
}

function filterImage(imageToFilter, filter) {
  const canvas = document.createElement('canvas');

  const context = canvas.getContext('2d');

  const canvasWidth = imageToFilter.width;
  const canvasHeight = imageToFilter.height;

  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  context.drawImage(imageToFilter, 0, 0, canvasWidth, canvasHeight);

  const sourceImageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
  const blankOutputImageData = context.createImageData(
    canvasWidth,
    canvasHeight
  );
  const outputImageData = applyFilter(
    sourceImageData,
    blankOutputImageData,
    filter
  );

  context.putImageData(outputImageData, 0, 0);

  return canvas.toDataURL();
}

function applyFilter(sourceImageData, outputImageData, filter) {
  if (filter === 'noFilter') {
    return sourceImageData;
  } else if (filter === 'threshold') {
    return applyThreshold(sourceImageData);
  } else if (filter === 'sharpen') {
    return applyConvolution(
      sourceImageData,
      outputImageData,
      [0, -1, 0, -1, 5, -1, 0, -1, 0]
    );
  } else if (filter === 'blur') {
    return applyConvolution(sourceImageData, outputImageData, [
      1 / 16,
      2 / 16,
      1 / 16,
      2 / 16,
      4 / 16,
      2 / 16,
      1 / 16,
      2 / 16,
      1 / 16,
    ]);
  } else {
    // fallback option
    return sourceImageData;
  }
}

function applyThreshold(sourceImageData, threshold = 127) {
  const src = sourceImageData.data;

  for (let i = 0; i < src.length; i += 4) {
    const r = src[i];
    const g = src[i + 1];
    const b = src[i + 2];

    // thresholding the current value
    const v = 0.2126 * r + 0.7152 * g + 0.0722 * b >= threshold ? 255 : 0;
    src[i] = src[i + 1] = src[i + 2] = v;
  }

  return sourceImageData;
}

function applyConvolution(sourceImageData, outputImageData, kernel) {
  const src = sourceImageData.data;
  const dst = outputImageData.data;

  const srcWidth = sourceImageData.width;
  const srcHeight = sourceImageData.height;

  const side = Math.round(Math.sqrt(kernel.length));
  const halfSide = Math.floor(side / 2);

  // padding the output by the convolution kernel
  const w = srcWidth;
  const h = srcHeight;

  // iterating through the output image pixels
  for (let y = 0; y < h; y++) {
    for (let x = 0; x < w; x++) {
      let r = 0,
        g = 0,
        b = 0,
        a = 0;

      // calculating the weighed sum of the source image pixels that
      // fall under the convolution kernel
      for (let cy = 0; cy < side; cy++) {
        for (let cx = 0; cx < side; cx++) {
          const scy = y + cy - halfSide;
          const scx = x + cx - halfSide;

          if (scy >= 0 && scy < srcHeight && scx >= 0 && scx < srcWidth) {
            let srcOffset = (scy * srcWidth + scx) * 4;
            let wt = kernel[cy * side + cx];
            r += src[srcOffset] * wt;
            g += src[srcOffset + 1] * wt;
            b += src[srcOffset + 2] * wt;
            a += src[srcOffset + 3] * wt;
          }
        }
      }

      const dstOffset = (y * w + x) * 4;
      dst[dstOffset] = r;
      dst[dstOffset + 1] = g;
      dst[dstOffset + 2] = b;
      dst[dstOffset + 3] = a;
    }
  }
  return outputImageData;
}

As you can see, the HTML page contains everything required to upload an image, and select a filter. There is also a no filter option, allowing users to restore the original image. Also, to better appreciate the effects of each filter, the original image is always shown as well.

From a technical point of view, what happens is that the input element is used to upload an optional image. Then, the uploaded image is passed to the applyFilter() function, which takes care of applying the filterselected in the HTML radio buttons by calling the right function. This can involve either a simple filter, or a convolution-based one. In this latter case, the appropriate kernel is passed to the applyConvolution() function as well. Then, the output ImageData object is used to show the resulting image by using the putImageData() function. Please, note that the example that was just implemented corresponds to the live demo you can find at the beginning of the article.

Final Considerations

Implementing image filtering is not a simple task and can easily be implemented with Vanilla JavaScript. On the other hand, the more filters you want to add, the more complicated things can get. In this tutorial, you just saw how to implement non-complex filters, but there are filtering techniques that require much more effort. Plus, the majority of them involve iterating through each pixel. As a result, on large images, this can turn into a time-consuming process. So, if you do not want to ruin the user experience, you might be forced to adapt academic and well-known algorithms to make them more efficient. Thus, implementing this feature efficiently can turn into a considerably complex task.

If you do not want to deal with such unavoidable optimizations, a commercial and all-in-one solution like PhotoEditorSDK should be taken into account. This way, you will not have to worry about accomplishing challenging and time-consuming tasks anymore. Also, whenever you need help, you can ask for support from the img.ly developers who built the SDK.

Filter an Image with `photoeditorsdk`

First, you should read this article from the official documentation on how to get started with PhotoEditorSDK in HTML and JavaScript. Then, by using Filters feature, you can start enjoying more than 60 high-quality filters. Moreover, each of them was optimized natively to be lightning fast. This way, you can minimize the processing time, and achieve the following result with a few clicks:

Conclusion

In this article, we looked at how to implement a feature to allows users to apply a filter on an image with JavaScript. Implementing such a feature can be entirely achieved by only using the HTML5 <canvas> element. However, making the image processing fast enough not to make users wait can become a problem. This is the real issue when dealing with such a feature, which inevitably involves iterating through each pixel of which an image is composed. Consequently, optimizing well-known filtering algorithms to avoid this issue is what makes implementing the feature challenging. So, if you do not want to deal with this issue, you can adopt an easy, complete, advanced, and all-in-one solution – such as PhotoEditorSDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.

How to Draw on an Image With JavaScript

Antonello — Mon, 23 Aug 2021 15:20:14 GMT

In this article, you will learn to implement a brush to draw on an image in JavaScript, without using any dedicated external libraries, like those of React for image manipulations. As you are going to see, this can be achieved effortlessly using the HTML5 <canvas> element.

In the last few years, touchscreens have become more and more common. This technology has made drawing on screens much easier and accessible to everyone. Thus, allowing users to draw on photos or pictures is a more common feature than ever before. For example, we all expect to be able to modify pictures we took before sending them in messaging applications. This is just one of the several real-world case scenarios where you may need to implement this increasingly valuable feature.

So, let’s see how to draw on an image with Vanilla JavaScript. Follow this step-by-step guide to achieve the following result:

Drawing on Images With `<canvas>`

Clone the GitHub repository that supports this article by launching the following command:

git clone https://github.com/Tonel/how-to-draw-on-an-image-with-javascript-img-ly

Then, launch the index.html page to try the demo application.

Otherwise, continue following this tutorial to see how to implement the demo application step by step.

1. Implementing the Brush Feature

The HTML <canvas> element natively offers everything required to implement a brush feature. So, it is actually the only prerequisites. Despite it is typically used for game graphics, animations, real-time video processing, and data visualization, you can also employ it as a tool to draw on images. This powerful tool allows you to implement many cool features, such as resizing an image. Follow this link to find out how.
In this case, it takes only a handful of lines of code to implement a brush. Let’s see how together:

function drawOnImage(image = null) {
  const canvasElement = document.getElementById('canvas');

  const context = canvasElement.getContext('2d');

  // if an image is present,
  // the image passed as a parameter is drawn in the canvas
  if (image) {
    const imageWidth = image.width;
    const imageHeight = image.height;
    // rescaling the canvas element
    canvasElement.width = imageWidth;
    canvasElement.height = imageHeight;
    context.drawImage(image, 0, 0, imageWidth, imageHeight);
  }

  let isDrawing;
  canvasElement.onmousedown = (e) => {
    isDrawing = true;
    context.beginPath();
    context.lineWidth = 10;
    context.strokeStyle = 'black';
    context.lineJoin = 'round';
    context.lineCap = 'round';
    context.moveTo(e.clientX, e.clientY);
  };

  canvasElement.onmousemove = (e) => {
    if (isDrawing) {
      context.lineTo(e.clientX, e.clientY);
      context.stroke();
    }
  };

  canvasElement.onmouseup = function () {
    isDrawing = false;
    context.closePath();
  };
}

First, a canvas already presents on the HTML page is retrieved. Then, a 2D rendering context is initialized. This will be used to draw on the surface of the blank canvas or on the optional image passed as a parameter. In this last case, the canvas element is resized to fit the image dimensions. Also, the image is drawn by employing the drawImage() function. Next, the logic necessary to draw is implemented.

On mousedown, brush color, thickness, and opacity are defined. Also, the lineJoin and lineCap properties are set to round to make edges less sharp and more rounded. Then, the pointer is moved to the coordinates corresponding to the mouse click position employing the moveTo function.

On mousemove, a line to the new coordinates of the mouse position is drawn by harnessing lineTo and then stroke. Since the mouse position was moved on the mousedown event, a straight line connecting the new (x, y) coordinates is drawn.

Finally, on mouseup, the drawing operation is stopped by assigning the isDrawing variable to false. This flag was introduced to avoid drawing when moving the mouse on canvas without clicking on it first.

Note that the two just mentioned event-handler functions used to draw are enclosed by beginPath and closePath. This ensures that every line drawn represents a new sub-path for the canvas. This allows each line to be completely independent of the others and to be plotted in the canvas as an unmodifiable drawing element.

Et voilà! As you can see, implementing a brush to draw on an image in Vanilla JavaScript takes only a few lines of code.

2. Drawing in Action

Now, let’s take a look at the drawOnImage() function in action through a complete real-world example:

<!DOCTYPE html>
<html>
  <body>
    <div>
      <canvas
        id="canvas"
        width="500"
        height="200"
        style="border: 1px solid black;"
      ></canvas>
    </div>
    <div style="margin-top:5px">
      <span>Size: </span>
      <input
        type="range"
        min="1"
        max="50"
        value="10"
        class="size"
        id="sizeRange"
      />
    </div>
    <div style="margin-top:5px">
      <span>Color: </span>
      <input type="radio" name="colorRadio" value="black" checked />
      <label for="black">Black</label>
      <input type="radio" name="colorRadio" value="white" />
      <label for="black">White</label>
      <input type="radio" name="colorRadio" value="red" />
      <label for="black">Red</label>
      <input type="radio" name="colorRadio" value="green" />
      <label for="black">Green</label>
      <input type="radio" name="colorRadio" value="blue" />
      <label for="black">Blue</label>
    </div>
    <div style="margin-top:5px">
      <button id="clear">Clear</button>
    </div>
    <br />
    <input id="upload" type="file" accept="image/*" />
    <p>
      Start drawing on the blank canvas or upload an image and use the brush to
      modify on it
    </p>
    <script src="src/index.js"></script>
  </body>
</html>

const fileInput = document.querySelector('#upload');

// enabling drawing on the blank canvas
drawOnImage();

fileInput.addEventListener('change', async (e) => {
  const [file] = fileInput.files;

  // displaying the uploaded image
  const image = document.createElement('img');
  image.src = await fileToDataUri(file);

  // enabling the brush after the image
  // has been uploaded
  image.addEventListener('load', () => {
    drawOnImage(image);
  });

  return false;
});

function fileToDataUri(field) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      resolve(reader.result);
    });
    reader.readAsDataURL(field);
  });
}

const sizeElement = document.querySelector('#sizeRange');
let size = sizeElement.value;
sizeElement.oninput = (e) => {
  size = e.target.value;
};

const colorElement = document.getElementsByName('colorRadio');
let color;
colorElement.forEach((c) => {
  if (c.checked) color = c.value;
});
colorElement.forEach((c) => {
  c.onclick = () => {
    color = c.value;
  };
});

function drawOnImage(image = null) {
  const canvasElement = document.getElementById('canvas');

  const context = canvasElement.getContext('2d');

  // if an image is present,
  // the image passed as parameter is drawn in the canvas
  if (image) {
    const imageWidth = image.width;
    const imageHeight = image.height;

    // rescaling the canvas element
    canvasElement.width = imageWidth;
    canvasElement.height = imageHeight;

    context.drawImage(image, 0, 0, imageWidth, imageHeight);
  }

  const clearElement = document.getElementById('clear');
  clearElement.onclick = () => {
    context.clearRect(0, 0, canvasElement.width, canvasElement.height);
  };

  let isDrawing;
  canvasElement.onmousedown = (e) => {
    isDrawing = true;
    context.beginPath();
    context.lineWidth = size;
    context.strokeStyle = color;
    context.lineJoin = 'round';
    context.lineCap = 'round';
    context.moveTo(e.clientX, e.clientY);
  };

  canvasElement.onmousemove = (e) => {
    if (isDrawing) {
      context.lineTo(e.clientX, e.clientY);
      context.stroke();
    }
  };

  canvasElement.onmouseup = function () {
    isDrawing = false;
    context.closePath();
  };
}

As you can see, the HTML page contains everything needed to change brush size, and color. By interacting with them, users can achieve several possibilities and unleash their creativity. Also, in case of errors, they can press the Clear button and return to the initial conditions.

From a technical point of view is that the input element is used to upload an optional image. Then, it is passed to the aforementioned drawOnImage() function. This enables the brush feature on the image or the blank canvas and lets users draw on it. Please, note that the example that was just implemented corresponds to the fiddle you can find at the beginning of the article.

Final Considerations

Although implementing a brush feature to draw on an image in Vanilla JavaScript is definitely an easy task, there are a few downsides that must be addressed. First, making the drawing process smooth while moving the pointer quickly is tricky. This is an optimization problem, which may require you to adopt caching or debouncing techniques. Thus, implementing this feature effectively and efficiently can easily turn into a nightmare. Second, whenever you want to add a new style to the brush, you must spend time implementing all the front-end components required to enhance this feature. Despite not being difficult, this definitely involves boilerplate code.

When you do not want to spend hours writing boring yet unavoidable code to add new colors or brushes, a commercial and all-in-one solution like PhotoEditorSDK should be the preferred approach. In fact, it allows you to no longer stressing due to having to tackle these tedious and time-consuming tasks. Plus, whenever you need help, you can ask for support from the IMG.LY developers who built the SDK.

Drawing on an Image with `photoeditorsdk`

First, you should read integration tutorial article from the official documentation on how to get started with PhotoEditorSDK in HTML and JavaScript. Then, by using the Brush Engine you can start enjoying a brush feature optimized for touch screen interaction. Moreover, it natively supports different brush strokes. They can also be tweaked in terms of color, hardness, size, and opacity. This way, you should be able to achieve the desired result:

Conclusion

In this article, we looked at how to draw on an image with JavaScript. Implementing a brush to draw on images by using the <canvas> HTML element is not complex. However, it inevitably involves boilerplate code. Specifically, when implementing all the minor options such a feature should offer to the end-users. Also, making the brush smooth and optimized for touch screen and fast movements is quite complex. In fact, this requires optimizing or devising an intelligent algorithm aimed at not wasting resources. So, if you want to avoid these issues and use an easy an all-in-one solution, you should consider using more advanced and complete software – such as CreativeEditor SDK.

Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us on Twitter with any questions, comments, or suggestions.
Like to try out our product? Get in touch or start a free trail today!

How to integrate a Photo Editor into your Website

Felix — Wed, 10 Jul 2019 00:00:00 GMT

This tutorial is going to walk you through the integration process of the PhotoEditor SDK into your website. You’ll learn how to setup the HTML5 editor in four minutes. We created similar tutorials for iOS and Android, so make sure to check those out as well.(Please make sure to get a trial license for the PhotoEditor SDK before integrating it.)

https://www.youtube.com/embed/9ZfEN3LMJU8?feature=oembed

Transcript

In this tutorial, we’re going to show you how to integrate the PhotoEditor SDK for HTML5 into your website. We’re going to use Visual Studio Code and the PhotoEditor SDK’s documentation. So let’s get to it.

We unzip the file and copy the assets, css and js folder. Those contain all the elements our editor needs to run properly. We paste the folders into our project folder. For this demo, we want to open a sample image with the editor, so we copy that into our folder as well.

Here, we already opened our project’s folder with Visual Studio Code. Next, we’re going to create an HTML file that we’re going to use to build our site. We copy this code for the <head> section and paste it into our index.html file.

<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
</head>

Here’s where we link to the JavaScript files from our js folder. Please note that if you store the folder somewhere else, you have to adjust these paths accordingly. Also, this is where the css file for our desktop UI is loaded.

Next, we’re going to add a <body> to our site. Then we’ll need a <div> where our editor is going to be displayed. For that, we can simply copy the snippet from the documentation.

<div id="editor"></div>

The <div>’s ID is set to editor so we can address it via JavaScript. Now, we copy this JavaScript snippet from the documentation so that the editor loads properly.

<script>
  window.onload = function () {
    var image = new Image()
    image.onload = function () {
        var container = document.getElementById('editor')
        var editor = new PhotoEditorSDK.UI.DesktopUI({
        container: container,
        // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        editor: {
          image: image
        },
        assets: {
          // This should be the absolute path to your `assets` directory
          baseUrl: '/assets'
        }
      })
    }
    // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
    image.src = './example.jpg'
  }
</script>

We have already prepared our license file here. It is important to copy the entire content of the license file and paste it after license. Also, it is important to insert the license as a string and not as a JavaScript object.

Please make sure that under baseUrl you have entered the correct path to your assets folder.

Under image.src we load our image. Please note that if you don’t load the image locally but from another source, say a server like an AWS S3 bucket, you have to setup CORS properly. We dedicated a whole section in our documentation to this issue, so make sure to check that out. However, as we’re going to load the image locally, we don’t have to mind that line.

Finally, it is important that we create the editor after the image is loaded so that we can pass the image to the editor.

Alright, we’re set. Now we can test everything by running a server. We’ll go with the SimpleHTTPServer.

As we can see, everything runs properly. Thanks a lot for watching and see you next time.

That was all that is necessary to get the PhotoEditor SDK up and running. For your convenience, here’s the whole source code of the HTML file:

<!DOCTYPE html>
<html>
  <head>
    <!-- React Dependencies for the SDK UI -->
    <script src="js/vendor/react.production.min.js"></script>
    <script src="js/vendor/react-dom.production.min.js"></script>
    <!-- PhotoEditor SDK-->
    <script src="js/PhotoEditorSDK.min.js"></script>
    <!-- PhotoEditor SDK UI -->
    <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
    <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css" />
  </head>

  <body>
    <div id="editor"></div>
    <script>
      window.onload = function () {
        var image = new Image()
        image.onload = function () {
            var container = document.getElementById('editor')
            var editor = new PhotoEditorSDK.UI.DesktopUI({
            container: container,
            // Please replace this with your license: https://www.photoeditorsdk.com/dashboard/subscriptions
            license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
            editor: {
              image: image
            },
            assets: {
              // This should be the absolute path to your `assets` directory
              baseUrl: '/assets'
            }
          })
        }
        // image.crossOrigin = 'Anonymous'  // Setup CORS accordingly if needed
        image.src = './example.jpg'
      }
    </script>
  </body>
</html>

**Thanks for reading! To stay in the loop, subscribe to our Newsletter.**

HTML5 – IMG.LY Blog

How to Draw on Images in React Native

Canvas Integration for Images

Drawing with Canvas

Drawbacks of the Canvas Method

PhotoEditor SDK Integration for Drawing on Your Images

Conclusion

How To Pixelate an Image in JavaScript

Pixelating Images Using HTML5 <canvas>

Final Considerations

Pixelating an Image with cesdk-js

Conclusion

How to Apply Custom Image Filters Using HTML5 Canvas in JavaScript

Custom Filters With <canvas>

1. Implementing Simple Filters

2. Implementing Convolution-Based Filters

3. Filtering in Action

Final Considerations

Filter an Image with photoeditorsdk

Conclusion

How to Draw on an Image With JavaScript

Drawing on Images With <canvas>

1. Implementing the Brush Feature

2. Drawing in Action

Final Considerations

Drawing on an Image with photoeditorsdk

Conclusion

How to integrate a Photo Editor into your Website

Transcript

Pixelating Images Using HTML5 `<canvas>`

Pixelating an Image with `cesdk-js`

Custom Filters With `<canvas>`

Filter an Image with `photoeditorsdk`

Drawing on Images With `<canvas>`

Drawing on an Image with `photoeditorsdk`