Code – IMG.LY Blog

How to Trim and Crop Video in Swift

Walter — Tue, 31 Aug 2021 16:03:25 GMT

In this article, you will see how to use Swift and AVKit to crop a video clip and how to trim a video’s timeline. Then you will learn how to use AVAssetExportSession to write your edited video to disk. The code in this article uses Swift 5 and Xcode 12.5. Clone this repository for a sample project and example code.

Anatomy of a Video File

The AVFoundation and AVKit frameworks are what Swift and iOS use to manage audio and video. When starting out, you may use an AVPlayerViewController for playback with the same controls and features as the native players. You can also use an AVPlayer object and provide your own playback and editing controls. Whichever you choose, you begin by loading a media file (.mp3, .mov, etc.) into an AVPlayerItem. Inside the AVPlayerItem, the media becomes an AVAsset which may have many tracks of video, audio, text, closed captions etc.

To manipulate an AVAsset, Apple provides the AVComposition class. The AVComposition can act on a single track or many tracks to filter and mix underlying media and produces a single output. An AVPlayer shows the output of an AVComposition on a device. When it is time to export, you can use an AVAssetExportSession with the same AVComposition to write to disk or upload to a server.

Cropping Video to a Rectangle

Apple provides some different AVComposition classes optimized for common tasks. Apple recommends using one of these classes instead of writing custom AVComposition classes whenever possible. The reason for this is that when Apple introduces new technologies (like HDR Video), they will ensure it works with their classes. If you’ve written your own, you will have to update it to work with the new technologies. In this article you will crop the video to a rectangle and let the audio pass through as recorded. A good class to use for this task will be the AVMutableVideoComposition with the init(asset: AVAsset, applyingCIFiltersWithHandler applier: @escaping (AVAsynchronousCIImageFilteringRequest) -> Void) initializer. This will allow you to apply a CIFilter to each frame of the video. Apple provides an efficient cropping filter called CICrop.

func transformVideo(item: AVPlayerItem, cropRect: CGRect) {

  let cropScaleComposition = AVMutableVideoComposition(asset: item.asset, applyingCIFiltersWithHandler: {request in

    let cropFilter = CIFilter(name: "CICrop")! //1
    cropFilter.setValue(request.sourceImage, forKey: kCIInputImageKey) //2
    cropFilter.setValue(CIVector(cgRect: cropRect), forKey: "inputRectangle")


    let imageAtOrigin = cropFilter.outputImage!.transformed(by: CGAffineTransform(translationX: -cropRect.origin.x, y: -cropRect.origin.y)) //3

    request.finish(with: imageAtOrigin, context: nil) //4
    })

  cropScaleComposition.renderSize = cropRect.size //5
  item.videoComposition = cropScaleComposition  //6
}

The applyingCIFiltersWithHandler will execute for every frame in the asset of the AVPlayerItem. Here is what the code above will do:

Create a CICrop filter (note that this demo uses ! to force unwrap, production code should handle failure)
Add the .sourceImage (a CIImage) from the request to the filter.
Move the cropped image to the origin of the video frame. When you resize the frame (step 4) it will resize from the origin.
Output the transformed frame image
Set the size of the video frame to the cropped size
Attach the composition to the videoComposition property of the asset

Notice that the transformation does not alter the underlying asset. It creates a videoComposition filter to attach to the item during playback. After the transformation, AVPlayer will display the new creation when executing its .play() function.

Sharp eyed readers will have noticed that the init method mentions “applying CIFilters” plural. Instead of one filter, you can create an entire pipeline of CIFilter objects to manipulate the visual properties of the frames. The request object also contains the compositionTime so filters can change at different parts of the video.

Trimming the Time of a Video

When an AVPlayer loads an AVItem the start time of the video will be at CMTime.zero. The end will be the duration property of the AVItem. To adjust the playback times, you call the .seek function to move to the new start time and set the forwardPlaybackEndTime to the new end time. Now the player will only play the part of the clip between those times.

//The player object is already created and configured to play video in the ViewController

//load a video .mov file
self.player = AVPlayer(url: Bundle.main.url(forResource: "grocery-train", withExtension: "mov")!)

//Set the start time to 5 seconds.
let startTime = CMTimeMakeWithSeconds(5, preferredTimescale: 600)

//Convert the duration of the video to seconds
let videoDurationInSeconds = self.player!.currentItem!.duration.seconds

//Subtract 5 seconds from the end time
let endTime = CMTimeMakeWithSeconds(videoDurationInSeconds - 5, preferredTimescale: 600)

//Assign the new values to the start and end time
self.player?.seek(to: startTime)
self.player?.currentItem?.forwardPlaybackEndTime = endTime

//Play the video
self.player?.play()

The CMTime (Core Media Time) object uses timescales and Int values to map to the individual frames of tracks. Video tracks commonly come to your app with 24, 30, 60 or 120 frames per second. Converting between these different formats using Floats or Doubles would be imprecise. When converting seconds to CMTime with video, 600 is the commonly used timescale because it is a common multiple of all of the standard frames per second.

Exporting the Video

As with the videoComposition property, setting the start and end times of the player only modifies the playback of the video clip. The underlying asset remains unchanged. When you use the AVAssetExportSession, the new video file will have the change. The export session applies time range and video composition objects as it writes the file. A function to export might look like:

