使用Cloudinary进行电子商务

Nothing improves sales on the web than imagery and video.  You can describe an item a dozen ways but one picture can suck the user right in, multiple photos (including a nice zoom feature) can clinch the sale.  What does this mean?  It's important to provide users with performant, detailed, and quality images for both desktop and mobile.  Luckily Cloudinary provides a variety of optimization methods and media features so you can showcase your products in an optimized, customizable fashion.

没有什么能比图像和视频提高网上销售的了。 您可以用多种方式描述商品，但是一张图片可以吸引用户，多张照片(包括不错的缩放功能)可以帮助您达成交易。 这是什么意思？ 为用户提供台式机和移动设备的性能，详细和高质量的图像非常重要。 幸运的是， Cloudinary提供了多种优化方法和媒体功能，因此您可以以优化的，可定制的方式展示您的产品。

Let's have a look at some of the features and methods Cloudinary provides for optimizing, creating, and delivering images in eCommerce sites!

让我们看一下Cloudinary提供的一些功能和方法，这些功能和方法可用于优化，创建和交付电子商务网站中的图像！

去除背景 (Background Removal)

Unless you're using a professional photographer, you're likely going to want touching up of your photos, but doing so takes time and expertise.  Instead of throwing loads of time or money at background removal, upload the image to Cloudinary for background removal:

除非您使用专业摄影师，否则您可能需要修饰照片，但这需要时间和专业知识。 无需将大量时间或金钱花在后台清除上，而是将图像上传到Cloudinary进行后台清除 ：

// npm install cloudinary
var cloudinary = require('cloudinary');

// Set your API information
cloudinary.config({
	cloud_name: 'david-walsh-blog',
	api_key: '############',
	api_secret: '############'
});

// Upload an image, 
cloudinary.uploader.upload('sample-photos/my-photo.jpg', function(result) {
    // Log out the result to get the URL of the image
    console.log(result);

    // Image url is: result.url / result.secure_url
}, {
    public_id: "my-photo",
    background_removal: "remove_the_background"
});

Taking the step to remove the photo background, if necessary, sets the stage for more transformations.  Cleanup!

如有必要，采取步骤删除照片背景，为进行更多变换奠定了基础。 清理！

通过URL轻松动态调整图像大小 (Easy, Dynamic Image Sizing by URL)

The simplest image transformation feature is dynamic image sizing which can be done by slightly modifying the URL to an image:

最简单的图像转换功能是动态图像尺寸调整，可以通过稍微修改图像的URL来完成：

<!-- Size image to 300x300 -->
<img src="https://res.cloudinary.com/david-wash-blog/image/upload/w_300,h_300/usa">

If you're using Cloudinary's awesome React.js API, you can simply add the width and height attributes to the Image and the image will be dynamically transformed to that size:

如果您使用的是Cloudinary出色的React.js API ，则可以简单地将width和height属性添加到Image ，并且图像将被动态转换为该大小：

<Image
  publicId="ringo"
  width="300"
  height="300">

Customized image sizing optimizes both load time and rendering time!

定制的图像大小可优化加载时间和渲染时间！

内容感知裁剪 (Content Aware Cropping)

Most sites prefer all product images to be cut to certain sizes, making displaying product images in templates easy and predictable.  There will be times, however, that thumbnails need to be used and it would be nice if just the image was cropped to the main focal point.  Cloudinary can do this with content aware cropping!

大多数站点都希望将所有产品图像都裁成特定尺寸，从而使在模板中显示产品图像变得容易且可预测。 但是，有时会需要使用缩略图，如果仅将图像裁剪到主要焦点，那将是很好的选择。 Cloudinary可以通过内容感知裁剪来做到这一点！

<img src="https://res.cloudinary.com/david-wash-blog/image/upload/g_auto/diana">

With Cloudinary's content aware cropping, you can look for a face or other focal point while cropping the image to size!

使用Cloudinary的内容感知裁剪功能，您可以在将图像裁剪成一定尺寸时查找面部或其他焦点！

层数 (Layers)

The layering transformation feature is one of the most amazing features from Cloudinary.  Using the Cloudinary API, you can upload images which can overlay other images!  Think of a price tag image on top of your product image, along with some price text:

分层转换功能是Cloudinary最惊人的功能之一。 使用Cloudinary API，您可以上传可以覆盖其他图像的图像！ 考虑一下产品图片上方的价格标签图片以及一些价格文字：

<Image
  publicId="diana"
  width="400">
  <Transformation raw_transformation="200" />
  <Transformation angle="20" crop="scale" gravity="north_west" overlay="price-tag" width="100" />
  <Transformation angle="20" color="rgb:fff" gravity="north_west" overlay="text:fira%20mono_16_bold:$$(price)" x="45" y="27" />
