Automattic/node-canvas

Use standard Canvas `ctx.filter` API (blur/grayscale/saturate/contrast)

Open

#1.063 aberto em 21 de dez. de 2017

Ver no GitHub
 (19 comments) (24 reactions) (0 assignees)JavaScript (1.140 forks)batch import
FeatureHelp wanted

Métricas do repositório

Stars
 (9.524 stars)
Métricas de merge de PR
 (Mesclagem média 34d 18h) (2 fundiu PRs em 30d)

Description

HTML5 Canvas recently introduced support for filters like ctx.filter = "blur(5px)"; in the browser, for example to blur, saturate, grayscale and modify contrast.

Issue or Feature

API support for HTML5 Canvas ctx.filter from from MDN web docs

Steps to Reproduce

var Canvas = require('canvas');
var canvas = Canvas.createCanvas(200, 200);
var ctx = canvas.getContext('2d');
ctx.filter = "blur(5px)";
ctx.drawImage(img,0,0);

Your Environment

  • node-canvas: 2.0.0 alpha
  • node: v9.3.0
  • macOS: High Sierra

Guia do colaborador

Direção de pesquisa
Investigue como o node canvas atualmente processa filtros e explore o suporte interno de filtros do Cairo. Implemente ctx.filter mapeando funções de filtro CSS para equivalentes do Cairo.
Pilha de tecnologia
javascriptnodejs
Domain
backendapi
Tipo Issue
Funcionalidade
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
JavaScriptNode.js
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
60