Posted on

SVG to PNG

Convert SVG to PNG with a single line of code

HTML element img accepts an SVG file as its source, therefore you can convert SVG to PNG with a single line of code:

<img src="svg-logo.svg" />

Then you can save it as a PNG image. This way is not only the simplest, but also gets the same picture quality as the SVG file.

You can also set a customized size for it:

<img src="svg-logo.svg" width="256" height="256" />

Demo:

Note: If your SVG references a font, the font will be replaced by a default one in the image, meaning referenced fonts are not supported.

Other methods

Using HTML5 canvas

svg to png provides a more complicated method, it uses HTML5 canvas’s drawImage method to draw the SVG on canvas and gets an encoded PNG from it.

var svg     = document.querySelector('#svg'),
    img     = document.querySelector('#png'),
    canvas   = document.createElement('canvas'),   // New element
    context  = can.getContext('2d'),
    loader   = new Image;

loader.width  = canvas.width  = tgtImage.width;
loader.height = canvas.height = tgtImage.height;
loader.onload = function(){
  context.drawImage(loader, 0, 0, loader.width, loader.height);
  tgtImage.src = can.toDataURL();
};
var svgXML = (new XMLSerializer).serializeToString(svg);
loader.src = 'data:image/svg+xml,' + encodeURIComponent(svgXML);

I found there will be a loss of picture quality obtained in this way. It also does not support referenced fonts.

svgexport

svgexport is a open-source nodejs module. You need to install node.js and install svgexport module before using it.

The biggest issue is that it does not support referencing elements in SVG.

Posted on

JavaScript Array Operations with Examples

JavaScript Array Operations with Examples

This article illustrates the operations of JavaScript Array. These examples include built-in APIs and some custom functions, such as groupBy, union, objectToArray, etc.

Note if fruits is not initialized in examples, it is:

let fruits = ['Apple', 'Banana'];

Basic operations

Create

let fruits = ['Apple', 'Banana'];
let length = fruits.length;
// 2

let fruits1 = [];
fruits1.push('Apple'); // ['Apple']
fruits1.push('Banada');// ['Apple', 'Banana'];

let fruits2 = new Array('Apple', 'Banana');

// Creates an array of 2 empty slots, not slots with actual undefined values
let fruit3 = new Array(2); 
console.log(fruits3);
// Array [undefined, undefined]

Create an two-dimensional array

let board = [ 
  ['A0','A1','A2'],
  ['B0','B1','B2'],
  ['C0','C1','C2']];

Set values

Set values directly

fruits[1] = 'Blackberry';

If you set a value at a new indexed position which is not contained in the array. The length of the array will be updated accordingly.

let fruits = ['Apple', 'Banana'];
fruits[4] = 'Damson';
console.log(fruits); // ['Apple', 'Banana', undefined, undefined, 'Damson'];
console.log(furits.length); // 5
console.log(Object.keys(fruits));  // ['0', '1', '4']

**Fill values **

The fill() method fills (modifies) all the elements of an array from a start index (default zero) to an end
index (default array length) with a static value. It returns the modified array.

Syntax: fill(value[, start[, end]])

let array1 = [1, 2, 3, 4];

// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// expected output: [1, 2, 0, 0]

// fill with 5 from position 1
console.log(array1.fill(5, 1));
// expected output: [1, 5, 5, 5]

console.log(array1.fill(6));
// expected output: [6, 6, 6, 6]

Access

Access an element through index

let first = fruits[0];
// Apple

let last = fruits[fruits.length - 1];
// Banana

Note: It is possible to quote the array indexes, such as fruits['0'], although it is not necessary. The 0 in fruits[0] is coerced into a string by the JavaScript engine through an implicit toString conversion.

Get index of an element

let index = fruits.indexOf('Banana');
// 1

Add

Add to the end of an array

// push() changes the length and returns the new length
let newLength = fruits.push('Coconut'); // ["Apple", "Banana", "Coconut"]
// 3

Add to the front of an array

// unshift() changes the length and returns the new length
let newLength = fruits.unshift('Avocado');// ["Avocado", "Apple", "Banana"];
// 3

Add by setting a value at a new index position

let fruits = ['Apple', 'Banana'];
fruits[4] = 'Damson';
console.log(fruits); // ['Apple', 'Banana', undefined, undefined, 'Damson'];
console.log(furits.length); // 5
console.log(Object.keys(fruits));  // ['0', '1', '4']

When setting a property on a JavaScript array when the property is an valid array index and that index is outside the current bounds of the array, the engine will update the array’s length property accordingly.