</Image>

The resulting <img> and URL looks is:

生成的<img>和URL外观为：

https://res.cloudinary.com/david-wash-blog/image/upload/$price_!200!/a_20,c_scale,g_north_west,l_price-tag,w_100/a_20,co_rgb:fff,g_north_west,l_text:fira%20mono_16_bold:$$(price),x_45,y_27/diana

You can complete this layering with any other transformation, so you can overlay image and text on a content aware cropped image of a dynamic size.  That's one of the really power functions of Cloudinary!

您可以通过任何其他转换来完成此分层，因此可以将图像和文本覆盖在内容感知的动态尺寸的裁剪图像上。 这是Cloudinary真正强大的功能之一！

客户提示 (Client Hints)

A few months back I showed you the newly supported client hints feature in browsers.  Client hints allow your browser to share your viewport dimensions in requests so that servers can dynamically generate and return an optimized image:

几个月前，我向您展示了浏览器中新支持的客户端提示功能。 客户端提示允许您的浏览器在请求中共享您的视口尺寸，以便服务器可以动态生成并返回优化的图像：

<meta http-equiv="Accept-CH" content="DPR, Width">

Cloudinary supports client hints so be sure to add the <meta> tag to enable them!

Cloudinary支持客户端提示，因此请确保添加<meta>标记以启用它们！

一起拉！ (Pulling it all Together!)

Using the techniques cited above, along with a few others, I've created a crude single page product display and shopping cart using cloudinary-react:

使用上面引用的技术以及其他一些技术，我使用cloudinary-react创建了粗略的单页产品展示和购物车：

import React, { Component } from 'react';
import './App.css';

import { Image, Transformation, CloudinaryContext } from 'cloudinary-react';

let products = [
  { id: 'diana', title: 'Pricess Di', price: '200' },
  { id: 'obama', title: 'President Obama', price: '150' },
  { id: 'usa', title: 'Innauguration', price: '75' }
];

class App extends Component {

  state = { currentProduct: products[0], cart: [] };

  addToCart = (publicId) => {
    this.state.cart.push(this.state.currentProduct);
    this.setState({ cart: this.state.cart });
  }

  render() {
    return (
      <div>
        <CloudinaryContext cloudName="david-wash-blog">
        <div className="detail">
          <h2>Product Detail</h2>
          <Image
            publicId={this.state.currentProduct.id}
            width="400">
            <Transformation raw_transformation={`$price_!${this.state.currentProduct.price}!`} />
            <Transformation angle="20" crop="scale" gravity="north_west" overlay="price-tag" width="100" />
            <Transformation angle="20" color="rgb:fff" gravity="north_west" overlay="text:fira%20mono_16_bold:$$(price)" x="45" y="27" />
          </Image>
          <button onClick={this.addToCart}>Add to Cart</button>
        </div>

        <div className="available">
          <h2>Products in Stock</h2>
          <p>Click the thumbnail below to view a larger image.</p>
          {products.map(product => {
            return <Image key={product.id} onClick={() =>this.setState({ currentProduct: product })} publicId={product.id} width="200"/>;
          })}
        </div>

        <div className="cart">
          <h2>Your Cart</h2>
          {this.state.cart.length ? this.state.cart.map(product => {
            return <Image key={product.id} gravity="auto" crop="crop" publicId={product.id} width="100"/>;
          }) : 'Cart is empty'}
        </div>
      </CloudinaryContext></div>
    );
  }
}

export default App;

All images are sized dynamically, price overlays are added to product detail images, and any product added to cart will provide content aware images as thumbnails so that the thumbnail can be small but the user knows exactly the detail needed to make out what the item is.

动态调整所有图像的大小，将价格叠加图添加到产品详细信息图像中，添加到购物车的任何产品都将提供内容感知图像作为缩略图，这样缩略图可以很小，但用户确切知道要确定商品的详细信息。

While these techniques have been presented as awesome eCommerce feature usages, the truth is that each of these features can be used in any situation to improve performance and visibility.  Don't forget that Cloudinary provides PHP, Node.js, Ruby, Java, Python, and other APIs to upload, modify, and display your images.  Give Cloudinary a shot -- you wont be disappointed!

虽然这些技术已被用作很棒的电子商务功能用法，但事实是，这些功能中的每一个都可以在任何情况下使用，以提高性能和可见性。 不要忘记Cloudinary提供了PHP，Node.js，Ruby，Java，Python和其他API来上载，修改和显示图像。 试一试Cloudinary-您将不会失望！

翻译自: https://davidwalsh.name/cloudinary-ecommerce