Issue viliusle#266 - Draw border by analyising the pixel data

Author: kmanaseryan

src/js/libs/image-border-effect.js

@@ -0,0 +1,64 @@
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+    return result
+        ? [
+              parseInt(result[1], 16),
+              parseInt(result[2], 16),
+              parseInt(result[3], 16),
+          ]
+        : [0, 0, 0];
+}
+
+const drawBorder = (ctx, hexColor) => {
+    const width = ctx.canvas.width,
+        height = ctx.canvas.height;
+    const imageData = ctx.getImageData(0, 0, width, height);
+
+    const dataCopy = new Uint8ClampedArray(imageData.data);
+    const length = imageData.data.length;
+
+    const changeColor = (position) => {
+        if (imageData.data[position + 3] === 0) {
+            dataCopy.set([...hexToRgb(hexColor), 255], position);
+        }
+    };
+
+    for (let i = 0; i < length; i += 4) {
+        const top = i - width * 4;
+        const bottom = i + width * 4;
+        const left = i - 4;
+        const right = i + 4;
+        const topLeftCorner = i - width * 4 - 4;
+        const topRightCorner = i - width * 4 + 4;
+        const bottomLeftCorner = i + width * 4 - 4;
+        const bottomRightCorner = i + width * 4 + 4;
+
+        let isNoneTransparent = imageData.data[i + 3] > 0;
+        if (
+            !isNoneTransparent ||
+            i % (width * 4) === 0 ||
+            i + width * 4 >= length
+        ) {
+            continue;
+        }
+
+        // Change left, top, right and bottom neighbors colors if they are transparent
+        changeColor(left);
+        changeColor(top);
+        changeColor(right);
+        changeColor(bottom);
+
+        // Changes corner neighbors colors if they are transparent
+        changeColor(topLeftCorner);
+        changeColor(topRightCorner);
+        changeColor(bottomLeftCorner);
+        changeColor(bottomRightCorner);
+    }
+
+    imageData.data.set(dataCopy);
+
+    return imageData;
+};
+
+export default drawBorder;

src/js/modules/effects/borders.js

@@ -4,6 +4,7 @@ import Base_layers_class from "./../../core/base-layers.js";
 import Dialog_class from "./../../libs/popup.js";
 import alertify from "./../../../../node_modules/alertifyjs/build/alertify.min.js";
 import Effects_browser_class from "./browser";
+import drawBorder from "../../libs/image-border-effect.js";
 
 class Effects_borders_class {
     constructor() {
@@ -48,7 +49,6 @@ class Effects_borders_class {
     demo(canvas_id, canvas_thumb) {
         var canvas = document.getElementById(canvas_id);
         var ctx = canvas.getContext("2d");
-
         //draw
         ctx.drawImage(
             canvas_thumb,
@@ -70,7 +70,6 @@ class Effects_borders_class {
 
     render_post(ctx, data, layer) {
         const size = Math.max(0, data.params.size);
-
         const x = layer.x;
         const y = layer.y;
         const width = parseInt(layer.width);
@@ -84,24 +83,18 @@ class Effects_borders_class {
 
         ctx.save();
 
-        //set styles
-        ctx.strokeStyle = data.params.color;
-        ctx.lineWidth = size;
+        // We need to get aspect ratio for preview canvas and for the main canvas when it gets zoom < 1
+        const aspectRatio = ctx.canvas.height / config.HEIGHT;
 
-        //draw with rotation support
-        ctx.translate(layer.x + width / 2, layer.y + height / 2);
-        ctx.rotate((layer.rotate * Math.PI) / 180);
-        const x_new = -width / 2;
-        const y_new = -height / 2;
-
-        ctx.beginPath();
-        ctx.rect(
-            x_new - size * 0.5,
-            y_new - size * 0.5,
-            width + size,
-            height + size
-        );
-        ctx.stroke();
+        let borderWidth = size * aspectRatio;
+        // This is the case when it's zoomed more than the canvas size
+        if (aspectRatio >= 1 && aspectRatio <= config.ZOOM) {
+            borderWidth = size * config.ZOOM;
+        }
+        // Draw border multiple times to get the necessary with in pixels
+        for (let i = 0; i < borderWidth; i++) {
+            ctx.putImageData(drawBorder(ctx, data.params.color), 0, 0);
+        }
 
         ctx.restore();
     }