Add a value at a specific position

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

let fruits = ['Apple', 'Banada', 'Coconut'];

// Remove 0 item from index of 1, and adding new item 'Blueberry'
let deletedItems = fruits.splice(1, 0, 'Blueberry'); // Add at index 
// deletedItems: []
// fruits: ['Apple', 'Blueberry', Banada', 'Coconut']

Remove

Remove from the end of an array

// pop() returns the removed element, it changes the length
// remove Banada from the end
let last = fruits.pop(); // ["Apple"];
// Banada

Remove from the front of an array

// shift() returns the removed element, it changes the length
// remove Apple from the front
let first = fruits.shift(); // ["Banana"];
// Apple

Loop

There are several ways to loop over an array. Use map、reduce、filter functions first if they satisfy your needs, otherwise use below loop operations. Although these function are slower, they are easier to code、read , maintain and test. See for vs for each vs (map, reduce, filter, find) for details.

Use for loop

for (let i = 0; i < furits.length; ++i) {
    console.log(furits[i]);
}

Use forEach method

The forEach() method executes a provided callback function once for each array element.

// The parameters of index and array are optional
fruits.forEach(function(currenValue, index, array) {
  console.log(curentValue, index);
});
// "Apple" 0
// "Banada" 1

Note: It is not invoked for index properties that have been deleted or are uninitialized. For example:

const arraySparse = [1,3,,7];
let numCallbackRuns = 0;

arraySparse.forEach(function(element){
  console.log(element);
  numCallbackRuns++;
});
console.log(arraySparse); // 3

Formatted print

Use console.table

console.table displays tabular data as a table. This feature is available in Web Workers.

console.table(['Apple', 'Banada']);
console.table(board); // prints a two-demensional array

Write your own function

function printArrayElements(element, index, array) {
  console.log('a[' + index + '] = ' + element);
}

fruits.forEach(printArrayElements);
// a[0] = "Apple"
// a[1] = "Banada"

Other Operations

Copy

Copy a new array

The slice(begin, end) method returns a shallow copy of a portion of an array into a new array object (end not included) . The original array will not be modified.

let fruits = ['Apple', 'Banada'];
let shallowCopy = fruits.slice(); // this is how to make a copy
// ["Apple", "Banada"]

Syntax: slice([begin[, end]]).

Copy elements to the same array

The copyWithin(target, start, end) method shallow copies part of an array to target location in the same array and returns it without modifying its length.

Syntax: copyWithin(target[, start[, end]]).

let array1 = ['a', 'b', 'c', 'd', 'e'];

// copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// expected output: Array ["d", "b", "c", "d", "e"]

// copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// expected output: Array ["d", "d", "e", "d", "e"]

Filter

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

let fruits = ['Apple', 'Banana', 'Blueberry'];
let bfruits = fruits.filter(val => val.startsWith('B'));
// ['Banana', 'Blueberray']

Find

Find the index

findIndex()method returns the index of the first element in the array that satisfies the provided testing function.

let furits = ['Apple', 'Banana'];

function startsWithB(element) {
  return element.startsWith('B');
}

console.log(fruits.findIndex(startsWithB));
// expected output: 1

Find the element

The find() method returns the value of the first element in the array that satisfies the provided testing function. Otherwise undefined is returned.

let array1 = [5, 12, 8, 130, 44];

let elemnent = array1.find(function(element) {
  return element > 10;
});

console.log(element);
// 12

Check whether an array includes a certain value

The includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

Syntax: includes(valueToFind[, fromIndex])

let fruits = ['Apple', 'Banana'];
console.log(fruits.includes('Orange'));// false
console.log(fruits.includes('App'));// false

Note: When comparing strings and characters, includes() is case-sensitive.

Note: Technically speaking, includes() uses the sameValueZero algorithm to determine whether the given element is found.

Join

The join(sperator) method creates and returns a new string by concatenating all of the elements in an array (or an array-like object), separated by commas or a specified separator string

let fruits = ['Apple', 'Banada'];

console.log(fruits.join());
// expected output: "Apple,Banada"

console.log(elements.join('-'));
// expected output: "Apple-Banada"

Merge / Concat

The concat()method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

let array1 = ['a', 'b', 'c'];
let array2 = ['d', 'e', 'f'];

console.log(array1.concat(array2));
// Array ["a", "b", "c", "d", "e", "f"]

Sort

Reverse

The reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first.

let array1 = ['one', 'two', 'three'];
let reversed = array1.reverse();
console.log(array1); // Array ['three', 'two', 'one']
console.log(reversed); // Array ['three', 'two', 'one']

