在MVC3或asp.net中修改KindEditor实现上传图片时添加水印

主要修改两个文件:image.js和upload_json.ashx文件。

一、修改image.js文件

打开kindeditor/plugins/image目录下的image.js文件,找到

'<input type="button" class="ke-upload-button" value="' + lang.upload + '" />',

在这行代码下面添加

 '<label style="width:60px;">添加水印</label>',
            '<input type="text" name="water" value="请输入水印文字"/>',

二、修改upload_json.ashx文件。

打开kindeditor/asp.net目录下的upload_json.ashx文件,

找到

String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo) + fileExt;
        String filePath = dirPath + newFileName;
        imgFile.SaveAs(filePath);
        String fileUrl = saveUrl + newFileName;

这个地方,将之替换成

String newFileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", DateTimeFormatInfo.InvariantInfo);
        String filePath = dirPath + newFileName + fileExt;
        imgFile.SaveAs(filePath);       
        String fileUrl = saveUrl + newFileName + fileExt;
        //添加文字水印
        Image image = System.Drawing.Image.FromFile(filePath);
        Graphics g = Graphics.FromImage(image);
        g.DrawImage(image, 0, 0, image.Width, image.Height);
        Font f = new Font("Verdana", 32);
        Brush b = new SolidBrush(Color.Red);
        string addText = context.Request.Form["water"];
        g.DrawString(addText, f, b, 10, 10);
        g.Dispose();
        //保存加水印过后的图片,删除原始图片
        string newPath = dirPath + newFileName + "_new" + fileExt;
        image.Save(newPath);
        image.Dispose();
        if (File.Exists(filePath))
        {
            File.Delete(filePath);
        }
        fileUrl = saveUrl + newFileName + "_new" + fileExt;

这样就可以了。水印文字的颜色可由Color.Red这个地方来设置,位置可由g.DrawString(addText, f, b, 10, 10)这行代码的后面两个参数来设置。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
KindEditor是一款基于JavaScript的富文本编辑器,它可以方便地集成到网站,并支持图片上传功能。在Spring Boot实现KindEditor图片上传可以按照以下步骤进行: 1. 在Spring Boot添加以下依赖: ```xml <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.4</version> </dependency> ``` 2. 创建一个Controller用于处理图片上传请求,代码如下: ```java @RestController @RequestMapping("/upload") public class FileUploadController { @PostMapping("/image") public String uploadImage(HttpServletRequest request) throws Exception { MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; MultipartFile file = multipartRequest.getFile("imgFile"); String filename = file.getOriginalFilename(); String suffix = filename.substring(filename.lastIndexOf(".") + 1); String newFilename = UUID.randomUUID().toString() + "." + suffix; String savePath = "D:/upload/images/" + newFilename; // 上传文件保存路径,根据实际情况修改 File destFile = new File(savePath); if (!destFile.getParentFile().exists()) { destFile.getParentFile().mkdirs(); } file.transferTo(destFile); String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/images/" + newFilename; // 图片访问URL,根据实际情况修改 return "{\"error\":0,\"url\":\"" + url + "\"}"; } } ``` 3. 在HTML页面集成KindEditor,并设置图片上传的请求地址,代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>KindEditor图片上传示例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.css" /> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/kindeditor/4.1.11/kindeditor-all.min.js"></script> </head> <body> <textarea id="editor"></textarea> <script> KindEditor.ready(function(K) { K.create('#editor', { uploadJson: '/upload/image', allowFileManager: false }); }); </script> </body> </html> ``` 4. 启动Spring Boot应用,访问HTML页面即可进行图片上传上传的图片会保存在指定的路径,并返回图片的访问URL给KindEditor进行显示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值