加速器instagram_使用Cloudinary的类似Instagram的过滤器

太过爱你忘了你带给我的痛 2023-02-22 03:34 14阅读 0赞

加速器instagram

![Cloudinary Filters][]

Apps like Instagram are a testament to how brilliant a few color modifications can make a photo.  We've seen hundreds of Instagram clones pop up, and even the [CSS][] and [Canvas][] specs have a `filter` property which allows us to modify imagery.  As nice as those APIs are, they only modify an image for view on the client side -- once the user tries to save the photo, they get the unmodified version.  So how can you generate Instagram-like photos with artisitic filters?  The awesome media service [Cloudinary][] provides an easy method to [generate artistic, filtered photos][generate_artistic_ filtered photos] with a very simple API.  Let's have a look!

像Instagram这样的应用程序证明了一些色彩修改可以使照片变得多么出色。 我们已经看到数百个Instagram克隆出现，甚至[CSS][]和[Canvas][]规范都具有`filter`属性，该属性允许我们修改图像。 就像这些API一样，它们仅修改图像以供客户端查看-用户尝试保存照片后，他们将获得未修改的版本。 那么，如何使用人工滤镜生成类似Instagram的照片呢？ 令人敬畏的媒体服务[Cloudinary][]提供了一种简单的方法， [可以][generate_artistic_ filtered photos]通过非常简单的API [生成艺术性的，经过过滤的照片][generate_artistic_ filtered photos] 。 我们来看一下！

[![Cloudinary Filters][Cloudinary Filters 1]][Cloudinary Filters_Cloudinary Filters 1]

[View Demo][Cloudinary Filters_Cloudinary Filters 1] [观看演示][Cloudinary Filters_Cloudinary Filters 1]

## 上载图片 **(**Uploading an Image**)** ##

The best way to interact with images is initially uploading them to [Cloudinary][], which is incredibly easy.  Cloudinary provides APIs for all popular web languages, like PHP, Node.js, Python, Java, etc.  The following will upload our sample image using Node.js:

与图像进行交互的最佳方法是首先将它们上传到[Cloudinary][] ，这非常简单。 Cloudinary提供了适用于所有流行网络语言的API，例如PHP，Node.js，Python，Java等。以下将使用Node.js上传我们的示例图像：

var cloudinary = require('cloudinary');
    
    cloudinary.config({
    	cloud_name: 'david-walsh-blog',
    	api_key: '##############',
    	api_secret: '##############'
    });
    
    cloudinary.uploader.upload('landscape.jpg', function(result) {
    	console.log(cloudinary.image('landscape.jpg'));
    
        /*
        <img src='http://res.cloudinary.com/david-walsh-blog/image/upload/landscape.jpg' />
        */
    });

With the image uploaded to Cloudinary, we can perform any number of [transformations][], [background removals][], and other optimizations, either on the fly via URL modification or via their sophisticated API.

将图像上传到Cloudinary后，我们可以通过URL修改或通过其复杂的API即时执行任意数量的[转换][transformations] ， [背景删除][background removals]和其他优化。

## 影像增强 **(**Image Enhancement**)** ##

Sometimes adding a few slight color modifications to a given image can provide the small improvement that keeps the image looking "natural" but spectacular.  Cloudinary provides a useful set of enhancement transformations to bring out the vibrance in photos, including: `improve`, `gamma`, `auto_brightness`, `auto_contrast`, `auto_color`, `fill_light`, `vibrance`, `contrast`, and `viesus_correct`.  The following URL pattern will get you a few of those enhancements:

有时，对给定的图像添加一些轻微的颜色修改可以提供使图像保持“自然”但壮观的细微改进。 Cloudinary提供了增强变换的一组有用衬托出鲜艳的照片，其中包括： `improve` ， `gamma` ， `auto_brightness` ， `auto_contrast` ， `auto_color` ， `fill_light` ， `vibrance` ， `contrast`和`viesus_correct` 。 以下网址格式将为您提供一些增强功能：

Check out how awesome each of these enhancements make our sample image look:

看看这些增强功能如何使我们的示例图像看起来很棒：

![Cloudinary Filters][Cloudinary Filters 2]

Sometimes the minimalist enhancement makes the image look best!

有时，极简的增强效果会使图像看起来更好！

## 向图像添加艺术滤镜 **(**Adding Artistic Filters to Images**)** ##