func export(_ asset: AVAsset, to outputMovieURL: URL, startTime: CMTime, endTime: CMTime, composition: AVVideoComposition) {

    //Create trim range
  let timeRange = CMTimeRangeFromTimeToTime(start: startTime, end: endTime)

    //delete any old file
  do {
    try FileManager.default.removeItem(at: outputMovieURL)
  } catch {
    print("Could not remove file \(error.localizedDescription)")
  }

    //create exporter
  let exporter = AVAssetExportSession(asset: asset, presetName: AVAssetExportPresetHighestQuality)

    //configure exporter
  exporter?.videoComposition = composition
  exporter?.outputURL = outputMovieURL
  exporter?.outputFileType = .mov
  exporter?.timeRange = timeRange

    //export!
  exporter?.exportAsynchronously(completionHandler: { [weak exporter] in
    DispatchQueue.main.async {
      if let error = exporter?.error {
        print("failed \(error.localizedDescription)")
      } else {
        print("Video saved to \(outputMovieURL)")
      }
    }
  })
}

Going Further

AVKit and AVFoundation provide simple objects for manipulating video files. The difficulty when working with video and audio tracks usually comes while providing editing controls for a user. The image below shows how the original video dimensions might change from creation to display.

The original 2160x3840 video appears on an iPhone in a 357x635 frame. Additionally the origin point (green dot) of the video file and the origin point of the UIViews are not equal. Passing the frame of the red, cropping rectangle to an AVComposition would not work as expected. Inside of the AVComposition the video resumes it’s 720x1280 dimensions while the 250x250 cropping rectangle would remain 250x250.

Before using a UIView rectangle with an AVComposition it needs to resize and the origin point needs to align to the video’s origin. Your app must apply a CGAffineTransform to reorient the origin points.

var cropRect = self.croppingView.frame //1
let originFlipTransform = CGAffineTransform(scaleX: 1, y: -1)
let frameTranslateTransform = CGAffineTransform(translationX: 0, y: renderingSize.height)
cropRect = cropRect.applying(originFlipTransform) //2
cropRect = cropRect.applying(frameTranslateTransform) //3

Now you apply regular ratio math to the dimensions of the cropping rectangle to match the video dimensions.

let renderingSize = playerItem.presentationSize

let xFactor = renderingSize.width / playerView.bounds.size.width
let yFactor = renderingSize.height / playerView.bounds.size.height

let newX = croppingView.frame.origin.x * xFactor
let newW = croppingView.frame.width * xFactor
let newY = croppingView.frame.origin.y * yFactor
let newH = croppingView.frame.height * yFactor
var cropRect = CGRect(x: newX, y: newY, width: newW, height: newH)

The transformations above are standard when working with AVKit and UIKit or SwiftUI in an app. The math is not complex, but it is tedious. Unless your app is a custom video editing application, you may find that using a commercial solution such as VideoEditorSDK is a better approach. By adding the VideoEditorSDK, your app can have professional appearing trim and crop controls as well as filtering, text and more.

Wrapping Up

In this article, you saw how to crop a video image and how to trim time from a track, all in Swift. Further, you saw how using an SDK such as VideoEditorSDK allows you to provide full-featured video editing for any application.
Looking for more video capabilities? Check out our solution for Short Video Creation, and Camera SDK!

Thanks for reading! We hope that you found this tutorial 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 Resize an Image in React

Antonello — Fri, 30 Jul 2021 10:57:19 GMT

In this article, you will see how to resize an image in JavaScript. In particular, here you will learn to achieve this goal with the react-image-file-resizer React library. If you are looking for a pure Javascript solution, here’s a quick rundown of the HTML API usage.

Providing users with features to resize images has become almost unavoidable. This is because images are larger than ever. It is not a secret that the quality of the images and therefore their file sizes have been increasing for years.

The problem is that dealing with large files is time-consuming. Plus, it may cost money in bandwidth when uploading or downloading them. This is why it is so important to shrink the size of images by resizing them. Also, these issues fall on end-users, and this should be avoided.

So, let’s see how to resize an image in React with react-image-file-resizer. By following this step-by-step tutorial, you will achieve the following result:

Prerequisites

This is the list of all the prerequisites for the demo application you are going to build:

Node.js and npm 5.2+ and higher
react-image-file-resizer >= 0.4.7

Resizing an Image with `react-image-file-resizer`

You can clone the GitHub repository that supports this article and try the demo application by launching the following commands:

git clone https://github.com/Tonel/resize-image-react-demo-imgly
cd resize-image-react-demo-imgly
npm i
npm start

Otherwise, you can continue following this tutorial and build the demo application step by step.

1. Creating a React Project

Generate an empty working project in React with Create React App, the officially supported way to create single-page React applications. You can initialize a new project called react-image-resizer-demo with the following command:

npx create-react-app react-image-resizer-demo

You will now have a demo project located in the react-image-resizer-demo folder with the following file structure:

react-image-resizer-demo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── reportWebVitals.js
    └── setupTests.js

Move into the react-image-resizer-demo folder and start a local server by launching these commands:

cd react-image-resizer-demo
npm start

Reach http://localhost:3000/ in your browser. You should now be able to see the default Create React App screen, as follows:

2. Installing `react-image-file-resizer`

First, you have to add the react-image-file-resizer library to your project’s dependencies. You can do it by running the following command:

npm install --save react-image-file-resizer

Thus, your package.json file will be updated accordingly. You should now be able to spot react-image-file-resizer as a dependency.

Now, all prerequisites have been met. So, you can start building your image resizer component. Let’s see together how.

3. Building the Image Resizer Component

