Skip to content

Instantly share code, notes, and snippets.

@mikecao
Created December 16, 2015 07:25
Show Gist options
  • Save mikecao/65d9fc92dc7197cb8a7c to your computer and use it in GitHub Desktop.
Save mikecao/65d9fc92dc7197cb8a7c to your computer and use it in GitHub Desktop.
Javascript function for sharpening images.
function sharpen(ctx, w, h, mix) {
var x, sx, sy, r, g, b, a, dstOff, srcOff, wt, cx, cy, scy, scx,
weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
katet = Math.round(Math.sqrt(weights.length)),
half = (katet * 0.5) | 0,
dstData = ctx.createImageData(w, h),
dstBuff = dstData.data,
srcBuff = ctx.getImageData(0, 0, w, h).data,
y = h;
while (y--) {
x = w;
while (x--) {
sy = y;
sx = x;
dstOff = (y * w + x) * 4;
r = 0;
g = 0;
b = 0;
a = 0;
for (cy = 0; cy < katet; cy++) {
for (cx = 0; cx < katet; cx++) {
scy = sy + cy - half;
scx = sx + cx - half;
if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
srcOff = (scy * w + scx) * 4;
wt = weights[cy * katet + cx];
r += srcBuff[srcOff] * wt;
g += srcBuff[srcOff + 1] * wt;
b += srcBuff[srcOff + 2] * wt;
a += srcBuff[srcOff + 3] * wt;
}
}
}
dstBuff[dstOff] = r * mix + srcBuff[dstOff] * (1 - mix);
dstBuff[dstOff + 1] = g * mix + srcBuff[dstOff + 1] * (1 - mix);
dstBuff[dstOff + 2] = b * mix + srcBuff[dstOff + 2] * (1 - mix);
dstBuff[dstOff + 3] = srcBuff[dstOff + 3];
}
}
ctx.putImageData(dstData, 0, 0);
}
@leegee
Copy link

leegee commented Sep 19, 2018

Or you could use the SVG convolution matrix

@amnweb
Copy link

amnweb commented Sep 9, 2019

How to get rid of this border or edge sharpening?

@cthart
Copy link

cthart commented Nov 5, 2020

Or you could use the SVG convolution matrix

Does this make the sharpened image "visible" to any other code analysing the image later? Or is it just that what is visible on the screen becomes sharper?

@DaniAsh551
Copy link

Or you could use the SVG convolution matrix

Does this make the sharpened image "visible" to any other code analysing the image later? Or is it just that what is visible on the screen becomes sharper?

The result should be baked into the imageData of the canvas, so any code that is reading the imageData after the image has been sharpened should get the sharpened image. Its not just a visual trick, its visible in code/data. Hope this helps.

@jaredatdannyronsrescue
Copy link

jaredatdannyronsrescue commented Sep 24, 2022

@forumwt This version prevents the changing the color of the edges:

  export const sharpen = (ctx, w, h, mix) => {
    var x, sx, sy, r, g, b, a, dstOff, srcOff, wt, cx, cy, scy, scx,
      weights = [0, -1, 0, -1, 5, -1, 0, -1, 0],
      katet = Math.round(Math.sqrt(weights.length)),
      half = (katet * 0.5) | 0,
      dstData = ctx.createImageData(w, h),
      dstBuff = dstData.data,
      srcBuff = ctx.getImageData(0, 0, w, h).data,
      y = h;
    while (y--) {
      x = w;
      while (x--) {
        sy = y;
        sx = x;
        dstOff = (y * w + x) * 4;
        r = 0;
        g = 0;
        b = 0;
        a = 0;
        if(x>0 && y>0 && x<w-1 && y<h-1) {
          for (cy = 0; cy < katet; cy++) {
            for (cx = 0; cx < katet; cx++) {
              scy = sy + cy - half;
              scx = sx + cx - half;
  
              if (scy >= 0 && scy < h && scx >= 0 && scx < w) {
                srcOff = (scy * w + scx) * 4;
                wt = weights[cy * katet + cx];
  
                r += srcBuff[srcOff] * wt;
                g += srcBuff[srcOff + 1] * wt;
                b += srcBuff[srcOff + 2] * wt;
                a += srcBuff[srcOff + 3] * wt;
              }
            }
          }
  
          dstBuff[dstOff] = r * mix + srcBuff[dstOff] * (1 - mix);
          dstBuff[dstOff + 1] = g * mix + srcBuff[dstOff + 1] * (1 - mix);
          dstBuff[dstOff + 2] = b * mix + srcBuff[dstOff + 2] * (1 - mix);
          dstBuff[dstOff + 3] = srcBuff[dstOff + 3];
        } else {
          dstBuff[dstOff] = srcBuff[dstOff];
          dstBuff[dstOff + 1] = srcBuff[dstOff + 1];
          dstBuff[dstOff + 2] = srcBuff[dstOff + 2];
          dstBuff[dstOff + 3] = srcBuff[dstOff + 3];
        }
      }
    }
  
      ctx.putImageData(dstData, 0, 0);
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment