pkg-cloudinary-core icon indicating copy to clipboard operation
pkg-cloudinary-core copied to clipboard

Blur is missing from transform options

Open jdwillemse opened this issue 6 years ago • 6 comments

Cloudinary offers blur transform options but this is not reflected in the blur API. Would be great if this API had all the options.

jdwillemse avatar Jun 07 '18 15:06 jdwillemse

Hi @jdwillemse, Can you share with us the call you are trying to make? And possibly where it is not being referenced. I found an example that uses blur here: https://cloudinary.com/cookbook/tag/blur I am looking forward to your update.

d-mendoza avatar Jun 07 '18 20:06 d-mendoza

I want to be able to chain this filter to the other transformations

  transformer
    .width(width)
    .crop('fill')
    .gravity('faces')
    .blur('300')

Here is another reference: https://cloudinary.com/documentation/image_transformations#blurring_pixelating_and_sharpening_effects

jdwillemse avatar Jun 11 '18 15:06 jdwillemse

@jdwillemse

I believe you are trying to create a chained transformation, more info here. If you can share the whole transformation you are trying do, I can go ahead a try to reproduce the issue. Also, can you identify the language you are using, it appears that it is Java?

If sensitive information is being shared, you can open a support ticket at https://support.cloudinary.com/hc/en-us/requests/new and address it to me.

d-mendoza avatar Jun 11 '18 20:06 d-mendoza

I'm using the core lib in JS (React). Here is the relevant code

import cloudinary from 'cloudinary-core';

const cloudinaryCore = new cloudinary.Cloudinary({ cloud_name: 'xxxx' });
const transformer = new cloudinary.Transformation();
…
const transform = transformer
    .width(width)
    .crop('fill')
    .gravity('faces');
…
<img src={`${cloudinaryCore.url(source, transform)}` />

jdwillemse avatar Jun 12 '18 11:06 jdwillemse

@jdwillemse Thank you for reporting this. I will send it over to our dev team to review.

In the meantime, the alternative would be to do either of the following:

var cloudinary = require("cloudinary-core");

const cloudinaryCore = new cloudinary.Cloudinary({ cloud_name: 'xxxx' });
const transformer = new cloudinary.Transformation();

const transform = transformer
    .width(500)
    .crop('fill')
    .gravity('faces')
    .chain()
    .overlay("text:arial_60:This is my picture")
    .gravity("north")
    .y(20).chain().width(10).crop("crop");

// Use imageTag to generate a html formatted image tag
console.log(cloudinaryCore.imageTag("couple.jpg").transformation()
	.width(500).crop('fill').gravity('faces').chain()
    .overlay("text:arial_60:This is my picture").gravity("north").y(20)
    .toHtml());
// Results
// <img src="http://res.cloudinary.com/xxxx/image/upload/c_fill,g_faces,w_500/g_north,l_text:arial_60:This is my picture,y_20/couple.jpg">

console.log(cloudinaryCore.url("couple.jpg", transform));
// Results
// http://res.cloudinary.com/xxxx/image/upload/c_fill,g_faces,w_500/g_north,l_text:arial_60:This is my picture,y_20/couple.jpg

d-mendoza avatar Jun 12 '18 20:06 d-mendoza

Hi @jdwillemse, I wanted to add to this ticket. I believe what you actually wanted to do was:

const cl = cloudinary.Cloudinary.new({cloud_name: "demo"});
let transformer = new cloudinary.Transformation()
  .effect( "blur_faces:300") // or any other blur effect
  .crop("fill")
  .width(400);
cl.url( 'friends', transformer);

Please let us know if this answers your question.

d-mendoza avatar Nov 27 '18 22:11 d-mendoza