First, make a components folder inside src. Then, create an ImageResizer folder containing index.js and index.css. These two files will contain the resizer component definition and style respectively.

Initialize index.js with the following snippet:

import React from 'react';

function ImageResizer() {
  return <div>{/*TODO*/}</div>;
}

export default ImageResizer;

This way, you have just defined an empty ImageResizer component.
Now, import the Resizer utility from the react-image-file-resizer library. Add it to the ImageResizer imports:

import Resizer from 'react-image-file-resizer'

This is what the final ImageResizer will look like:

import React, {useEffect, useState} from "react";
import Resizer from "react-image-file-resizer";

function ImageResize(props) {
    const {imageToResize, onImageResized, resizeAspect, resizeQuality} = props;

    const [imageToResizeUri, setImageToResizeUri] = useState();
    const [imageToResizeWidth, setImageToResizeWidth] = useState();
    const [imageToResizeHeight, setImageToResizeHeight] = useState();

    useEffect(() => {
        if (imageToResize) {
            const reader = new FileReader();

            reader.addEventListener('load', () => {
                setImageToResizeUri(reader.result);
            });

            reader.readAsDataURL(imageToResize);
        }
    }, [imageToResize])

    useEffect(() => {
        if (imageToResize && imageToResizeWidth && imageToResizeHeight) {
            Resizer.imageFileResizer(
                imageToResize,
                imageToResizeWidth * resizeAspect,
                imageToResizeWidth * resizeAspect,
                "JPEG",
                resizeQuality,
                0,
                (uri) => {
                    onImageResized(uri)
                },
                "base64"
            );
        }
    }, [
        imageToResize, imageToResizeWidth, imageToResizeHeight,
        onImageResized, resizeAspect, resizeQuality
    ]);

    return (
        <img
            src={imageToResizeUri}
            onLoad= {(e) => {
                const img = e.target;
                setImageToResizeWidth(img.width);
                setImageToResizeHeight(img.height);
            }}
            crossorigin="anonymous" // to avoid CORS-related problems
        />
    );
}

ImageResize.defaultProps = {
    onImageResized: () => {},
    resizeAspect: 0.5,
    resizeQuality: 100
}

export default ImageResize;

imageToResize is the source Blob representing the image received from the props. First, imageToResize is transformed into a Base64 URI by the first useEffect() function, and then showed. After being loaded by the <img> HTML tag, the image’s width and height are saved to be used during the resizing operation. This is done by the second useEffect() function, which takes care of resizing the Blob image received by employing the Resizer utility.

Please, note that resizeAspect and resizeQuality are two props in charge of defining the resize aspect and quality percentage, respectively. By default, they are assigned to 0.5 and 100. This means that the resized image will be 50% smaller and no compression will be applied during the resizing process.

4. Putting It All Together

Now, let’s see the ImageResizer component defined above in action. All you need to do, is change the App.js file as follows:

import React, { useState } from 'react';
import './App.css';
import ImageResize from './components/ImageResizer';

function App() {
  const [imageToResize, setImageToResize] = useState(undefined);
  const [resizedImage, setResizedImage] = useState(undefined);

  const onUploadFile = (event) => {
    if (event.target.files && event.target.files.length > 0) {
      setImageToResize(event.target.files[0]);
    }
  };

  return (
    <div className="app">
      <h1>Image Resizer</h1>
      <p>
        Please, upload an image and it will be showed both original and resized
        by 50%
      </p>
      <input type="file" accept="image/*" onChange={onUploadFile} />
      <div>
        <ImageResize
          imageToResize={imageToResize}
          onImageResized={(resizedImage) => setResizedImage(resizedImage)}
        />
      </div>
      {resizedImage && (
        <div>
          <h2>Resized Image</h2>
          <img alt="Resize Image" src={resizedImage} />
        </div>
      )}
    </div>
  );
}

export default App;

The input element allows users to upload an image. This is stored in the imageToResize state variable, and then passed to ImageResizer as a props. This will take care of resizing it accordingly. The resulting resized image is saved thanks to the setResizedImage function, and finally displayed in the Resize Image section.

If you are a Next.js user, you can use the <Image /> component to make it resize images for you. React will then render resized images automatically.

Final Considerations on `react-image-file-resizer`

Resizing an image cannot be considered a complex task. However, using a library like react-image-file-resizer makes everything easier. In fact, you can achieve your goal with just a handful of lines of code. On the other hand, you should take into account what using such specific libraries implies. In fact, when you need to perform many image-related operations, you may be ending up with as many libraries as operations required.

Not only might they be complex to make them coexist, but they may have very different UIs as well. This is why, harnessing a commercial and more complete solution such as PhotoEditorSDK could be a better approach. With only one library, you would get several tools to deal with images as you need. This, while preserving the consistency of your application’s UI. Plus, whenever you need help, you can ask for support from the img.ly developers who built the SDK.

Resizing an Image with PhotoEditorSDK

First, you should read this article from the official documentation on how to get started with PhotoEditorSDK in React. Then, by using the transform tool you can perform cropping, resizing, flipping, and rotation operations with just one feature. This way, you should be able to achieve the desired result

Conclusion

In this article, we looked at how to resize an image in React. Although this cannot be considered a complex feature to implement, using a library such as react-image-file-resizer is recommended. As we have seen, you can resize an image effortlessly and with only a few lines of code. On the other hand, it is a library with a very specific and limited purpose. So, if you needed to perform more than one operation on your images, you might want to take advantage of a more advanced and complete solution – such as PhotoEditorSDK.

