How to use the stackblur-canvas.canvasRGB function in stackblur-canvas

To help you get started, we’ve selected a few stackblur-canvas examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ConanXie / new-tab / src / modules / Header / Wallpaper / index.jsx View on Github external
image.onload = () => {
      const { width, height } = image
      canvas.width = width
      canvas.height = height
      ctx.drawImage(image, 0, 0, width, height)
      // console.time('blur')
      canvasRGB(canvas, 0, 0, width, height, radius)
      // console.timeEnd('blur')
      canvas.toBlob(blob => {
        window.webkitRequestFileSystem(window.TEMPORARY, this.spaceSize, fs => {
          fs.root.getFile('wallpaper-blur.jpg', { create: true }, fileEntry => {
            fileEntry.createWriter(fileWriter => {
              let truncated = false
              fileWriter.onerror = e => console.error(e)
              fileWriter.onwriteend = function () {
                if (!truncated) {
                  truncated = true
                  this.truncate(this.position)
                  return
                }
                // console.log(Date.now())
                // saveSettings({ blurRadius: radius })
                if (typeof callback === 'function') {
github EnMarche / en-marche.fr / front / listeners / progressive-background.js View on Github external
on(sd, 'load', () => {
            const canvas = imgToCanvas(sd);

            stackblur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 10);

            element.style['background-image'] = `${bgPrefix}url(${canvas.toDataURL('image/png')})`;

            // Load high quality version after low quality one
            hd.src = hdSrc;

            on(hd, 'load', () => {
                element.style['background-image'] = `${bgPrefix}url(${hd.src})`;
            });
        });
    });
github damaera / react-acrylic / src / Acrylic.js View on Github external
self.canvas = canvas

          self.blurEl.appendChild(self.canvas)

          canvas.style.position = 'absolute'
          const clientRect = canvas.getBoundingClientRect()

          canvas.style.top = `${-clientRect.top + window.scrollY}px`
          canvas.style.left = `${-clientRect.left + window.scrollX}px`
          self.canvas.style.transform = `translate(-${window.scrollX}px, -${window.scrollY}px)`
          if (firstTime) {
          }

          
          // blurring body
          StackBlur.canvasRGB(
            canvas,
            0,
            0,
            canvas.width,
            canvas.height,
            self.props.blur
          )
        }
      })
github lifechurch / melos / nodejs / snapshot-image-2018.js View on Github external
drawRightPane() {
		const ctx = this.ctx;
		const rightGradient = ctx.createLinearGradient(this.widthLeftPane, 0, this.widthLeftPane, this.height);
		rightGradient.addColorStop(0, 'rgba(23, 218, 214, 0.75)');
		rightGradient.addColorStop(0.5, 'rgba(33, 136, 179, 0.75)');
		rightGradient.addColorStop(1, 'rgba(43, 56, 144, 0.75)');

		const picture = new Image(this.width, this.height);
		picture.src = this.avatarData;

		const imageCanvas = createCanvas(this.width, this.height);
		const ictx = imageCanvas.getContext('2d');

		ictx.drawImage(picture, this.width * 0.3, 0, this.width, this.height);

		StackBlur.canvasRGB(imageCanvas, 0, 0, this.width, this.height, 20);
		ctx.drawImage(imageCanvas, 0, 0, this.width, this.height);

		ctx.fillStyle = rightGradient;
		ctx.fillRect(this.widthLeftPane, 0, this.widthRightPane, this.canvas.height);
	}
github goshakkk / pabla / app / utils / canvas.js View on Github external
const applyFilter = (ctx, frame, name, value) => {
  if (name === 'contrast') {
    applyContrast(ctx, frame, value);
  } else {
    const [x, y, w, h] = frame;
    const scale = window.devicePixelRatio || 1;
    StackBlur.canvasRGB(ctx.canvas, x, y, w*scale, h*scale, value);
  }
};
github poloclub / interactive-classification / src / Modified.js View on Github external
if (nProps.reset || nProps.image !== this.props.image) {
            let ctx = this.cCam.getContext('2d');
            ctx.clearRect(0, 0, 227, 227);
            ctx = this.cImg.getContext('2d');
            drawImage(ctx, nProps.image, function(img) {
                predict(img, nProps.net, null, function(top, activation) {
                    let rows = createCompRows(top, null);
                    this.setState({
                        results: rows,
                        activation: activation,
                        cam: [-1]
                    });
                }.bind(this));
            }.bind(this));
        } else if (nProps.blur) {
            canvasRGB(this.cImg, 0, 0, 227, 227, this.props.blurSize);
            predict(this.cImg, nProps.net, classes, function(top, activation) {
                let rows = createCompRows(top, this.props.topK);
                this.setState({
                    results: rows,
                    activation: activation
                });
            }.bind(this));
        }
        this.props = nProps;
    }

stackblur-canvas

Fast and almost Gaussian blur by Mario Klingemann

MIT
Latest version published 10 months ago

Package Health Score

83 / 100
Full package analysis