Check/Test

Every: Test whether all elements pass provided function

The every() method tests whether all elements in the array pass the test implemented by the provided function.

function isBelowThreshold(currentValue) {
  return currentValue < 40;
}

let array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// true

Note: This method returns true for any condition put on an empty array.

Some: Test whether at least some elements pass provided function

The some() method tests whether at least one element in the array passes the test implemented by the provided function.

let even = function(element) {
  // checks whether an element is even
  return element % 2 === 0;
};

let array = [1, 2, 3, 4, 5];
console.log(array.some(even));
// true

Note: This method returns false for any condition put on an empty array.

isArray

The Array.isArray() method determines whether the passed value is an Array.

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

isArray vs instance of

When checking for Array instance, Array.isArray is preferred over instanceof because it works through iframes.

String to Array, Map to Array, Set to Array

(Array.from('foo'));
// ['f', 'o', 'o']

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

Array.from() lets you create Arrays from:

  • array-like objects (objects with a length property and indexed elements) or
  • iterable objects (objects where you can get its elements, such as Map and Set)
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// ['foo', 'bar', 'baz']

Other loops: map vs reduce

map

map() method creates a new array with the results of calling a provided function on every element in the calling array.

Syntax:

let new_array = arr.map(function callback(currentValue[, index[, array]]) {
    // Return element for new_array
}[, thisArg]
  • currentValue, the current value in the array
  • index
  • array, the array itself
  • thisArg, Value to use as this when executing callback.

Examples:

[1, 4, 9].map((val) => {
  return val * 2;
});
// It creates a new array: [2, 8, 18]

reduce

The reduce() method executes a callback on each element of the array, resulting in a single output value.

Syntax:

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
  • accumulator

    The accumulator accumulates the callback’s return values. It is the accumulated value previously returned in the last invocation of the callback, or initialValue.

  • currentValue, the current element being processed in the array.

  • index, the index of the current element being processed in the array.

  • array, the array reduce() was called upon.

  • initialValue

    A value to use as the first argument to the first call of the callback. If no initialValue is supplied, the first element in the array will be used and skipped. Calling reduce() on an empty array without an initialValue will throw a TypeError.

Examples:

// Get sum of an array
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

Custom operations

Filter an Objects Array by fields

filter is an object which defines the filter condition. If an object in the array has the properties with the same values in filter, it will be filtered out.

const filterArray = (arr, filter) => {
  var data = [];
  for (let obj of arr) {
    let filtered = true;
    for (let p in filter) { // for each property in filter
      if (obj[p] != filter[p]) {
        filtered = false;
        break;
      }
    }

    if (filtered) {
      data.push(obj);
    }
  } // for

  return data;
}

Examples:

let employees = [
  {name: 'Jane', gender: 'Female'},
  {name: 'Jim', gender: 'Male' },
  {name: 'Lily', gender: 'Female'}
};
filterArray(employees, {gender: 'Female'});
// [{name: 'Jane', gender: 'Female'}, {name: 'Lily', gender: 'Female'}]

GroupBy

The following groupBy groups objects in an array by a field.

const groupBy = (arr, field) => {
  return arr.reduce(function (acc, obj) {
    let key = obj[field];
    acc[key] = acc[key] || [];
    acc[key].push(obj);
    return acc;
  }, {});
}

Examples:

let employees = [
  {name: 'Jane', gender: 'Female'},
  {name: 'Jim', gender: 'Male' },
  {name: 'Lily', gender: 'Female'}
];
groupBy(employees, 'gender');
// { 
//   'Female': [{name: 'Jane', gender: 'Female'}, {name: 'Lily', gender: 'Female'}],
//   'Male': [{name: 'Jim', gender: 'Male' }]
// }

If you want an array of grouped objects:

const groupBy = (arr, field) => {
  let groups = arr.reduce((acc, obj) => {
    let key = obj[field];
    acc[key] = acc[key] || [];
    acc[key].push(obj);
    return acc;
  }, {});

  return Object.keys(groups).map( group => {
    return groups[group];
  });
}

The result will be:

// [
//   [{name: 'Jane', gender: 'Female'}, {name: 'Lily', gender: 'Female'}],
//   [{name: 'Jim', gender: 'Male' }]
// ]

A more generic version

Below code (from javascript codesnipt) is a more generic version. It accepts an array of basic types or objects. It has 2 processes:

  1. Use map to generate a new array. Here arr is the array, and f can be a function or a field name by which it is grouped.
  2. Use reduce function to produce a object in which a field indicates a group.
const groupBy = (arr, f) =>
  arr.map(typeof f === 'function' ? f : val => val[f]).reduce((acc, val, i) => {
    acc[val] = (acc[val] || []).concat(arr[i]);
    return acc;
  }, {});

Examples:

groupBy([6.1, 4.2, 6.3], Math.floor); // {4: [4.2], 6: [6.1, 6.3]}
groupBy(['one', 'two', 'three'], 'length'); // {3: ['one', 'two'], 5: ['three']}

Of course it can be completed in one loop:

const groupBy = (arr, f) => {
  return arr.reduce((acc, val) => {
    let key = (typeof f === 'function') ? f(val) : val[f]).
    acc[key] = acc[key] || [];
    acc[key].push(val);
    return acc;
  }, {});
}

Union

Union operation returns each item in any of a and b once.

const union = (a, b) => Array.from(new Set([...a, ...b]));

Examples:

union([1, 2, 3], [4, 3, 2]); 
// [1,2,3,4]

The union above works only for primitive types. You can provides a comparison function to union other types.

const unionWith = (a, b, comp) =>
  Array.from(new Set([...a, ...b.filter(x => a.findIndex(y => comp(x, y)) === -1)]));

It filters the elements that does not appear in a from b, then makes a merge operation.

Array to Set

let set = new Set(['Apple', 'Banana', 'Apple']);
// ('Apple', 'Banana')

Unique Values in Array

const uniqueValues(arr) => [...new Set(arr)];

Object to Array

This operation convert an object to an array.

let objectToArray = obj => {
  Object.keys(obj).map(val => {
    return obj[val];
  }
}

Reference:

  • JavaScript Array. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
  • JavaScript code snippet. https://github.com/30-seconds/30-seconds-of-code
Posted on

How to generate a QR Code and display it in a popup box

Here it will show you how to generate a QR Code using javascript and display it in a popup box with bootstrap. The effect is as below:

qr code sample
qr code demo is a live demo.

Use qrcode.js to generate a QR Code

Using javascript to generate a QR Code reduces the server load. qrcode.js is such a javascript library for making QR Code. It supports cross-browser and has no dependencies.

Its usage is simple, just add a tag in html and use makeCode() method of QRCode object to generate a QR Code within the tag:

<div id="qrcode"></div>
<script type="text/javascript" src="./qrcode.min.js"></script>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
    width: 128,
    height: 128
});
qrcode.makeCode("https://www.gloomycorner.com")
</script>

Display QR Code with bootstrap popover component

Bootstrap is the most popular HTML, CSS, and JS library developed by twitter. It depends on jQuery library. Its popover component popups a box to display something when a button is clicked. We can use it to popup the generated QR Code above.

Its basic usage is as below:

<a class="btn btn-success" tabindex="0" title="popover" role="button" data-toggle="popover" data-trigger="focus" data-content="content">popover</a>
<script>
    jQuery(document).ready(function(){  
        $('[data-toggle="popover"]').popover();
    });
</script>

Below is a full example to popover a QR Code generated by qrcode.js (Remember to download qrcode.js library before you use the code):

<div class="container">
    <h1>Demo: generating a QR Code and display it in a popup box</h1>
    <p>Click below button to popover the QR Code generated by qrcode.min.js:</p>

    <a class="btn btn-success" tabindex="0" title="QR Code" role="button" data-toggle="popover" data-trigger="focus" data-placement="bottom" data-url="https://www.gloomycorner.com">Popover QR Code</a>
    <div id="qrcode" style="display: none; width: auto; height: auto; padding: 15px;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script type="text/javascript" src="./qrcode.min.js"></script>
<script type="text/javascript">
    var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 120,
            height : 120
    });
    function makeQrcode(e) {
        qrcode.makeCode(e.attr("data-url"));
    }
    jQuery(document).ready(function(){     
        jQuery("[data-toggle='popover']").popover(
            options={
                content: jQuery("#qrcode"),
                html: true // important! popover html content (tag: "#qrcode") which contains an image
            }
        );

        jQuery("[data-toggle='popover']").on("show.bs.popover", function(e) {
            makeQrcode(jQuery(this));
            jQuery("#qrcode").show();
        });
    });
</script>

The idea in above example is :

  • Add a hidden tag (i.e. <div id="qrcode"></div>) for holding the QR Code that will be generated.
  • When the button that popups a box is clicked, pass its data-url value to makeQrcode() method to generate the QR Code. Then unhide the tag of qrcode.

Note: Remember to download the qrcode.js library and replace with your own location before you use the code.