Javascript xóa nền khỏi hình ảnh

Tôi đã từng làm việc trên hàng chục trang web Thương mại điện tử trong sự nghiệp của mình và nhiều trang web trong số đó gặp khó khăn bởi cùng một vấn đề. thu thuế, tùy chỉnh thanh toán và tối ưu hóa hình ảnh. Mặc dù tùy chỉnh thu thuế và thanh toán là quan trọng, nhưng tối ưu hóa hình ảnh luôn là vấn đề khó nhất và quan trọng nhất cần giải quyết. không ai muốn mua một sản phẩm có hình ảnh trông nghiệp dư. Khi bạn kết hợp nhu cầu về hình ảnh đẹp với khách hàng muốn tải lên hình ảnh của chính họ. bạn có một vấn đề thực sự

Thay vì giải thích một cách đau đớn cho khách hàng cách chụp những bức ảnh chất lượng, hay thậm chí giải thích một cách đau đớn hơn rằng không có cách kỳ diệu nào để làm cho hình ảnh của họ trông tuyệt vời, tôi ước mình có tính năng mới nhất của Cloudinary. Xóa nền hình ảnh được hỗ trợ bởi AI. Với tính năng xóa nền do AI hỗ trợ, bạn có thể tải hình ảnh lên Cloudinary và để chúng thực hiện công việc khó khăn

Đang tải ảnh lên

Cloudinary cung cấp nhiều phương pháp để tải ảnh lên. tìm nạp từ xa, bảng quản trị hoặc API mà họ cung cấp người trợ giúp bằng nhiều ngôn ngữ và khuôn khổ lập trình khác nhau

// 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",
    // Use preset to automatically remove background
    upload_preset: "remove_background",
    // ...or use the specific setting for it:
    background_removal: "cloudinary_ai"
});

Trong trường hợp Thương mại điện tử và để tận dụng tính năng xóa nền do AI hỗ trợ, bạn muốn kết nối với chức năng tải lên hình ảnh của giải pháp để đẩy hình ảnh lên Cloudinary. Cũng lưu ý việc sử dụng upload_preset mà tôi đã định cấu hình trong bảng quản lý tài khoản của Cloudinary;

Sử dụng loại bỏ nền

Xóa nền yêu cầu sử dụng cài đặt sẵn tải lên hoặc cấu hình background_removal trong khi tải lên và vì lý do chính đáng -- vì xóa nền không bao giờ diễn ra ngay lập tức (và nếu ai đó hứa hẹn điều đó, đừng tin họ. ), sẽ có một khoảng thời gian đệm nhỏ trước khi hình ảnh sẵn sàng

Khi hình ảnh đã được tải lên bằng cài đặt sẵn hoặc background_removal: "cloudinary_ai", hình ảnh sẽ có sẵn để sử dụng. Điều đó có nghĩa là bạn có thể tận dụng nhiều API của Cloudinary để tạo hiệu ứng hình ảnh, sửa đổi, v.v.

Ví dụ: bạn cũng có thể tận dụng sửa đổi URL để thêm bóng đẹp vào hình ảnh tiêu điểm

https://res.cloudinary.com/demo/image/upload/e_shadow:50,x_10,y_10/rmv_bgd/dog_couch.png

Hầu hết các trang web Thương mại điện tử cũng cung cấp hình ảnh thu nhỏ và kích thước đầy đủ để xem sản phẩm gần hơn, điều mà Cloudinary dễ dàng cho phép bạn thực hiện

.../image/upload/h_200/w_200/e_shadow:50,x_10,y_10/rmv_bgd/dog_couch.png

Khả năng tạo hình ảnh sắc nét, tùy chỉnh chỉ bằng cách thay đổi URL hoàn toàn phù hợp với mọi trang web.

Tôi đã chụp ảnh máy pha cà phê của mình trên nền trung tính và tính năng xóa nền của Cloudinary làm cho ảnh trông chuyên nghiệp, với nền đã bị xóa và bây giờ tôi có thể sửa đổi hình ảnh chính của nó theo ý muốn

