<cld-transformation :effect="effect" />生成的url中effect无效

[emoyee]

代码：<cld-transformation :effect="effect" />
生成结果：这是生成错误的url
代码：<cld-transformation effect="art:athena" />
生成结果：这便是生成正确的url

[emoyee]

effect我打印出来过，值没有问题
全部逻辑代码：

changeStyle:function(e){
        let _this = this;
        switch (e) {
          case '素描':_this.effect="art:incognito";break;
          case '复古':_this.effect="sepia";break;
          case '模糊':_this.effect="pixelate:10";break;
          case '卡通化':_this.effect="cartoonify";break;
        }
        var cloudinary=document.getElementById("imgPic");
        console.log(_this.effect);
        console.log(cloudinary);
        _this.changePic(e);
      },
      changePic(style){
        let _this = this;
        _this.src=_this.srced;
        var c=document.getElementById("myCanvas1");
        var ctx=c.getContext("2d");
        var img=new Image();
        img.src=_this.srced;
        img.onload = function(){
          ctx.drawImage(img,500,0);
        }
      }

[patrick-tolosa]

Hey @emoyee - what exactly are you trying to do?

[emoyee]

根据下拉框选择不同的风格滤镜，图片会呈现不同的效果，但是effect渲染出来的url 上有点问题

[aleksandar-cloudinary]

Hi @emoyee - Does effect definitely have the right value set? If you add a <span>Effect value: {{ effect }}</span> to your template, do you see the expected value printed?

[emoyee]

It's still the same

[aleksandar-cloudinary]

Hi @emoyee - Thanks for trying that. I went ahead and set up a quick app locally to try and reproduce. In my View I just have:

<template>
  <div>
    <h2>Test effect</h2>

    <div :set="effect='art:incognito'">
        <span>Effect value: {{effect}}</span>
    </div>

  <cld-image public-id="sample" background="yellow" width=150 height=150 crop="pad">
    <cld-transformation :effect="effect" />
  </cld-image>

  </div>
</template>

<script>
export default {
  name: "Test",
}
</script>

I use <div :set="effect = 'art:incognito'"> to create a variable effect that I then use further down in the <cld-transformation/>.

Once I run the app, I get the following output from this view and the issue is not reproducible on my side:

May I please ask you to share a CodeSandbox, CodePen or a link to a repository which contains a Vue app with the minimum amount of code needed to reproduce the issue? We can then try to run that locally or in the online environment to see the issue.

[emoyee]

Thanks for your reply.I need this effect to be variable，the effect value is changed, but not rendered. Test project I have released on https://github.com/emoyee/testImg.

[rnamba-cloudinary]

Hello @emoyee, thank you for providing the github link.

I've created a codesandbox here: https://codesandbox.io/s/winter-cache-rsrgf8?file=/src/App.vue:0-1953 that has a working version outputting the expected effect to the console & reflecting on the rendered page. I changed the elements from an el-select / el-option to a normal select/option as the provided snippet was displaying text instead of the dropdown elements and added a couple of javascript lines to the provided snippet. Let me know if there are any clarifications needed or if anything is not as expected!

[emoyee]

Hi,@rikuoCloudinary.I tried this URL, but I also changed el-select to select in my project, and the rendered URL remains unchanged.

The code is exactly the same as that on the website. I tried to create a new project, but there was a problem that could not be solved, so I don't know if it was the problem of the project.

[PixelCook]

Can you please share your updated code?

[emoyee]

<template>
  <div>
    <!-- :set="effect='art:incognito'" -->
    <div>
      <span>Effect value: {{ effect }}</span>
    </div>
    <div>
      <input type="file" @change="upload" />
      <cld-image :public-id="public_id" id="imgPic">
        <cld-transformation :effect="effect" />
      </cld-image>
    </div>
    <div>
      图片效果：
      <select @change="changeStyle" name="selectChoices" id="choices">
        <option value="黑白">黑白</option>
        <option value="模糊">模糊</option>
        <option value="复古">复古</option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      public_id: "",
      effect: "",
    };
  },
  methods: {
    upload: function (e) {
      var _this = this;
      // 获取当前上传的文件
      var files = e.target.files[0];
      // console.log(files);
      if (!e || !window.FileReader) return; // 判断是否支持FileReader
      let reader = new FileReader();
      reader.readAsDataURL(files); // 文件转换
      reader.onloadend = function () {
        const url = "https://api.cloudinary.com/v1_1/demo/image/upload";
        const formData = new FormData();
        formData.append("file", files);
        formData.append("upload_preset", "docs_upload_example_us_preset");
        fetch(url, {
          method: "POST",
          body: formData,
        })
          .then((response) => {
            return response.text();
          })
          .then((data) => {
            data = JSON.parse(data);
            _this.public_id = data.public_id;
            _this.effect = "art:incognito";
            // console.log(data);
          });
      };
    },
    changeStyle: function () {
      this.effect = "art:quartz"; // Statically setting the value
      var cloudinary = document.getElementById("imgPic");
      console.log("this.effect", this.effect);
      console.log("cloud", cloudinary);
    },
  },
};
</script>
<style>
/* div {
  margin: 20px;
} */
</style>