How To Resize an Image With JavaScript

Antonello — Tue, 20 Jul 2021 09:22:31 GMT

In this article, you will learn how to resize an image in JavaScript, without using any external library. Thanks to the HTML <canvas> element, this is a reasonably easy task to accomplish.

Resizing an image has become increasingly important. That is because the quality of the images and their file sizes have been increasing for years.
For example, when letting users upload an image, you should always consider resizing it before uploading it. Uploading large photos is time-consuming and may cost money in bandwidth. As we have previously explained you might also want to compress such images. As you can imagine, both of these consequences fall on end-users – we want to avoid this.

Let’s see how to resize an image with Vanilla JavaScript. Follow this step-by-step tutorial to achieve the following result on CodeSandbox:

Resizing Images Using `<canvas>`

You can clone the GitHub repository that supports this article by launching the following command:

git clone https://github.com/Tonel/resize-image-javascript-imgly

Otherwise, you can continue following this tutorial and build the demo application step by step.

1. Implementing the Resizing Logic

While in a React context we used a library to do the heavy lifting for us, knowing the HTML [<canvas>](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) API is the only prerequisites for this approach. Although typically used for animation, game graphics, data visualization, and real-time video processing, you can also employ it as an image manipulation tool. Specifically, it provides everything required to resize an image. Let’s see how:

function resizeImage(imgToResize, resizingFactor = 0.5) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const originalWidth = imgToResize.width;
  const originalHeight = imgToResize.height;

  const canvasWidth = originalWidth * resizingFactor;
  const canvasHeight = originalHeight * resizingFactor;

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

  context.drawImage(
    imgToResize,
    0,
    0,
    originalWidth * resizingFactor,
    originalHeight * resizingFactor
  );

  return canvas.toDataURL();
}

Initialize an in-memory <canvas> with a 2D rendering context for the drawing surface.
Set height and width depending on the size of the original image to resize and the resizing factor.
Then, the resized image is drawn according to the resizing factor passed by harnessing the drawImage() function.
Finally, the resized image is returned.

Et voilà! As you can see, resizing an image in Vanilla JavaScript takes only a few lines of code.

2. Resizing in Action

Now, it is time to see the resizeImage() function in action through a simple example.
index.html

<!DOCTYPE html>
<html>
  <body>
    <h1>Image Resizer</h1>
    <p>
      Please, upload an image and it will be shown both original and resized by
      50%
    </p>
    <input id="upload" type="file" accept="image/*" required />
    <div id="images">
      <h2>Original image</h2>
      <img id="imgToResize" />
      <h2>Resized image</h2>
      <img id="resizedImage" />
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

src/index.js

// hiding the div that will contain the images
const imagesDiv = document.querySelector('#images');
imagesDiv.style.visibility = 'hidden';

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

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

  // resizing the image and displaying it
  const resizedImage = document.querySelector('#resizedImage');
  resizedImage.src = resizeImage(imageToResize, this);

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

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

function resizeImage(imgToResize, resizingFactor = 0.5) {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');

  const originalWidth = imgToResize.width;
  const originalHeight = imgToResize.height;

  const canvasWidth = originalWidth * resizingFactor;
  const canvasHeight = originalHeight * resizingFactor;

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

  context.drawImage(
    imgToResize,
    0,
    0,
    originalWidth * resizingFactor,
    originalHeight * resizingFactor
  );

  return canvas.toDataURL();
}

The <input> element allows users to upload an image, then passed to the resizeImage() function. This is in charge of generating the resized image, which is finally shown below the original image. Please, note that this example is the same presented in the fiddle placed at the beginning of the article.

Final Considerations

Resizing an image in Vanilla JavaScript is definitely an easy task. No external libraries are required, and you can achieve your goal with just a few lines of code. This is great! On the other hand, every browser applies a different image interpolation algorithm behind the scenes. This leads to results depending on the user’s preferred browser. Not only might this be a problem in terms of consistency, but also a source of quality issues. Plus, such a simple task can turn into a nightmare if you wanted to implement a proper UI, allowing users to resize an image graphically.

