更新Cloudinary现在有了一个新的VueSDK.如果如果你打算在网上建立一个图片库，你必须认真考虑如何保护这些图片不被那些不购买它们的用户使用。虽然游客在购买前需要先看到图片，但需要有一种方法来确保即使是认真的买家也不会在未同意您的许可证的情况下使用图片条款。一解决这个问题的方法是在图像上覆盖粗体透明文本或图像（称为水印）。通过这样做，图像不能被使用，除非用户支付使用它的权利。添加水印不是一项简单的任务。你可以雇佣资源来使用照片编辑器手动添加水印。但是，对于一个庞大的图片库来说，这个过程是不可伸缩的。自动化向每个图像添加默认水印的过程可以使该过程更高效。网络研讨会Cloudinary，端到端媒体解决方案可以简化水印过程。Cloudinary提供存储、操作和交付图像和视频的服务。动态转换使您能够在上载时或通过调整传递URL来操作媒体文件，。其中一种转换——覆盖——可以用于水印图像。到看看这个动作，让我们构建一个Vue应用程序来将文件上载到Cloudinary并创建一个新的水印版本。注意：Vue.js版是一个用于构建用户界面和单个页面的开源JavaScript框架应用程序。创建一个Cloudinary帐户我们可以从在Cloudinary上创建一个帐户开始，并在构建之前检索我们的云凭据应用程序。免费注册Cloudinary帐户：当你注册成功后，您将看到一个包含云凭据的仪表板。你可以安全地储存它们以备将来使用用途：条款a服务器在深入研究Vue应用程序之前，我们需要设置服务器/API，Vue应用程序依赖它来上载图像。一个简单的节点服务器就可以了；谢天谢地，Cloudinary有一个节点SDK，可以让我们的生活变得更美好更简单。设置新节点项目npm:复制到剪贴板npm初始化安装以下依赖项：Express:节点的HTTP路由库Body Parser：将请求主体附加到Express的req对象上，因此需求主体connectmultiparty：使用内容类型multipart/form data解析http请求，也称为Vue文件上载。Cloudinary:Cloudinary的节点SDKCORS：启用CORS复制到剪贴板npm install express body parser connect multiparty cors cloudinary--保存创建索引.js位于项目文件夹根目录下的文件。这是此项目将拥有的唯一文件（除了包.json和依赖项）。导入此中已安装的依赖项文件：复制到剪贴板const Express=要求（'Express'）；const multipart=require（'connect-multiparty'）；const bodyParser=require（'body-parser'）const cloudinary=require（'cloudinary'）；const cors=要求（'cors'）；接下来，配置body解析器和cors global middleware:复制到剪贴板应用程序使用（cors（））；应用程序使用(bodyParser.urlencoded（{extended:false}）应用程序使用(bodyParser.json())使用在创建帐户：复制到剪贴板cloudinary.config文件({cloud_name:'云端名称'，api_key:'api_密钥'，api_secret:'秘密'});添加POST路由以处理传入请求：复制到剪贴板//多方中间件const multipartMiddleware=multipart（）；const app=Express（）；应用程序发布（'/upload'，多部分中间件，函数（req，res）{//将文件上载到cloudinarycloudinary.v2。上传器.upload(//要上载的文件req.files.image文件.路径，//叠加转换{宽度：700，覆盖：`文本：Times_90_粗体：${encodeURIComponent(请求正文水印)}`，重力："南"，y:80，颜色："#FFFF0080"}，//回调函数函数（错误，结果）{res.json文件（{data:result}）})});上面是指向/upload的POST路由。路由配置了多方中间件来解析上传的文件并附加到req对象。什么时候点击此路由，我们尝试使用Cloudinary的upload（）方法上载图像。它接受一个文件路径、可选的转换参数和一个回调函数，以便在上载时执行成功了提供的转换包括：宽度：图像应缩放到的宽度覆盖：应该放在图像上的内容。在我们的例子中是一个Times字体，90px字体大小，粗体文本。此文本通过需求主体文本应放在重力+y的位置。在这种情况下，从底部80像素颜色+不透明度：文本的颜色。#FFFF00是颜色，而在末尾附加的80是以百分比表示的不透明度值。你可以开始听端口：复制到剪贴板应用程序侦听(进程.env.PORT||5000，（）=>控制台.log（"正在运行…"）运行下面的命令来启动服务器，同时我们可以直接构建客户：抄送剪贴板节点索引.jsVue文件上传ClientOur前端应用程序将使用Vue（渐进式JavaScript框架）构建。要开始，请安装Vue CLI工具：复制到剪贴板npm安装-g vue cli接下来，使用Vue CLI工具创建一个简单的Vue项目已安装：复制到剪贴板vue init简单水印应用程序这个索引.html在脚手架上找到的文件足以让我们实现我们的想法。让我们首先为包含上载和水印文本的表单添加一个基本模板字段：复制到剪贴板水标