cloudinary-vue
cloudinary-vue copied to clipboard
cloudinary
<cld-transformation :effect="effect" />生成的url中effect无效
代码：<cld-transformation :effect="effect" />
生成结果：
这是生成错误的url
代码：<cld-transformation effect="art:athena" />
生成结果：
这便是生成正确的url
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);
}
}
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?
It's still the same
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.
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.
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!
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.
<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>
After this effect is assigned a value, the value will not change.
This effect should become art:quartz, but nothing has changed.
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);
},
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);
}
How can I change it? This needs an initial value, otherwise there will be errors.
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>
Reference this sandbox https://codesandbox.io/s/lively-wood-cerp8d?file=/src/App.vue
The code is modified according to this sandbox, but this effect is still not rendered.I copied all the code directly.
@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
你好，有收到我回复的邮件吗？已经有几天了，我并没有看到回复，请问有什么进展吗？
------------------ 原始邮件 ------------------ 发件人: "cloudinary/cloudinary-vue" @.>; 发送时间: 2022年6月10日(星期五) 凌晨3:29 @.>; @.@.>; 主题: Re: [cloudinary/cloudinary-vue] <cld-transformation :effect="effect" />生成的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: @.***>
我把代码全部复制的，这是渲染出来的url，依旧不对
The example works. Not sure what you're missing. Feel free to share your updated code and I can take a look.