In that case, a commercial and comprehensive solution like [PhotoEditorSDK](https://img.ly/products/photo-sdk/) is a more beneficial approach. In fact, you should no longer have to worry about inconsistencies or quality issues. Moreover, with only one library, you get several tools to treat images without having to implement the application’s UI. Also, whenever you need help, you can ask for support from the IMG.LY developers who built the SDK.

Resizing an Image with PhotoEditor SDK

First, you should read this article from the official documentation on how to get started with PhotoEditorSDK in HTML and JavaScript. Then, by using the transform tool you can perform cropping, resizing, flipping, and rotation operations with just one feature. This way, you should be able to achieve the desired result:

Conclusion

In this article, we looked at how to resize an image with JavaScript. Resizing an image by using <canvas> is not a complex task, although this solution might introduce quality issues. As we have seen, you can resize an image effortlessly and with only a handful of lines of code. On the other hand, every browser applies a different resizing algorithm, leading to inconsistent results. For consistent and reliable results, you should take advantage of a more advanced and complete 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.

My digital journey to #nfts

Vanessa — Fri, 26 Mar 2021 11:07:26 GMT

The Beginning

In my first years as a graphic designer, my world consisted mainly of paper, books and magazines. To give you an example, my bachelor and master thesis were both printed books (Yes - I am that old). So i was born analog, but i wanted to become more digital.

In the last three years, I have done my own personal digitalization and transformed from the analog design world into a digital one to the point that last weekend I created and launched my first crypto art - an NFT.

But First – What is an NFT?

I have read about NFTs before from time to time. Then, two weeks ago, the internet went wild about the news that a well-known New York gallery sold a digital painting worth $69 million for the first time. And this made me thinking a bit more about the subject again and I decided to join the hype. Let’s get rich!

But what is a NFT and how does it work? NFT stands for Non-Fungible Token which is secured by the Ethereum blockchain. 1 ETH is a fungible token – like bitcoin – a digital currency that is exchangeable. However, in contrast to ETH, a NFT can represent ownership of unique items. These unique items can be digital art like an image or a video, or any other digital asset. Within the process of creating an NFT, the digital asset will get connected to the token - which is called “minting”. Even though that image can easily be copied or recreated, the NFT can prove to a third-party that a specific person or entity owns this token. This makes digital art verifiable and unique.

What excites me so much about NFTs is that they make it possible to give digital art a real value. In addition it gives digital artists the opportunity to be perceived as artists in the same way as their colleagues who paint with brush and paint on canvas. So this means that digital art can finally step up to it’s physical counterpart. The beginning of a whole new era of art.

Currently it feels like that one can basically mint everything to an NFT and people go crazy about it. Why? Because people always liked to collect special and rare things like stamps, pokemon cards, oil paintings and so on - the list is basically endless.

Going digital

Circling back to my own story about transforming from an analog world to a digital one, the first step was to make my work more digital. Three years ago I gave up being self-employment and started working as an art director at IMG.LY. We do develop software for photo and video editing. Our first product was the Photoeditor SDK later followed by our Videoeditor SDK. However, last year we started defining our goals and begin the journey to transform our editor into a completely new tool that combines photo editing with automatic layouting. Automated and simplified processes make it possible for designer to focus more on the development of cool concepts instead of struggling with the technology itself.

Some time ago - while testing the functions of our tool, I created a series of pixel-art images. In my opinion this pixel-art style fits the topic of NFTs quite well, so that I created a small series with three matching images, which got the name “Life behind Pixels”.

One of these pictures was supposed to be my first NFT, but I had to realize that my digital transformation still has some gaps that I need to fill. There are various marketplaces that function like galleries, where one can upload their digital art for everyone to see and be verified as an official artist. I chose Rarible because it has a rather small community compared to the big ones like e.g. OpenSea and it is possible for everyone to join. Other marketplaces tend to select artists they work with based on the number of followers and how well-known they are in the community.

If you want to create an NFT – so called “minting” it, you have to connect your digital wallet to one of these platforms and pay a fee (gas) of about $60 in Ethereum. Unfortunately I don’t have a wallet or even digital money, so what can I do? I asked my boyfriend who works as firmware engineer in the 9elements cyber security department and who was of course already deep in the crypto universe and bang: My first NFT was minted. Now I’m even more fired up.

And although this NFT topic is on everyone’s lips in the digital scene right now, I recently noticed in a clubhouse talk with other designers that this hasn’t arrived everywhere yet.

And now what?

First we are curious to see what happens with our first NFT and we are trying to find out what else is possible with it. Instead of attaching unique information to a simple image file and making it unique, there is a way more potential behind it: NFTs can be minted in a way that allows them to react to their environment using their integrated code. For example they can show a different state in the morning, at noon and in the evening or their appearance changes due to the number of attached wallets.

Right now we’re looking at everything there is to know about NFT and blockchain to develop more crypto art and be part of the new era. Our plan is to create a new piece of crypto art every month. I’m trying to figure out what’s hot in crypto design right now. What do we need to stand out and be visually and technically unique?

And what are the options if you don’t have a friend working in the tech area?I think besides a monthly NFT, there could also be a monthly blogpost ;)

Also check out Instagram and Twitter for daily updates!
https://www.instagram.com/ellly_pix https://twitter.com/ellly_pix

A more technical deep dive can be found here.

Despite the fact that I am super thrilled about NFTs and that I finally generated my own, there is also a lot of controversial discussion going on about the climate impact of NFTs and the energy consumed to mint digital assets. If you like to follow up with this discussion, I put together some interesting links where you can also find some alternatives to the “minting” process:

Calculate the CO2 Footprint of your Ethereum address: https://carbon.fyi/
h ttps://www.greenpeace.org.uk/news/the-biggest-problem-with-carbon-offsetting-is-that-it-doesnt-really-work/
https://memoakten.medium.com/the-unreasonable-ecological-cost-of-cryptoart-2221d3eb2053
https://www.hicetnunc.xyz/
https://xtz.news/latest-tezos-news/getting-started-as-an-nft-artist-on-tezos-using-hicetnunc/

A Photo and Video Editor for React Native Apps

Julia — Fri, 29 May 2020 10:30:01 GMT

How to integrate a Photo and Video Editor into your React Native App

This tutorial walks you through the integration process of PhotoEditor SDK and VideoEditor SDK into your React Native app for iOS and Android. You’ll learn how to use our React Native modules to facilitate the integration and to customize our editors. For this tutorial we presume that all the necessary development tools for building an iOS and Android app are met, so make sure to complete the official React Native CLI Quickstart guides for iOS and Android beforehand.

Please make sure to acquire the licenses for PhotoEditor SDK and VideoEditor SDK before integrating them.

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

