获取浏览器帆布指纹_帆布过滤器

获取浏览器帆布指纹

Adding filters to images can make them more eye-catching and shareable -- just ask Instagram, Snapchat, Prism, and every other app out there.  A few years back we got the awesome CSS filters feature, allowing us to use a fixed set of filter methods to make our photos beautiful.  Of course CSS filters work on standard HTML elements, not just images, but images provide a better illustration of filter effects.

在图片上添加滤镜可以使其更加醒目和可共享-只需询问Instagram，Snapchat，Prism以及其他所有应用即可。 几年前，我们获得了很棒的CSS滤镜功能，使我们能够使用一组固定的滤镜方法使照片更漂亮。 当然，CSS过滤器可以在标准HTML元素上工作，不仅限于图像，而且图像可以更好地说明过滤效果。

I was happy to see that browsers have recently implemented those same filters for  element contents.  Let's start with a snippet from my JavaScript Canvas Image Conversion post, converting an image to canvas:

我很高兴看到浏览器最近为元素内容实现了相同的过滤器。 让我们从我的JavaScript Canvas Image Conversion帖子中的一个片段开始，将图像转换为canvas：

// Converts image to canvas; returns new canvas element
function convertImageToCanvas(image) {
	var canvas = document.createElement("canvas");
	canvas.width = image.width;
	canvas.height = image.height;
	canvas.getContext("2d").drawImage(image, 0, 0);

	return canvas;
}

var canvas = convertImageToCanvas(document.querySelector('img'));

With a element ready, we can then implement CSS filters whenever we'd like:

准备好元素后，我们可以随时根据需要实现CSS过滤器：

canvas.getContext('2d').filter = 'blur(5px) opacity(0.6)';

You can see a full list of filters on MDN.  I'm pleased that an API that started with CSS has been mirrored within canvas!

您可以在MDN上看到过滤器的完整列表 。 我很高兴在画布中镜像了以CSS开头的API！

翻译自: https://davidwalsh.name/canvas-filters

获取浏览器帆布指纹