获取浏览器帆布指纹
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 <canvas>
element contents. Let's start with a snippet from my JavaScript Canvas Image Conversion post, converting an image to canvas:
我很高兴看到浏览器最近为<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 <canvas>
element ready, we can then implement CSS filters whenever we'd like:
准备好<canvas>
元素后,我们可以随时根据需要实现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!
获取浏览器帆布指纹