多云用户想用UI制作图片文本叠加后再嵌入网页或下载营销运动云媒体库UI生成这种叠加过程需要略微学习曲线,特别是当它们需要多字体或文本线时,甚至经验丰富的用户都可能发现难以实现
容我向下展示一个简单工具,我最近为容易创建文本叠加,包括多行字体
创建云内图像文本重叠通常通过编辑URL实现,例如:
<\/Image>","codeSnippet":"
![]()
\n\t
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","codeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","codeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation>
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","codeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('flowers.jpg', {transformation: [ {width: 500, crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\")} ]}).toHtml();","codeSnippet":"cloudinary.imageTag('flowers.jpg', {transformation: [\n {width: 500, crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\")}\n ]}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"flowers.jpg\").image(transformation=[ {'width': 500, 'crop': \"scale\"}, {'overlay': {'font_family': \"Arial\", 'font_size': 80, 'text': \"Flowers\"}} ])","codeSnippet":"CloudinaryImage(\"flowers.jpg\").image(transformation=[\n {'width': 500, 'crop': \"scale\"},\n {'overlay': {'font_family': \"Arial\", 'font_size': 80, 'text': \"Flowers\"}}\n ])","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('flowers.jpg'))\n\t->resize(Resize::scale()->width(500))\n\t->overlay(Overlay::source(\n\tSource::text(\"Flowers\",(new TextStyle(\"Arial\",80)))));","codeSnippet":"(new ImageTag('flowers.jpg'))\n\t->resize(Resize::scale()->width(500))\n\t->overlay(Overlay::source(\n\tSource::text(\"Flowers\",(new TextStyle(\"Arial\",80)))));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"flowers.jpg\", array(\"transformation\"=>array( array(\"width\"=>500, \"crop\"=>\"scale\"), array(\"overlay\"=>array(\"font_family\"=>\"Arial\", \"font_size\"=>80, \"text\"=>\"Flowers\")) )))","codeSnippet":"cl_image_tag(\"flowers.jpg\", array(\"transformation\"=>array(\n array(\"width\"=>500, \"crop\"=>\"scale\"),\n array(\"overlay\"=>array(\"font_family\"=>\"Arial\", \"font_size\"=>80, \"text\"=>\"Flowers\"))\n )))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().width(500).crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\"))).imageTag(\"flowers.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation()\n .width(500).crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\"))).imageTag(\"flowers.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"flowers.jpg\", :transformation=>[ {:width=>500, :crop=>\"scale\"}, {:overlay=>{:font_family=>\"Arial\", :font_size=>80, :text=>\"Flowers\"}} ])","codeSnippet":"cl_image_tag(\"flowers.jpg\", :transformation=>[\n {:width=>500, :crop=>\"scale\"},\n {:overlay=>{:font_family=>\"Arial\", :font_size=>80, :text=>\"Flowers\"}}\n ])","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Crop(\"scale\").Chain() .Overlay(new TextLayer().FontFamily(\"Arial\").FontSize(80).Text(\"Flowers\"))).BuildImageTag(\"flowers.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation()\n .Width(500).Crop(\"scale\").Chain()\n .Overlay(new TextLayer().FontFamily(\"Arial\").FontSize(80).Text(\"Flowers\"))).BuildImageTag(\"flowers.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('flowers.jpg').transformation(Transformation()\n\t.addTransformation(\"w_500\/l_text:Arial_80:Flowers\"));","codeSnippet":"cloudinary.image('flowers.jpg').transformation(Transformation()\n\t.addTransformation(\"w_500\/l_text:Arial_80:Flowers\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setCrop(\"scale\").chain() .setOverlay(\"text:Arial_80:Flowers\")).generate(\"flowers.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\n .setWidth(500).setCrop(\"scale\").chain()\n .setOverlay(\"text:Arial_80:Flowers\")).generate(\"flowers.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().width(500).crop(\"scale\").chain() .overlay(new TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\"))).generate(\"flowers.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation()\n .width(500).crop(\"scale\").chain()\n .overlay(new TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\"))).generate(\"flowers.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('flowers.jpg').transformation(Transformation()\n\t.addTransformation(\"w_500\/l_text:Arial_80:Flowers\"));","codeSnippet":"cloudinary.image('flowers.jpg').transformation(Transformation()\n\t.addTransformation(\"w_500\/l_text:Arial_80:Flowers\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"flowers.jpg\")\n\t resize(Resize.scale() { width(500) })\n\t overlay(Overlay.source(\n\tSource.text(\"Flowers\",TextStyle(\"Arial\",80)))) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"flowers.jpg\")\n\t resize(Resize.scale() { width(500) })\n\t overlay(Overlay.source(\n\tSource.text(\"Flowers\",TextStyle(\"Arial\",80)))) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"flowers.jpg\", {transformation: [ {width: 500, crop: \"scale\"}, {overlay: new cloudinary.TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\")} ]})","codeSnippet":"$.cloudinary.image(\"flowers.jpg\", {transformation: [\n {width: 500, crop: \"scale\"},\n {overlay: new cloudinary.TextLayer().fontFamily(\"Arial\").fontSize(80).text(\"Flowers\")}\n ]})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","codeSnippet":"new CloudinaryImage(\"flowers.jpg\")\n .resize(scale().width(500))\n .overlay(source(text(\"Flowers\", new TextStyle(\"Arial\", 80))));","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/w_500\/l_text:Arial_80:Flowers\/flowers.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"width":"500"},{"overlay":"text:Arial_80:Flowers"}],"transformation_string":"w_500\/l_text:Arial_80:Flowers","url_suffix":"","version":"","secure":true,"public_id":"flowers.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
URL包含下列参数:
花.jpg:图像名W_500:图像覆盖宽度l_text:叠加类型,在此例文本
上层搭建为主创建文本重叠,例如新年快乐!
- 编码文本URL,即
Happy%20New%20Year%21.
- 定位字体文件假设它
fonts/Roboto-Thin.ttf.
- 完全URL正确语法构建如下:
<\/Image>","codeSnippet":"
![]()
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")}).toHtml();","codeSnippet":"cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sample.jpg\").image(overlay={'public_id': \"fonts\", 'text': \"Roboto-Thin.ttf_30\"})","codeSnippet":"CloudinaryImage(\"sample.jpg\").image(overlay={'public_id': \"fonts\", 'text': \"Roboto-Thin.ttf_30\"})","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sample.jpg'))\n\t->overlay(Overlay::source(\n\tSource::text(\"Roboto-Thin.ttf_30\",\"fonts\")));","codeSnippet":"(new ImageTag('sample.jpg'))\n\t->overlay(Overlay::source(\n\tSource::text(\"Roboto-Thin.ttf_30\",\"fonts\")));","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", array(\"overlay\"=>array(\"public_id\"=>\"fonts\", \"text\"=>\"Roboto-Thin.ttf_30\")))","codeSnippet":"cl_image_tag(\"sample.jpg\", array(\"overlay\"=>array(\"public_id\"=>\"fonts\", \"text\"=>\"Roboto-Thin.ttf_30\")))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"))).imageTag(\"sample.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"))).imageTag(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", :overlay=>{:public_id=>\"fonts\", :text=>\"Roboto-Thin.ttf_30\"})","codeSnippet":"cl_image_tag(\"sample.jpg\", :overlay=>{:public_id=>\"fonts\", :text=>\"Roboto-Thin.ttf_30\"})","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\"Roboto-Thin.ttf_30\").PublicId(\"fonts\"))).BuildImageTag(\"sample.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\"Roboto-Thin.ttf_30\").PublicId(\"fonts\"))).BuildImageTag(\"sample.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\"));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\"text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\")).generate(\"sample.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\"text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\")).generate(\"sample.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"))).generate(\"sample.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"))).generate(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\"));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t overlay(Overlay.source(\n\tSource.text(\"Roboto-Thin.ttf_30\",\"fonts\"))) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t overlay(Overlay.source(\n\tSource.text(\"Roboto-Thin.ttf_30\",\"fonts\"))) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"sample.jpg\", {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")})","codeSnippet":"$.cloudinary.image(\"sample.jpg\", {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\"))\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\/sample.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"overlay":"text:fonts:Roboto-Thin.ttf_30:Happy New Year!"}],"transformation_string":"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!","url_suffix":"","version":"","secure":true,"public_id":"sample.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
颜色黄色并定位左上角的重叠性,使URL像这样阅读:
<\/Image>","codeSnippet":"
![]()
\n\t
\n<\/Image>","status":0,"statusText":"Ok","displayName":"React","packageName":"cloudinary-react","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue_2","framework":"vue_2","language":"vue","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"@cloudinary\/vue","packageStatus":"","packageVersion":"1.x"},{"sdkId":"vue","framework":"vue","language":"vue","rawCodeSnippet":"
<\/cld-image>","codeSnippet":"
\n\t
\n<\/cld-image>","status":0,"statusText":"Ok","displayName":"Vue.js","packageName":"cloudinary-vue","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"angular_2","framework":"angular_2","language":"angular","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/ng","packageStatus":"","packageVersion":"1.x"},{"sdkId":"angular","framework":"angular","language":"angular","rawCodeSnippet":"
<\/cl-transformation> <\/cl-image>","codeSnippet":"
\n\t
\n\t<\/cl-transformation>\n<\/cl-image>","status":0,"statusText":"Ok","displayName":"Angular","packageName":"@cloudinary\/angular-5.x","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"js_2","framework":"js_2","language":"js","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","status":0,"statusText":"Ok","displayName":"JS","packageName":"@cloudinary\/url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"js","framework":"js","language":"js","rawCodeSnippet":"cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"), gravity: \"north_west\", color: \"#FFF000\"}).toHtml();","codeSnippet":"cloudinary.imageTag('sample.jpg', {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"), gravity: \"north_west\", color: \"#FFF000\"}).toHtml();","status":0,"statusText":"Ok","displayName":"JS","packageName":"cloudinary-core","packageStatus":"legacy","packageVersion":"2.x"},{"sdkId":"python","framework":"python","language":"python","rawCodeSnippet":"CloudinaryImage(\"sample.jpg\").image(overlay={'public_id': \"fonts\", 'text': \"Roboto-Thin.ttf_30\"}, gravity=\"north_west\", color=\"#FFF000\")","codeSnippet":"CloudinaryImage(\"sample.jpg\").image(overlay={'public_id': \"fonts\", 'text': \"Roboto-Thin.ttf_30\"}, gravity=\"north_west\", color=\"#FFF000\")","status":0,"statusText":"Ok","displayName":"Python","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"php_2","framework":"php_2","language":"php","rawCodeSnippet":"(new ImageTag('sample.jpg'))\n\t->overlay(Overlay::source(\n\tSource::text(\"Roboto-Thin.ttf_30\",\"fonts\")\n\t->textColor(Color::rgb(\"FFF000\"))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::northWest()))\n\t)\n\t);","codeSnippet":"(new ImageTag('sample.jpg'))\n\t->overlay(Overlay::source(\n\tSource::text(\"Roboto-Thin.ttf_30\",\"fonts\")\n\t->textColor(Color::rgb(\"FFF000\"))\n\t)\n\t->position((new Position())\n\t->gravity(\n\tGravity::compass(\n\tCompass::northWest()))\n\t)\n\t);","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"","packageVersion":"2.x"},{"sdkId":"php","framework":"php","language":"php","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", array(\"overlay\"=>array(\"public_id\"=>\"fonts\", \"text\"=>\"Roboto-Thin.ttf_30\"), \"gravity\"=>\"north_west\", \"color\"=>\"#FFF000\"))","codeSnippet":"cl_image_tag(\"sample.jpg\", array(\"overlay\"=>array(\"public_id\"=>\"fonts\", \"text\"=>\"Roboto-Thin.ttf_30\"), \"gravity\"=>\"north_west\", \"color\"=>\"#FFF000\"))","status":0,"statusText":"Ok","displayName":"PHP","packageName":"cloudinary_php","packageStatus":"legacy","packageVersion":"1.x"},{"sdkId":"java","framework":"java","language":"java","rawCodeSnippet":"cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")).gravity(\"north_west\").color(\"#FFF000\")).imageTag(\"sample.jpg\");","codeSnippet":"cloudinary.url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")).gravity(\"north_west\").color(\"#FFF000\")).imageTag(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Java","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"ruby","framework":"ruby","language":"ruby","rawCodeSnippet":"cl_image_tag(\"sample.jpg\", :overlay=>{:public_id=>\"fonts\", :text=>\"Roboto-Thin.ttf_30\"}, :gravity=>\"north_west\", :color=>\"#FFF000\")","codeSnippet":"cl_image_tag(\"sample.jpg\", :overlay=>{:public_id=>\"fonts\", :text=>\"Roboto-Thin.ttf_30\"}, :gravity=>\"north_west\", :color=>\"#FFF000\")","status":0,"statusText":"Ok","displayName":"Ruby","packageName":"cloudinary","packageStatus":"","packageVersion":"1.x"},{"sdkId":"csharp","framework":"csharp","language":"csharp","rawCodeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\"Roboto-Thin.ttf_30\").PublicId(\"fonts\")).Gravity(\"north_west\").Color(\"#FFF000\")).BuildImageTag(\"sample.jpg\")","codeSnippet":"cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().Text(\"Roboto-Thin.ttf_30\").PublicId(\"fonts\")).Gravity(\"north_west\").Color(\"#FFF000\")).BuildImageTag(\"sample.jpg\")","status":0,"statusText":"Ok","displayName":".NET","packageName":"CloudinaryDotNet","packageStatus":"","packageVersion":"1.x"},{"sdkId":"dart","framework":"dart","language":"dart","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\"));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\"));","status":0,"statusText":"Ok","displayName":"Dart","packageName":"cloudinary_dart","packageStatus":"","packageVersion":"0.x"},{"sdkId":"swift","framework":"swift","language":"swift","rawCodeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\"text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\").setGravity(\"north_west\").setColor(\"#FFF000\")).generate(\"sample.jpg\")!, cloudinary: cloudinary)","codeSnippet":"imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay(\"text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21\").setGravity(\"north_west\").setColor(\"#FFF000\")).generate(\"sample.jpg\")!, cloudinary: cloudinary)","status":0,"statusText":"Ok","displayName":"iOS","packageName":"cloudinary","packageStatus":"","packageVersion":"3.x"},{"sdkId":"android","framework":"android","language":"android","rawCodeSnippet":"MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")).gravity(\"north_west\").color(\"#FFF000\")).generate(\"sample.jpg\");","codeSnippet":"MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\")).gravity(\"north_west\").color(\"#FFF000\")).generate(\"sample.jpg\");","status":0,"statusText":"Ok","displayName":"Android","packageName":"cloudinary-android","packageStatus":"","packageVersion":"1.x"},{"sdkId":"flutter","framework":"flutter","language":"flutter","rawCodeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\"));","codeSnippet":"cloudinary.image('sample.jpg').transformation(Transformation()\n\t.addTransformation(\"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000\"));","status":0,"statusText":"Ok","displayName":"Flutter","packageName":"cloudinary_flutter","packageStatus":"","packageVersion":"0.x"},{"sdkId":"kotlin","framework":"kotlin","language":"kotlin","rawCodeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t overlay(Overlay.source(\n\tSource.text(\"Roboto-Thin.ttf_30\",\"fonts\") {\n\t textColor(Color.rgb(\"FFF000\"))\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.northWest()))\n\t })\n\t }) \n}.generate()","codeSnippet":"cloudinary.image {\n\tpublicId(\"sample.jpg\")\n\t overlay(Overlay.source(\n\tSource.text(\"Roboto-Thin.ttf_30\",\"fonts\") {\n\t textColor(Color.rgb(\"FFF000\"))\n\t }) {\n\t position(Position() {\n\t gravity(\n\tGravity.compass(\n\tCompass.northWest()))\n\t })\n\t }) \n}.generate()","status":0,"statusText":"Ok","displayName":"Kotlin","packageName":"kotlin-url-gen","packageStatus":"","packageVersion":"1.x"},{"sdkId":"jquery","framework":"jquery","language":"jquery","rawCodeSnippet":"$.cloudinary.image(\"sample.jpg\", {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"), gravity: \"north_west\", color: \"#FFF000\"})","codeSnippet":"$.cloudinary.image(\"sample.jpg\", {overlay: new cloudinary.TextLayer().text(\"Roboto-Thin.ttf_30\").publicId(\"fonts\"), gravity: \"north_west\", color: \"#FFF000\"})","status":0,"statusText":"Ok","displayName":"jQuery","packageName":"cloudinary-jquery","packageStatus":"","packageVersion":"2.x"},{"sdkId":"react_native","framework":"react_native","language":"react_native","rawCodeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","codeSnippet":"new CloudinaryImage(\"sample.jpg\").overlay(\n source(text(\"Roboto-Thin.ttf_30\", \"fonts\").textColor(\"#FFF000\")).position(\n new Position().gravity(compass(\"north_west\"))\n )\n);","status":0,"statusText":"Ok","displayName":"React Native","packageName":"cloudinary-react-native","packageStatus":"","packageVersion":"0.x"}]" parsed-url="{"url":"https:\/\/res.www.aaaalireno.com\/demo\/image\/upload\/l_text:fonts:Roboto-Thin.ttf_30:Happy%20New%20Year%21,g_north_west,co_rgb:FFF000\/sample.jpg","cloud_name":"demo","host":"res.www.aaaalireno.com","type":"upload","resource_type":"image","transformation":[{"overlay":"text:fonts:Roboto-Thin.ttf_30:Happy New Year!","gravity":"north_west","color":"rgb:FFF000"}],"transformation_string":"l_text:fonts:Roboto-Thin.ttf_30:Happy New Year!,g_north_west,co_rgb:FFF000","url_suffix":"","version":"","secure":true,"public_id":"sample.jpg","extension":"jpg","format":"jpg","format_code":true,"signature":"","private_cdn":false,"result_asset_type":"image"}" with-url="true" >
加载代码示例
增加多行覆盖时,你必须构造链式变换带多构件,每个执行段叠加越需要叠加,相关图像URL越复杂媒体库UI提供快捷方式,非技术专业人员常常负责创建文本叠加程序,熟悉URL格式和UI可能需要较长时间。
简单替代方法 利用这个文本复用工具html-javaScript应用
最长三次叠加,每个加文本、字体面孔、字体大小和位置
假想您想创建三行文本叠加并包含以下属性图像并定位线在不同图像位置
| 文本翻译 |
颜色 (RGB) |
大小问题 |
| 无恐惧.. |
FFF000 |
30码 |
| CoVID-19疫苗 |
千FFF |
35码 |
| 希望2021会比2020年好 |
F0F0F0 |
30码 |
从您的云型账号媒体库选择图像信息映射顶端,然后带您到库中搜索或导航图像下图显示
输入文本覆盖文本字段注意这些字段可选性,即您可输入一到三行文本
后选择字体表情并输入字体大小
点头指定重叠位置PICK系统按钮.或输入 X和Y坐标例子中左上角为原位置(X=0Y=0)。
下图中,我点击图像选择第一文本行位置后我调整位置,并以此为基础,设置二行和三行位置
点击验证搭建预览按钮.修改时点击清空并编辑设置
一对结果满意,即点击元件创建带叠加图像参考工具显示云式URL,用它可将图像嵌入网页或营销素材
使用上文描述的简单工具,你可以看到多线或多段叠加设置一览、轻松配置或编辑这些设置,避免程序化生成过程复杂并往往耗时自我搭建工具 现有部件上, 我会增强它或添加特征 时不时提高它的可用性和强健性如果你喜欢你所看到的东西, 请投票支持这个工具产品路径图.
给工具试一试问题请开通Github