In this tutorial, we’re going to show how to integrate PhotoEditor SDK and VideoEditor SDK for iOS and Android into your React Native app. Therefore, we created React Native modules for our products to simplify this process for you as much as possible. We’re going to use VideoEditor SDK’s README, which is in most parts identical to the PhotoEditor SDK’s README, and Visual Studio Code. So, let’s get started.

First, we create a React Native project with the name “Demo” based on the default template by using the command npx react-native init Demo. The project will now be initialized and automatically install all dependencies of the current React Native version. Afterwards, we can find the new React Native project ready to use in the folder “Demo”. So, we’ll speed this up a little.

We already prepared another folder with resources and assets that we want to integrate in our app. Here we chose an image, the required licenses for our PhotoEditor SDK and VideoEditor SDK for both target platforms, a video and two logos that we will later use to show how we can customize our editors. We copy these resources into the root of our project to make the resources accessible for our app.

Now, we switch to the folder of the “Demo” project*.* We can now copy and execute the command yarn add react-native-videoeditorsdk from the README to install the dependencies to the React Native module for our VideoEditor SDK … and to the React Native module for PhotoEditor SDK by issuing the command yarn add react-native-photoeditorsdk.

Now, we’re going to set up the dependencies for our native iOS libraries. We can simply copy the command cd ios && pod install && cd .. from the README and execute it to install all iOS dependencies. They include the native PhotoEditor SDK and VideoEditor SDK libraries that are required by our React Native modules.

And now, we set up the dependencies for our native Android libraries. The required steps that we will now take are described in detail in the README.

android {
  defaultConfig {
    multiDexEnabled true
  }
}

dependencies {
  implementation ‘androidx.multidex:multidex:2.0.1’
}

We copy the lines and add them at the end of our android/app/build.gradle file. Now we need to change the superclass of our MainApplication class to enable Multidex. Next, we add the img.ly repository and the plugin by copying the following lines and add them at the top of our android/build.gradle file located in our Android folder.

buildscript {
  repositories {
    jcenter()
    maven { url "https://plugins.gradle.org/m2/" }
    maven { url "https://artifactory.img.ly/artifactory/imgly" }
  }

  dependencies {
    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
    classpath 'ly.img.android.sdk:plugin:7.1.8'
  }
}

Now, we can configure our PhotoEditor SDK and VideoEditor SDK by opening the android/app/build.gradle file and add these lines under apply plugin: “com.android.application".

apply plugin: 'ly.img.android.sdk'
apply plugin: 'kotlin-android'

// Comment out the modules you don't need, to save size.
imglyConfig {
  modules {
    include 'ui:text'
    include 'ui:focus'
    include 'ui:frame'
    include 'ui:brush'
    include 'ui:filter'
    include 'ui:sticker'
    include 'ui:overlay'
    include 'ui:transform'
    include 'ui:adjustment'
    include 'ui:text-design'
    include 'ui:video-trim'

    // This module is big, remove the serializer if you don't need that feature.
    include 'backend:serializer'

    // Remove the asset packs you don't need, these are also big in size.
    include 'assets:font-basic'
    include 'assets:frame-basic'
    include 'assets:filter-basic'
    include 'assets:overlay-basic'
    include 'assets:sticker-shapes'
    include 'assets:sticker-emoticons'
  }
}

Getting back to our iOS version, we can now launch our demo project on iOS, which will currently look like a plain React Native project that we initialized with the first command.

The main difference to an off-the-shelf React Native project is that our React Native modules are installed and ready-to-use in the App.js file once the native projects are compiled. Then, it won’t be necessary to recompile the native projects for the remainder of this tutorial. We sped up the compilation a little and here we go — our React Native app is running on the iOS simulator. Now, we do the same for the Android version and wait until the project is compiled.

Now, the demo project launched on both platforms as we can see on the right on the iOS simulator at the top, and on the Android emulator at the bottom of the screen.

We’ve decided that we want to start our photo editor by pressing a button. So next, we’re going to actually customize our React Native app by adding this button. Therefore, we open the App.js file and import the Button component in order to create a button with the title “Edit a sample image”. For now, we leave the onPress function empty.

We save the App.js file to trigger a refresh of the running apps and immediately see the result on the right. The new button appears in both, the iOS and the Android app.

Now we create a second button with the title “Edit a sample video”. This will respectively start our video editor. And again, we save the App.js file and see the second button appear on the right side.

Next, we are going to add the code that actually opens our editors when we press the buttons. Visual Studio Code automatically imported the respective React Native PhotoEditor SDK module for us at the very top of the file, while writing the code that makes use of our SDK. We do the same for the VideoEditor SDK. We use the require function to make static assets available to our app. Here, we “require” our sample image and our sample video that we copied to the app’s folder in the beginning and pass them as the first argument to our openEditor functions. The first argument can also be a regular URI.

We save the App.js file again and now we can click the buttons to start our photo editor or video editor. There we go! We still see a watermark here. The reason for this watermark is that we haven’t unlocked our SDKs so far which we will do next.

We unlock both products with our licenses to get rid of the watermark. If not unlocked, the watermark will be on both the image and video previews as well as on the exported images and videos. To unlock the products, we use the unlockWithLicense function of each SDK. In total, we need four license files, one license file for each product and platform combination. The license files should be named pesdk_license and vesdk_license with platform-specific extensions .ios.json and .android.json. React Native will then automatically pick the right file for the corresponding platform. After this, the watermarks will be removed for PhotoEditor SDK and VideoEditor SDK on both platforms. And now you can also see it in the simulator — no watermarks anymore.