[emoyee]

After this effect is assigned a value, the value will not change.

This effect should become art:quartz, but nothing has changed.

[PixelCook]

Change your event function to:

changeStyle: function (event) {
  
  this.effect = event.target.value; 

  var cloudinary = document.getElementById("imgPic");

  console.log("this.effect", this.effect);

  console.log("cloud", cloudinary);

},

[emoyee]

Still like this.

changeStyle: function (event) {
      this.effect = event.target.value; 
      var cloudinary = document.getElementById("imgPic");
      console.log("this.effect", this.effect);
      console.log("cloud", cloudinary);

      // this.effect = "art:quartz"; // Statically setting the value
      // var cloudinary = document.getElementById("imgPic");
      // console.log("this.effect", this.effect);
      // console.log("cloud", cloudinary);
    }

[PixelCook]

You have that value hard coded,
_this.effect = "art:incognito";

[emoyee]

How can I change it? This needs an initial value, otherwise there will be errors.

[PixelCook]

_this.effect = this.effect;

[emoyee]

If so, the <cld-transformation effect="art:incognito"> will not change and will always render the default value.

      <cld-image :public-id="public_id" id="imgPic">
        <cld-transformation effect="art:incognito" />
      </cld-image>

[PixelCook]

Reference this sandbox https://codesandbox.io/s/lively-wood-cerp8d?file=/src/App.vue

[emoyee]

The code is modified according to this sandbox, but this effect is still not rendered.I copied all the code directly.

[rnamba-cloudinary]

@emoyee You'll need to perform a transformation on the image via the URL transformations for the effect to be reflected in the img src attribute.

https://cloudinary.com/documentation/image_transformations
https://cloudinary.com/product_updates/cartoonify_effect

For example, in the case of the user selecting "Cartoonify"

The URL would need to change from

https://res.cloudinary.com/demo/image/upload/v1/docs_uploading_example/pic1_doe7kg
to
https://res.cloudinary.com/demo/image/upload/e_cartoonify:20/v1/docs_uploading_example/pic1_doe7kg

Since you are utilizing Vue, this can be accomplished through the Vue SDK https://cloudinary.com/documentation/vue_image_manipulation

[emoyee]

你好，有收到我回复的邮件吗？已经有几天了，我并没有看到回复，请问有什么进展吗？

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "cloudinary/cloudinary-vue" ***@***.***&gt;; 发送时间:&nbsp;2022年6月10日(星期五) 凌晨3:29 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [cloudinary/cloudinary-vue] <cld-transformation :effect="effect" /&gt;生成的url中effect无效 (Issue #162) @emoyee You'll need to perform a transformation on the image via the URL transformations for the effect to be reflected in the img src attribute. https://cloudinary.com/documentation/image_transformations https://cloudinary.com/product_updates/cartoonify_effect For example, in the case of the user selecting "Cartoonify" The URL would need to change from https://res.cloudinary.com/demo/image/upload/v1/docs_uploading_example/pic1_doe7kg to https://res.cloudinary.com/demo/image/upload/e_cartoonify:20/v1/docs_uploading_example/pic1_doe7kg — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;

[PixelCook]

What current issues are you still needing help with?

[emoyee]

目前就只有那个effect得问题，别的没有了

[PixelCook]

https://codesandbox.io/s/vue-effect-changes-cerp8d

Here yah go

[emoyee]

我把代码全部复制的，这是渲染出来的url，依旧不对

[PixelCook]

Remember to set the effect before you load the image.

[emoyee]

设置了，还是渲染不上

[PixelCook]

The example works. Not sure what you're missing. Feel free to share your updated code and I can take a look.