Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
emoyee opened this issue May 30, 2022 · 29 comments
Open

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

emoyee opened this issue May 30, 2022 · 29 comments
Assignees
Labels
help wanted Extra attention is needed

Comments

@emoyee
Copy link

emoyee commented May 30, 2022

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

@emoyee
Copy link
Author

emoyee commented May 30, 2022

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
Copy link
Contributor

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

@emoyee
Copy link
Author

emoyee commented May 30, 2022

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

@aleksandar-cloudinary
Copy link

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
Copy link
Author

emoyee commented May 31, 2022

K0GP8HIP~PBD{K37ZP(13`3
It's still the same

@aleksandar-cloudinary
Copy link

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:

Screenshot 2022-05-31 at 23 28 16

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
Copy link
Author

emoyee commented Jun 1, 2022

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
Copy link

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
Copy link
Author

emoyee commented Jun 6, 2022

Hi,@rikuoCloudinary.I tried this URL, but I also changed el-select to select in my project, and the rendered URL remains unchanged.
image
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
Copy link

Can you please share your updated code?

@emoyee
Copy link
Author

emoyee commented Jun 7, 2022

<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
Copy link
Author

emoyee commented Jun 7, 2022

After this effect is assigned a value, the value will not change.
image
This effect should become art:quartz, but nothing has changed.

@PixelCook
Copy link

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
Copy link
Author

emoyee commented Jun 7, 2022

image
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
Copy link

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

@emoyee
Copy link
Author

emoyee commented Jun 7, 2022

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

@PixelCook
Copy link

_this.effect = this.effect;
Screen Shot 2022-06-07 at 13 28 35

@emoyee
Copy link
Author

emoyee commented Jun 8, 2022

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
Copy link

@emoyee
Copy link
Author

emoyee commented Jun 8, 2022

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

@emoyee emoyee closed this as completed Jun 9, 2022
@emoyee emoyee reopened this Jun 9, 2022
@rnamba-cloudinary
Copy link

rnamba-cloudinary commented Jun 9, 2022

@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
Copy link
Author

emoyee commented Jun 13, 2022 via email

@PixelCook
Copy link

What current issues are you still needing help with?

@emoyee
Copy link
Author

emoyee commented Jun 14, 2022

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

@PixelCook
Copy link

@emoyee
Copy link
Author

emoyee commented Jun 15, 2022

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

@PixelCook
Copy link

Remember to set the effect before you load the image.

@emoyee
Copy link
Author

emoyee commented Jun 15, 2022

设置了,还是渲染不上

@PixelCook
Copy link

Screen Shot 2022-06-15 at 10 32 15

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

@roeeba roeeba added the help wanted Extra attention is needed label May 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

6 participants