If you want to bring artistic flair to an image, or even let your users bring filters to their imagery (via your awesome app that uses Cloudinary, no doubt), you can bring those images to life by adding an `art:(effect-name)` effect to the image:

如果您想使图像具有艺术气息，或者甚至让用户将过滤器带入图像(毫无疑问，通过使用Cloudinary的超赞应用程序)，您可以通过添加`art:(effect-name)`来使这些图像栩栩如生`art:(effect-name)`对图片的影响：

You can customize the level of effect application in most cases with this pattern:

您可以使用以下模式在大多数情况下自定义效果应用程序的级别：

<-- 70% -->
    <img src='http://res.cloudinary.com/david-walsh-blog/image/upload/e_art:audrey:70/landscape.jpg' />

Check out a showcase of transformations from our sample image:

从我们的示例图片中查看转换的展示：

[![Cloudinary Filters][Cloudinary Filters 3]][Cloudinary Filters_Cloudinary Filters 1]

It's amazing what advanced math calculations can do to the display of an image.  A simple image taken with any camera can be made to look majestic if you have a service like [Cloudinary][] to bring the filter to fruition.

先进的数学计算可以对图像的显示产生惊人的效果。 如果您拥有[Cloudinary之][Cloudinary]类的服务来使滤镜得以实现，那么使用任何相机拍摄的简单图像都会显得雄伟壮观。

[View Demo][Cloudinary Filters_Cloudinary Filters 1] [观看演示][Cloudinary Filters_Cloudinary Filters 1]

My second week at Mozilla I won a competition amongst the web developers to create something amazing, and what I created was a photo filtering app like Cloudinary.  The problem was it used the `canvas` API which doesn't save out its filters, and it required knowing the math behind the filtering.  However cute my app was, it was a nightmare for both users and developers.  Cloudinary's API for using simple and artistic filters is incredibly easy -- coding your own route probably isn't worth it.  Artistic filters are just another reason why you should jump at Cloudinary for your personal and app media!

在Mozilla的第二个星期，我赢得了网络开发人员的竞争，以创造出惊人的东西，而我创造的是一个像Cloudinary这样的照片过滤应用程序。 问题在于它使用了`canvas` API，该API没有保存其过滤器，并且需要了解过滤器背后的数学原理。 无论我的应用多么可爱，这对于用户和开发人员都是一场噩梦。 Cloudinary使用简单且美观的过滤器的API非常容易-编写自己的路线可能不值得。 艺术过滤器只是您为个人和应用程序媒体跳入Cloudinary的另一个原因！

> 翻译自: [https://davidwalsh.name/cloudinary-filters][https_davidwalsh.name_cloudinary-filters]

加速器instagram

[Cloudinary Filters]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGF2aWQtd2FzaC1ibG9nL2ltYWdlL3VwbG9hZC9lX2ltcHJvdmUvd184MDAveWVuYWVpM2liaDd4a25ndjN0ZXEuanBn?x-oss-process=image/format,png
[CSS]: https://davidwalsh.name/css-filters
[Canvas]: https://davidwalsh.name/canvas-filters
[Cloudinary]: http://cloudinary.com/?utm_source=DWB&utm_medium=Sponsored_post_11&utm_content=Artistic-Filters
[generate_artistic_ filtered photos]: http://cloudinary.com/documentation/image_transformations?utm_source=DWB&utm_medium=Sponsored_post_11&utm_content=Artistic-Filters#image_with_oil_painting_filter
[Cloudinary Filters 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9jbG91ZGluYXJ5LWFydGlzdGljLWZpbHRlcnMucG5n?x-oss-process=image/format,png
[Cloudinary Filters_Cloudinary Filters 1]: https://davidwalsh.name/demo/cloudinary-filters.php
[transformations]: https://davidwalsh.name/image-optimization-cloudinary
[background removals]: https://davidwalsh.name/remove-photo-backgrounds-cloudinary
[Cloudinary Filters 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9jbG91ZGluYXJ5LWltcHJvdmVtZW50LWZpbHRlcnMucG5n?x-oss-process=image/format,png
[Cloudinary Filters 3]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vZGF2aWQtd2FzaC1ibG9nL2ltYWdlL3VwbG9hZC92MTQ4MjMzNjYxMS9lX29pbF9wYWludC95ZW5hZWkzaWJoN3hrbmd2M3RlcS5qcGc?x-oss-process=image/format,png
[https_davidwalsh.name_cloudinary-filters]: https://davidwalsh.name/cloudinary-filters