ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

前言

最近工作中遇到一个需求，是要实现asp.net百度ueditor图片上传添加水印的功能，通过查找相关的资料终于实现了，下面来给大家分享下实现的效果，文末给出了实例代码，大家可以参考学习，下面来一起学习学习吧。

效果图

首先来看下我们想要的功能界面，如果发觉这种效果不是你想要的，后面的内容就不用看了。

准备 

从官网下载的Ueditor压缩包，我下载的是ueditor1_4_3-utf8-net 这个版本，下面的介绍是对这个版本而言的。

修改界面

先找到我们要添加"加水印[checkbox]"的地方

由此可以知道，我们应该到image.html 这个文件去修改我们的html代码，在 image.html文件的第36行开始添加几行html代码，如下图：

刷新界面，单击多图上传>本地上传，界面就变成这样了：

寻找可行的办法

打开FireBug，选中控制台，我们上传一张图片，看一下请求信息：

这里可以看到，图片的上传是由controller.ashx 来处理的，而且有请求的参数：action 和 encode 。那我们再来看一下controller.ashx 具体是怎么处理的：

前台传过来的参数action 参数值为uploadimage ，类action 由派生类 UploadHandler进行实例化，UploadHandler 又通过构造函数注入 UploadConfig类的实例，最后由action.Process()调用：

其中File.WriteAllBytes 即为保存图片的方法。

上面就是图片上传中"本地上传"的主要处理代码。现在思考一下，我们要给图片加水印，应该怎么去做呢？

有人很快就反应过来了：我们可以从前台请求controller.ashx 时将带有是否要加水印的"字符串"一并传递到后台，后台通过判断就可以做出相应的处理了！

实现

1. 先找到请求controller.ashx 时，参数是从哪里添加上去的，js基础比较好的同学应该不难找到：

我们给他添加参数：“是否加水印”

2. 后台获取参数并进行判断是否要加水印

好了，这样就大功告成了~

上传一张图片看看：

其他

水印图片的处理，图片处理类可以通过这篇文章查看详细：http://www.jb51.net/article/108473.htm

示例下载：点击这里

总结