Xóa nền dựa trên AI là một sự tiện lợi cho cả nhà phát triển và khách hàng của họ. Hầu hết các cửa hàng Thương mại điện tử không có nhiếp ảnh gia chuyên nghiệp để dàn dựng hình ảnh nên khả năng chỉnh sửa chúng dễ dàng là rất quan trọng và Cloudinary cung cấp điều đó. Xóa nền, thêm bóng, tạo hình ảnh ở kích thước mong muốn, v.v. -- Cloudinary giúp việc quản lý và hiển thị phương tiện trở nên đơn giản

Trước đây, tôi đã viết về việc sử dụng Cloudinary để tối ưu hóa hình ảnh, một kỹ thuật bạn có thể sử dụng để giảm kích thước hình ảnh, phân phối hình ảnh từ đám mây và sửa đổi hình ảnh một cách nhanh chóng. Là một người không rành về Photoshop và không bao giờ thực sự có thời gian để chơi với ứng dụng tuyệt vời này, tôi đánh giá cao rằng Cloudinary có thể thực hiện công việc khó khăn là cắt xén, tối ưu hóa và thực hiện nhiều biến đổi trên hình ảnh chỉ bằng cách thay đổi một

Một trong những tiện ích bổ sung Cloudinary mà tôi tìm thấy gần đây đã khiến tôi suy nghĩ. xóa nền ảnh. Về cơ bản, dịch vụ của Cloudinary có thể chấp nhận hình ảnh tải lên của bạn và sau đó xóa các thành phần nền để chỉ còn lại hình ảnh tiêu điểm, tiền cảnh

JavaScript

Cloudinary cung cấp một API bằng mọi ngôn ngữ mà bạn có thể nghĩ đến (JavaScript, Python, PHP, v.v.) nhưng bạn có thể biết rằng tôi sẽ luôn chọn sử dụng API JavaScript. Mã JavaScript sau đây là tất cả những gì bạn cần để tải lên một hình ảnh và xóa nền của nó

// 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"
});

/*
    Result:

    { public_id: 'my-photo',
      version: 1467832498,
      signature: 'd64413aaad8aefa3d0b6d521eab802e9bea5158d',
      width: 581,
      height: 583,
      format: 'jpg',
      resource_type: 'image',
      created_at: '2016-07-06T19:14:58Z',
      tags: [],
      bytes: 21368,
      type: 'upload',
      etag: 'e8584286fd457e9893b0dd69fd8c47c1',
      url: 'http://res.cloudinary.com/david-wash-blog/image/upload/v1467832498/my-photo.jpg',
      secure_url: 'https://res.cloudinary.com/david-wash-blog/image/upload/v1467832498/my-photo.jpg',
      info: { background_removal: { remove_the_background: [Object] } },
      overwritten: true,
      original_filename: 'my-photo' }
*/

Đó là một đoạn mã nhỏ để kích hoạt tính năng sửa đổi hình ảnh tự động tuyệt vời như vậy. Ảnh tải lên ngay lập tức và được thêm vào thư viện phương tiện của bạn nhưng quá trình xóa nền mất vài phút để xử lý. Cloudinary cho phép bạn định cấu hình tài khoản của mình để gửi thông báo khi quá trình hoàn tất

Đầu ra ví dụ

Tiện ích bổ sung loại bỏ nền của Cloudinary có chất lượng -- không có đường viền pixel hoặc hình ảnh bị hỏng. Dưới đây là một số ảnh trước và sau để chứng minh điều đó

đá mây

API của Cloudinary rất dễ sử dụng và số lượng tính năng cũng như tiện ích bổ sung của chúng thật đáng kinh ngạc. Việc xử lý hình ảnh giúp ích cho SEO và thời gian tải, phân phối chúng từ đám mây giúp cải thiện hiệu suất, khả năng phân phối một biến thể khác của hình ảnh giúp tiết kiệm thời gian và các tiện ích bổ sung của chúng như xóa nền khiến Cloudinary trở thành một con thú cực kỳ mạnh mẽ

Cloudinary cung cấp một cấp độ miễn phí, vì vậy hãy dùng thử. Có rất nhiều tính năng và tiện ích bổ sung. chúng có thể giúp bạn tiết kiệm thời gian, công sức và không phải lo lắng về việc hình ảnh của bạn đang ảnh hưởng như thế nào đến thời gian tải web của bạn

Làm cách nào để xóa nền khỏi hình ảnh theo chương trình?

Cách tốt nhất để xóa nền của ảnh là gì?