Automattic/node-canvas

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

Open

#1,063 创建于 2017年12月21日

在 GitHub 查看
 (19 评论) (24 反应) (0 负责人)JavaScript (9,524 star) (1,140 fork)batch import
FeatureHelp wanted

描述

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

贡献者指南

技术栈
javascriptnodejs
领域
api
议题类型
feature
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-2 days
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
JavaScriptNode.jsCanvas APInode canvas
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
60
研究方向
Review the MDN documentation for the CanvasRenderingContext2D filter property. Examine the node canvas C++ binding in src/Canvas.cc and src/CanvasRenderingContext2D.cc to understand how other properties like shadowBlur are implemented. Look at previous attempts or discussions in the issue comments to identify challenges.