How to use stackblur-canvas - 10 common examples

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') {

context.fillRect(0, 0, naturalWidth, naturalHeight);
    };
    const drawImage = () => {
      context.drawImage(imageNode, 0, 0, naturalWidth, naturalHeight);
    };
    // const now = performance.now();
    // blur image.
    const isCanvasFilter = false && "filter" in context; // canvas filter is not good.
    if (isCanvasFilter) {
      context.filter = `blur(${blurSize}px)`;
      drawImage();
      context.filter = "blur(0px)";
      fillRect();
    } else {
      drawImage();
      stackBlurCanvas.canvasRGBA(canvas, 0, 0, naturalWidth, naturalHeight, blurSize);
      fillRect();
    }
    // console.log(performance.now() - now);

    toUrl(canvas, imageUrl => {
      acrylicTexture.texture = imageUrl;
      acrylicTexture.isCanvasFilter = isCanvasFilter;
      updateAcrylicTexture();
    });
  };
}

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})`;
            });
        });
    });

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
          )
        }
      })

blurRadius
		} = this;
		const body = document.window
			? document.window.document.body
			: null;
		const canvas = ctx.canvas as HTMLCanvasElement;

		// StackBlur requires canvas be on document
		canvas.id = document.getUniqueId();

		if (body) {
			canvas.style.display = 'none';
			body.appendChild(canvas);
		}

		canvasRGBA(canvas, x, y, width, height, blurRadius);

		if (body) {
			body.removeChild(canvas);
		}
	}
}

this.apply = function (ctx, x, y, width, height) {
      if (!StackBlur || typeof StackBlur.canvasRGBA === 'undefined') {
        svg.log('ERROR: StackBlur.js must be included for blur to work');
        return;
      }

      // StackBlur requires canvas be on document
      ctx.canvas.id = svg.UniqueId();
      if (!nodeEnv) {
        ctx.canvas.style.display = 'none';
        doc.body.appendChild(ctx.canvas);
      }
      StackBlur.canvasRGBA(ctx.canvas, x, y, width, height, this.blurRadius);
      if (!nodeEnv) {
        doc.body.removeChild(ctx.canvas);
      }
    }
  }

this.apply = function (ctx, x, y, width, height) {
      if (!StackBlur || typeof StackBlur.canvasRGBA === 'undefined') {
        svg.log('ERROR: StackBlur.js must be included for blur to work');
        return;
      }

      // StackBlur requires canvas be on document
      ctx.canvas.id = svg.UniqueId();
      if (!nodeEnv) {
        ctx.canvas.style.display = 'none';
        doc.body.appendChild(ctx.canvas);
      }
      StackBlur.canvasRGBA(ctx.canvas, x, y, width, height, this.blurRadius);
      if (!nodeEnv) {
        doc.body.removeChild(ctx.canvas);
      }
    }
  }

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);
	}

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);
  }
};

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;
    }