In the next step, we’re going to change the configuration of the editors. If no changes are made to the configuration, our default stickers are available with the editor. To customize them, we need to import the Configuration from either the PhotoEditor SDK or VideoEditor SDK. The configurations are compatible between both products. So, for this tutorial, we decided to use the VideoEditor SDK configuration which we are now using by adding Configuration to the react-native-videoeditorsdk imports. We decided that we want to add custom stickers to our editors. Therefore we define a non-default configuration to the sticker tool.

const configuration: Configuration = {
  sticker: {}
}

To customize the sticker assets, we need to define the sticker “categories” array. Here, we define a new category and name the identifier demo_sticker_category. These asset identifiers must always be unique. Next, we set a name for the category and we name it “Logos”.

Each category also requires a thumbnail image to be displayed in the editor. For the thumbnail, we use the React logo that we added to the folder of our app at the very beginning. Next, we define the items for this new sticker category. These items are the actual stickers that we can apply to the edited image or video. We now create a new sticker for the React logo. Therefore, we call the identifier demo_sticker_react and name it “React”. These sticker names won’t appear in the UI, but they are used for accessibility. Now, we need to define the actual image that should be used for that sticker. Here we use the React image again.

To create a second sticker, we can now copy and paste the code of the first sticker. We create a sticker with our img.ly logo and rename the identifier of the pasted code to demo_sticker_imgly. Accordingly, we set the name to “img.ly” and change the file to imgly.png.

In addition, we want to specify a non-default tint mode for our second sticker by using tintMode: TintMode.SOLID which enables us to change the color of the sticker. The TintMode type is automatically added to the VideoEditor SDK imports for us by Visual Studio Code. Now, that we completed our configuration, we need to pass it as the second argument to the openEditor functions in order to take effect.

We save the App.js file again to refresh the running apps and we can see the result live after starting a new editing session. Please note that you cannot alter the configuration of a running editor instance. You always need to start a new editing session to see configuration changes.

We want to use another feature of our SDKs which is called serialization. With the serialization feature, we can capture all image and video editing operations that are applied in the editor and export them. This allows us to import the editing operations in later sessions and continue editing. The serializations are compatible between both products as well. The input serialization is the third parameter of the openEditor functions of our SDKs and the output serialization is optionally part of their result type.

First, we check if the result is “null”. This is the case when a user clicks the “Discard” button in the editor and thus does not export an image or video. If the result is not ”null”, we know that the user exported an image or video. Then we can assign the exported serialization to the previously defined global serialization variable which will then be input to the next editing session. We copy the code and add it to the video editor as well to enable the serialization function here too.

Now, one thing is left to enable the actual serialization export in the configuration. The serialization export is disabled per default because not every user needs the serialization feature. Here, we enable it now and also change the export type to object. By doing so, the result type of the editor will contain the serialization as an object. Per default, the serialization is exported to a file and that file name is returned as part of the export result. Writing the serialization to a file is a reasonable default as serializations can be quite large, especially if large amounts of binary data for personal stickers are embedded.

Now, we can run the app on the simulator and use all the parameters that we configured in this tutorial. First, we can add our custom stickers, both the React logo and the img.ly logo. Here we can also change the colors which we enabled with the tint mode.

We can also use the text design tool to add a phrase to our image. Here we can pick different designs, so we’re trying a couple and place the text design fitting to the image and logo.

Next, we export our image with the serialization. With the serialization function enabled, it is now possible to import the editing operations into our video editor. This allows us to keep on editing because the serialization is compatible between both products. So here we can add further words to our text design. We can also put filters on our video. For example, we can choose the peach duo tone and increase the contrast a little. And here we go! We successfully integrated PhotoEditor SDK and VideoEditor SDK into our React Native app.

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

Rebuild or Report?

Daniel — Thu, 26 Apr 2018 00:00:00 GMT

Nowadays, every code project depends on various third party and additional libraries. Truth be told, we wouldn’t be able to create apps or webpages that fast if we would have to build everything from scratch. Typically, we add a library via our favored package manager and give it a go. We start using that specific library, read the docs, figure out how it works and use it for our purposes. Best case, that’s it. Unfortunately, in practice, it may turn out differently.

Make no Mistake, Mistakes happen

While we work with a specific library, we may encounter some roadblocks. Sometimes that’s due to missing or bad documentation. Or it might be due to our missing knowledge about some things. Anyway, sometimes, we eventually realize that it is not us, it was them all along. We found a mistake, a so-called bug.

A (software) bug is an error, flaw, failure or fault in a computer program or system that causes it to produce an incorrect or unexpected result, or to behave in unintended ways.

— Wikipedia

If we’re honest, our first reaction may be that we get angry at the library itself or the author, but, after acknowledging that we never wrote flawless or bug-free code, we look for a solution.

We found a Bug! Now what?

Logically, some of us start to follow the most obvious path. We throw that library away and write a replacement ourselves…not.

Ok, honestly, we may think about that, but it in most cases that is neither the right nor the best way to go. Many authors put a lot of effort into creating software libraries and shared it with us. So, most undoubtedly, a lot of knowledge, work, testing and time has already gone into it.

Therefore, there is a high chance that rewriting that library from scratch is the least favorable option.

So, what should we do?

Worst case scenario: We don’t do anything and leave it be. But this way it won’t get fixed, the authors won’t be aware of it, and others will encounter the same bug and spend unnecessary time on it.

