下载图片，因为我所有的代码都在一个名为上传器.js，它导出了一个名为upload的方法，我导入了这个方法，比如收件人：抄送至剪贴簿导入{upload}来自./uploader'Next，我在公司登记了这个把手结构：复制到clipboardthis.handleOnDownloadImage= this.handleOnDownloadImage.bind（this）然后我为onClick处理程序添加了函数，如以下内容：复制到clipboardhandleOnDownloadImage（事件）{结构svgObject=`数据：image/svg+xml；base64，${Base64.encode(this.container.innerHTML)}`event.target.href=上传（svgObject）//如果右键单击并下载，则非常有用event.target.download事件= '美人鱼.png'}看到完整的预览.js文件参考步骤2： 添加上载能力。到添加处理上传到Cloudinary的函数，我使用了unsigned upload方法，它不需要身份验证，使每个人都可以访问该图像。为了简化这个过程，我上传了一个原始的API POST请求，而不是使用SDK。以下是上载请求的详细信息：API终结点：https://api.cloudinary.com/v1_1/mermaid/upload，其中美人鱼是云的名字。如果您有Cloudinary帐户，请将代码中的美人鱼替换为您的云名称。JSON请求正文：文件：这是SVG对象的Base64编码字符串。*tag：这是一个值为mermaid的标签。您可以向其中添加更有意义的数据，例如，图表类型、图表上下文、关联项目等。上载预设：这是在您的帐户中定义的预设。以下是我的设置：这是上传的代码功能：复制到clipboardvar url='https://api.cloudinary.com/v1_1/mermaid/upload'var xhr=新的XMLHttpRequest（）var fd=新表单数据（）xhr.打开（'POST'，url，false）xhr.setRequestHeader（'X-required-With'，'XMLHttpRequest'）// fd.追加（'public_id'，publicId）fd.追加（"上传预设"，"美人鱼"）fd.追加（'标签'，'美人鱼'）fd.追加（'file'，svgImage）此函数从预览.js，调用upload函数，并获取上载的SVG图像的URL。我添加了以下Cloudinary转换来增强图像：将图像格式从SVG转换为PNG。应用三种变换：添加纯黑背景_rgb：00390b)对图像。有关详细信息，请参阅有关格式的Cloudinary API参考。将默认的透明背景替换为白色背景（b帴白色）。有关详细信息，请参阅背景上的Cloudinary API参考。在右下角覆盖Cloudinary图标（l_Cloudinary_图标，w_0.1，g_south_east，o_7）图标。有关详细信息，请参阅overlay上的Cloudinary API参考。然后Cloudinary返回最终的URL，浏览器在新的选项卡中打开图像。这是上传者的完整代码。下图说明了工作流。这里是序列的标记图表：复制到剪贴板序列图用户-->>美人鱼：创建图表美人鱼-->>美人鱼：生成SVG注意用户，美人鱼：更新正在编辑的图表用户-->>美人鱼：单击下载图像美人鱼-->>上载程序：传递SVG数据Uploader-->>Uploader：构建未签名的上载POST请求Uploader-->>Cloudinary:上载SVGCloudinary-->>上传程序：生成Cloudinary URLUploader-->>Uploader：构建转换后的PNG URL上传者，美人鱼：改变格式，透明度，覆盖上传程序-->>美人鱼：用Cloudinary PNG URL响应Mermaid-->>User:Display imageImage SecurityRecall集成使用了简单的unsigned upload方法。为了更安全，请改为切换到签名上载方法。此外，为了防止未经授权的用户将图像上载到您的帐户，请不要启用未签名上载。您还可以锁定对图像的访问。有关保护数字资产的各种方法的详细信息，请阅读这篇云计算支持文章。这种云端美人鱼的整合对你有用吗？如果是的话，一定要给它一个试试吧。关于cloudinarcolutionary为世界顶级品牌提供易于使用、基于云的媒体管理解决方案。Cloudinary在美国、英国和以色列设有办事处，迅速成为全球主要公司的开发者和营销人员用来简化富媒体管理和提供最佳最终用户的实际解决方案经验。为了更多信息，请访问网站或者在Twitter上关注我们