好了，以上就是关于ASP.NET Ueditor上传图片添加水印的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 如何在.Net版本UEditor中添加一个普通按钮

    如何在.Net版本UEditor中添加一个普通按钮

    第一步:找到ueditor.config.js文件中的toolbars数组,增加一个"hougelou"字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示. 复制代码 代码如下: //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的从新定义         , toolbars:[             ['fullscreen', 'source', '|', 'undo', 'redo', '|',      

  • 一步步教你在Asp.net Mvc中使用UEditor编辑器

    一步步教你在Asp.net Mvc中使用UEditor编辑器

    最近在配置.net mvc4项目使用ueditor编辑器,在配置过程中遇见了好几个问题,以此来记录解决办法. 首先去这里下载 然后重名一下下载的文件夹为ueditor(想自己起名字也可以,不过配置文件就要改成一样的了,这里为了避免麻烦,就跟配置文件里的名字保持一致了) 然后根据自己需要放到项目中,我是这么放的 上面建的文件夹也是跟配置文件保持一致,并不是非要照着这么做,这里只是跟配置文件保持一致,可以根据自己需要修改配置文件,自己想怎么建都行,看看配置文件就明白了 config.json /*

  • ASP.NET中集成百度编辑器UEditor

    ASP.NET中集成百度编辑器UEditor

    0.ueditor简介 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点.开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用. UEditor官网:http://ueditor.baidu.com/website/index.html UEditor官方文档地址: http://fex.baidu.com/ueditor/ 1.将ueditor包导入项目 将从官网上下载的开发包解压后包含到项目中 (注:最新的代码需要时基于

  • UEditor编辑器自定义上传图片或文件路径的修改方法

    使用ueditor编辑器,附件默认在ueditor/php/upload/,  我的附件地址是网站根目录下/data/upload/ ,需要修改ueditor如下: 第一步:打开php/config.php修改图片目录 复制代码 代码如下: return array( //图片目录    'imageSavePath' => array (        '../../../../data/upload'    ) ); 第二步:图片上传后去掉相对路径php/imageUp.php 复制代码 代

  • 关于UEditor编辑器远程图片上传失败的解决办法

    远程图片上传是个很有意思的东西,比如你从别的网站复制一段文件,如果文字中带有图片,编辑器会自动将图片提取出来,进行上传,从而不用担心远程图片失效后,自己本地也无法浏览. 通过检查,发现远程图片上传的操作页面是:getRemoteImage.php .打开后我们先配置 savePath ,因为不同用户使用,需要存放到不同的目录,以免混乱,也方便管理 修改后代码: 复制代码 代码如下: //远程抓取图片配置 if(isset($_SESSION['admin'])){ $myPath = 'http

  • 利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

    利用ASP.NET MVC+Bootstrap搭建个人博客之修复UEditor编辑时Bug(四)

    我的个人博客站在使用百度富文本编辑器UEditor修改文章时,遇到了一些问题,(不知是bug,还是我没有配置好).但总算找到了解决方法,在此记录下来. 小站首页文章列表显示为(显示去除HTML标签后的前600个字符): 具体在www.zynblog.com 遇到的问题: 正常来讲,进入文章修改页,只需将UEditor对应的textarea的value设置为文章Content就行了: $('#editor').val('@Html.Raw(this.Model.Contents)'); 最开始我就

  • ueditor编辑器不能上传图片问题的解决方法

    ueditor是百度编辑器,在本地的iis环境是可以上传图片了,但放在服务器的iis环境无法上传图片了,经过搜索发现是iis设置问题,引起这个问题的主要原因是,大多数虚拟主机不会给IIS匿名账号访问磁盘上的非用户目录,连读取的权限都没有,既然我们不能解决iis问题只有从代码设置了,具体如下. 在上传不了图片时,可以用浏览器的自带的调试工具查看报错,你可以看一个"拒绝访问或文件已存在"的错误.仔细调试分析,终于找到问题所在. 在它的upload.class.asp中,有如下一个函数: P

  • .NET UEditor使用方法说明

    在页面引用 复制代码 代码如下: <script src="Ueditor/editor_all.js" type="text/javascript"></script><script src="Ueditor/editor_config.js" type="text/javascript"></script><link href="Ueditor/themes/

  • .NET下为百度文本编辑器UEditor增加图片删除功能示例

    百度的这个编辑器,的确挺好,但也有些,让人不如意的,如每次更新,本来有功能给搞没了,旧版本的代码又不能直接拿过来组合用,对用户来很是不爽.今天下载了目前最新版1.2.5为版本看更新记录,主要是对表格做个修改,我下载用上,我靠,上传图片的删除功能给取消了.把旧版本的删除代码拿过来,不好使,还得我慢慢研究,闹心啊,闹心,折磨我半天. 1.首先修改服务器端ueditor\net下的文件imageManager.ashx,增加图片删除的处理.如下代码的Add部分所示: 复制代码 代码如下: <%@ We

  • ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    ASP.NET百度Ueditor编辑器实现上传图片添加水印效果

    前言 最近工作中遇到一个需求,是要实现asp.net百度ueditor图片上传添加水印的功能,通过查找相关的资料终于实现了,下面来给大家分享下实现的效果,文末给出了实例代码,大家可以参考学习,下面来一起学习学习吧. 效果图 首先来看下我们想要的功能界面,如果发觉这种效果不是你想要的,后面的内容就不用看了. 准备  从官网下载的Ueditor压缩包,我下载的是ueditor1_4_3-utf8-net 这个版本,下面的介绍是对这个版本而言的. 修改界面 先找到我们要添加"加水印[checkbox]

  • 百度UEditor编辑器使用教程与使用方法(图文)

    百度UEditor编辑器使用教程与使用方法(图文)

    我们在做网站的时候,网站后台系统一般都会用到web编辑器,今天笔者就给大家推荐一款百度UEditor编辑器.关于这款百度UEditor编辑器官网上也有简单的教程,不过看着比较费劲,今天笔者就跟大家分享一下百度UEditor编辑器使用教程与使用方法,希望对大家有所帮助. 第一:百度UEditor编辑器的官方下载地址 ueditor 官方地址:http://ueditor.baidu.com/website/index.html 开发文档地址:http://ueditor.baidu.com/web

  • 百度UEditor编辑器如何关闭抓取远程图片功能

    这个坑娘的功能,开始时居然不知道如何触发,以为有个按钮,点击一下触发,翻阅了文档,没有发现,然后再网络上看到原来是复制粘贴非白名单内的图片到编辑框时触发,坑娘啊............... 问题又来了:今天在写百度UEditor编辑器的[取远程图片功能]时有碰到:该功能如何关闭了? 又花了15分钟左右的时间查阅了[官方文档]以及[官方论坛],都没有找到解决办法,那就查阅下源文件看看,是否有相关的判断呢(本人JS非常烂) 于是马上查阅:ueditor.all.js文件,发现如下代码 复制代码 代

  • 为百度UE编辑器上传图片添加水印功能

    UEditor编辑器上传图片是自动提取的,但是图片没有水印功能,下面小编和各位一起来看看. UEditor编辑器没有上传图片加水印的功能,需要进行二次开发,本例是在PHPCMS系统中对百度编辑器进行二次开发,添加上传图片加水印功能. 首先打开UEditor编辑器文件目录的php文件夹,打开Uploader.class.php,把PHPCMS添加水印的方法复制过来,加到这个类所有成员方法最后面,然后进行修改如下: //图片加水印 public function watermark($source,

  • 百度ueditor组件上传图片后如何设置img里的alt属性

    百度ueditor组件,使用上传图片后,自动将上传图片显示在编辑器中,也就是插入了一个<img>标签.并设置了一个alt属性,其值是上传图片时的本地路径.暂时没发现哪里可以配置这个值.在查看发布的内容时,看到alt的值是一个磁盘路径,有点别扭. 可以在编辑完内容,保存到数据库时过滤下,修改alt的内容,也可以直接修改源码 function callback(){ try{ var link, json, loader, body = (iframe.contentDocument || ifr

  • vue2.x集成百度UEditor富文本编辑器的方法

    vue2.x集成百度UEditor富文本编辑器的方法

    最近开发vue项目过程中,由于产品需要在项目中添加富文本编辑器,也在npm上找了几个基于vue开发的富文本编辑器,但是对兼容性比较高,不能兼容到IE9,10.所以最后决定使用百度UEditor.然后又是各种找如何集成到vue中.好记性不如烂笔头,记录下来以便以后需要的时候可以直接用. 1.首先下载UEditor源码,将整个文件放到static文件夹中 2.然后将UEditor集成到项目中去. 找到src/main.js,在main.js中 import '../static/ueditor/ue

  • PHP如何搭建百度Ueditor富文本编辑器

    PHP如何搭建百度Ueditor富文本编辑器

    本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/u

随机推荐