Best case scenario: We track down the bug, propose a solution to the authors and hope they will acknowledge and accept it. But sometimes we don’t have the means, options or time to fix the bug. Consequently, the second best way is telling the authors about the bug you found. But wait, before we file a bug we should ask ourselves the following question

Are we running the latest version of the library?

Writing good Bug Reports helps Yourself and Others

We at IMG.LY provide a software library for photo editing. Thus, we are both library authors as well as users.

I would like to say that we don’t ever make mistakes, but truth be told, everyone does.

As you can imagine, providing photo editing capabilities results in a lot of code for rendering, UI, or other business logic. Although all the usual quality checks are in place, mistakes or unthought-of use-cases manifest in bugs, no matter what.

Consequently, we get bug reports. Now, unfortunately, an awful lot of said bug reports only contain a single line that literally says:

“XYZ does not work.”

While, this is far better than not reporting it at all, it doesn’t help much in hunting down the bug.

With bug reports like this, we spend a lot of our time on trying to reproduce the bug or asking for details on how to reproduce it. That time would be better spent on improving the libraries or helping other users. However, with just a little help we’d be able to find bugs faster and be more effective. So, what should a proper bug report look like? From our point of view, bug reports should be comprised out of the following things:

One bug at a time,
the context of the bug,
a minimal runnable example, and
the steps to reproduce the bug.

One bug at a time

In reality, one may encounter multiple bugs at the same time, and might wish to drop them at the library authors all at once. However, it is far better not to combine multiple problems even if they seem to be alike. So, one should always report each bug individually.

Describing the context

Often forgotten when reporting bugs is to describe the context the bug occurs in. For us, a good bug report contains at least the following specifications:

A description,
the environment
the actual and desired output, and
attachments (e.g. Screenshots).

Description

First thing we need to know is what the bug is about. This includes:

A short meaningful title of the bug (e.g. Exporting image after crop and rotate corrupts output), and
a description of the bug which explains the error in an understandable manner.

Environment

Due to the nature of web and app development, software libraries can be used in many different environments. All of which have their own little differences and quirks. Thus, it is very helpful to include information about the environment, including:

the used operating system’s version (e.g. iOS 10.1),
the device it is running on (e.g. iPhone 7 32GB),
the used browser or runtime environment and its version (e.g. Chrome 65.0.3325.181 (64-Bit) or Node.js 8.11.1 ), and not to forget
the name of the library and its version/variant (e.g. pesdk-html5 4.1.3).

Actual Output and Expected Output

Often, an experienced developer can classify the bug on the basis of the resulting error or error output only. Therefore, a useful bug report should provide:

the actual output that is is observed, and
the desired output that should be generated

Attachments

Additionally, attachments are very helpful to pinpoint the bug. Helpful attachments can be but are not limited to:

error output or logs generated by the compiler and build system, console output, and stack trace, and whenever the bug results in something that is visual recognizable, and
screenshots showing the issue.

Reproducibility is key

While all aforementioned greatly assists to narrow down the context in which the bug appears there is one thing that helps even more:

Even if it seems trivial to reproduce, a good bug report should come with a minimal runnable example that produces the bug in question and a description of how to trigger it.

Providing a minimal running Example

So, one should strip away everything from the current code that isn’t necessary and keep it simple. The faster we and other library maintainers can track down an error, the sooner it’s going to be fixed.

Also, probably it was already necessary to narrow down the issue so stripping it out into a minimal example is not too much work. If possible, the Gist should be provided via a GitHub repository or any other similar sharing system.

Keep it simple to trigger the Bug and be specific about it

While having a minimal example is already lovely, sometimes it needs a bit more than just code to trigger the bug. Writing down precise instructions on how to trigger it is not always easy but being specific dramatically helps to get to it.

That is why one should summarize the problem in brevity and with utmost precision.

Conclusions

From our point of view these are the most important things one needs to consider when reporting a bug. Most certainly, the requirements change and need to be adapted for different types of software. We’d really like your feedback on this. So, if you have any comments and additions please let us know.

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

Code – IMG.LY Blog

How to Trim and Crop Video in Swift

Anatomy of a Video File

Cropping Video to a Rectangle

Trimming the Time of a Video

Exporting the Video

Going Further

Wrapping Up

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 Resize an Image in React

Prerequisites

Resizing an Image with react-image-file-resizer

1. Creating a React Project

2. Installing react-image-file-resizer

3. Building the Image Resizer Component

4. Putting It All Together

Final Considerations on react-image-file-resizer

Resizing an Image with PhotoEditorSDK

Conclusion

How To Resize an Image With JavaScript

Resizing Images Using <canvas>

1. Implementing the Resizing Logic

2. Resizing in Action

Final Considerations

Resizing an Image with PhotoEditor SDK

Conclusion

My digital journey to #nfts

The Beginning

But First – What is an NFT?

Going digital

And now what?

A Photo and Video Editor for React Native Apps

How to integrate a Photo and Video Editor into your React Native App

Rebuild or Report?

Make no Mistake, Mistakes happen

We found a Bug! Now what?

Writing good Bug Reports helps Yourself and Others

One bug at a time

Describing the context

Description

Environment

Actual Output and Expected Output

Attachments

Reproducibility is key

Providing a minimal running Example

Keep it simple to trigger the Bug and be specific about it

Conclusions

Drawing on Images With `<canvas>`

Drawing on an Image with `photoeditorsdk`

Resizing an Image with `react-image-file-resizer`

2. Installing `react-image-file-resizer`

Final Considerations on `react-image-file-resizer`

Resizing Images Using `<canvas>`