精华内容
下载资源
问答
  • 2022-02-28 16:43:23

    uni-app微信小程序图片加水印,点击看这篇

    需求场景: 要求上传图片,并给图片添加水印。传给后端的也是有水印的图片。

    逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到画布上,在画布上添加文字(既水印),最后将画布导出成图片,得到的src就是一张有水印的图片。

    文末代码可直接复制使用!!!
    在这里插入图片描述

    此代码可直接复制使用!!!有效的记得点个赞收藏支持下!

    <template>
      <div class="content">
        <input type="file" class="box-orc-input" @change="uploadPic($event)" />
        <div>
          <img class="img_box" :src="imgsrc" alt="">
          <div>原图base:{{imgsrc}}</div>
        </div>
        <div>
          <img class="img_box" :src="img2" alt="">
          <div>水印图base:{{img2}}</div>
        </div>
    
      </div>
    </template>
    
    <script>
    function ie9 () {
      if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
        return true
      } else {
        return false
      }
    }
    export default {
      data () {
        return {
          imgsrc: '',//原图片地址
          img2: '',//水印图片地址
        }
      },
      methods: {
        // 通过input上传图片
        uploadPic (event) {
          console.log(event)
          if (event.target.files[0].type != 'image/png' && event.target.files[0].type != 'image/jpg' && event.target.files[0].type != 'image/jpeg') {
            return this.$message.warning('请选择上传图片,格式支持:.png 或 .jpeg 或 .jpeg')
          }
          if (ie9()) {
            this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能,请升级IE浏览器或者用其他浏览器操作。')
            retrun
          }
          //iE9及以下版本IE浏览器暂不支持该功能,请升级IE浏览器或者用其他浏览器操作。
          let inputDOM = event.target
          let _this = this
          var reader = new FileReader()
          reader.readAsDataURL(inputDOM.files[0])
          reader.onload = function (e) {
            _this.imgsrc = e.target.result//这是原图的base
    
            _this.getImgWay(e)
            inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后 34行的打印 就看不到 event.target.files 文件数据(可以先注释此行看下数据--就是图片文件)   )
          }
        },
        // 根据图片的base获取图片的信息
        getImgWay (e) {
          // console.log(e)
          let _this = this
          // 组装img图片
          var base = e.target.result //图片的base64码,可以直接赋值给img的src
          let res = base.split(',')
          var image = new Image()
          image.src = base //base64数据--赋值
    
          console.log('原图片信息', image)
          image.onload = function () {
            _this.imgToCanvas(image)
          }
          return false
        },
        // 把image 转换为 canvas对象
        imgToCanvas (image, btn_type, YYZZ) {
          let _this = this
          // 创造画布
          var canvas = document.createElement("canvas")
          canvas.width = image.width
          canvas.height = image.height
          var cxt = canvas.getContext("2d")
          // 将图片绘制上去
          cxt.drawImage(image, 0, 0) // 第一个参数是图片(不能是src 否则会报错,是src的话需要先new Image(),具体看上个getImgWay方法) 第二、三是图片在画布位置 第四、五是将图片绘制成多大宽高(不写四五就是原图宽高)
          // 给画布上添加水印文字
          cxt.font = "20px Georgia"
          cxt.fillText("--水印文字 可自定义--", (image.width - 200), (image.width / 10), 300)
          //将画布导出成图片
          _this.canvasToImg(canvas, btn_type, YYZZ)
          return canvas
        },
        //canvas转换为image
        canvasToImg (canvas) {
          let _this = this
          console.log(4, canvas)
          var src = canvas.toDataURL("image/jpeg")
          console.log('将绘有水印和img的canvas 转成图片获取到src', src)
          _this.img2 = src
          return src
        },
      }
    }
    </script>
    
    <style>
    .img_box {
      /* width: 100px;
      height: 100px; */
    }
    .content {
      padding: 20upx;
    }
    .photo,
    .photo image {
      display: inline-block;
      width: 220upx;
      height: 220upx;
    }
    .btnAddPhoto {
      width: 220upx;
      height: 220upx;
      border: dashed 1px #aaa;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50upx;
    }
    canvas {
      border: solid 1px gray;
      position: absolute;
      left: 5000upx;
    }
    </style>
    
    
    
    更多相关内容
  • 1、在网上查看了很多 资料,一般合成图片的方法,有两种;这种要简单、灵活些; 2、做成一哥demo,供学习参考;
  • 一个基于C# winform实现的图片加水印工具的Watermark源码文件,C#图形处理相关示例,有一定参考价值。可加文字水印和图片水印,使用System.Drawing.Image copyImage对图片进行加水印操作,保存加水印过后的图片会...
  • 给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。 canvas元素其实就是一个画布,我们可以很方便地绘制一些文字、线条...
  • Android 图片添加水印的实现方法 实现效果图: 手机端打水印(文字和图片)使用的是Bitmap、Matrix和Canvas类的一些方法, 可以实现拉伸、旋转、位移等等效果。 原理很简单, 就是在画布Canvas上绘制图形、图片、...
  • 需求: 微信小程序,上传图片,成功后图片水印,既图片的网络地址也有水印。 上传图片使用uni-app的uni.chooseImage()方法,水印是用canvas。 未知问题: 小程序模拟器上,上传第一张图片没问题,再次上传第二张...

    原博主点击查看

    需求: 微信小程序,上传图片,成功后图片有水印,既图片的网络地址也有水印。
    上传图片使用uni-app的uni.chooseImage()方法,水印是用canvas。

    以下代码可以直接使用:(注意:如果遇到canvas无效或者图片不显示问题:可能就是你在自定义组件内使用canvas,但是没有传递第二个参数this导致的,详见已知问题和解决办法)

    <template>
      <view class="content">
        <view v-for="(photo,index) in photoData" :key="index" class="photo">
          <image :src="photo" @click="previewPhoto(photo,photoData)"></image>
          <view class="closeA" @tap="deletePhoto(index)">&times;</view>
        </view>
        <view class="btnAddPhoto" @click="btnAddPhoto">+</view>
        <!-- 获取有水印的图片过程 必须使canvas显示 获取完成后在隐藏掉canvas 配合canvas样式定位 使其错位 -->
        <!-- canvas的隐藏 在小程序中 使用 v-if或display:none 都不生效   使用hidden属性 true隐藏 false显示 -->
        <canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas" :hidden='flagC'></canvas>
      </view>
    </template>
    
    <script>
    export default {
      data() {
        return {
          flagC: false,
          photoData: [],
          photoArray: [],
          canvasWidth: '',
          canvasHeight: '',
          photoIndex: 0
        }
      },
      onLoad() {
      },
      methods: {
        // 添加图片事件
        btnAddPhoto() {
          this.photoIndex = 0;
          let ctx = uni.createCanvasContext('myCanvas');
          uni.chooseImage({
            count: 6,
            sourceType: ['album', 'camera'],
            success: res => {
              this.photoArray = res.tempFilePaths;
              uni.showLoading({
                title: "图片加载中..."
              })
              this.callAddWaterMart();
            }
          })
        },
    
        // 调用添加水印的函数
        callAddWaterMart() {
          this.addWaterMark(() => {
            if (this.photoIndex < this.photoArray.length - 1) {
              this.photoIndex++;
              this.callAddWaterMart()
            } else {
              uni.hideLoading()
            }
          })
        },
    
        // 添加水印
        addWaterMark(callback) {
          this.flagC = false
          uni.getImageInfo({
            // 注意此时的地址是正常的图片地址 以下是给图片添加水印返回新的url地址
            src: this.photoArray[this.photoIndex],
            success: res => {
              this.canvasWidth = `${res.width}px`;
              this.canvasHeight = `${res.height}px`;
              var ctx = uni.createCanvasContext('myCanvas');
              // 在自定义组件内 需要传递第二参数 this canvas才生效
              // var ctx = uni.createCanvasContext('myCanvas', this);
              ctx.clearRect(0, 0, res.width, res.height);
              ctx.beginPath();
              ctx.drawImage(this.photoArray[this.photoIndex], 0, 0, res.width, res.height); // 第一个参数是图片 第二、三是图片在画布位置 第四、五是将图片绘制成多大宽高(不写四五就是原图宽高)
    
              // 为图片添加水印
              ctx.translate(res.width / 2, res.height / 2);
              ctx.rotate(45 * Math.PI / 180);
    
    		  //这部分是水印的大小位置和数量
              let horizontal = res.width / 4;
              let vertical = res.height / 3;
              let fonstsize = res.width / 30;
              for (let i = 0; i <= 2; i++) {
                for (let j = 0; j <= 2; j++) {
                  ctx.beginPath();
                  ctx.setFontSize(fonstsize);
                  ctx.setFillStyle("rgba(255,255,255,0.3)");
                  // ctx.fillText("-仅供保险投保使用-", i * horizontal - res.width / 2, j * vertical - res.height / 2);
                  ctx.fillText("--仅供保险投保使用--", (i * horizontal - res.width / 2) * 2, j * vertical - res.height / 2, fonstsize*15*2);
                }
              }
    
              // 开始绘制添加水印的图片并显示在页面中
              ctx.draw(false, () => {
                setTimeout(() => {
                  console.log("asdf");
                  uni.canvasToTempFilePath({
                    canvasId: "myCanvas",
                    success: res => {
                      // 注意此时的地址是加了水印的图片地址(直接url输入浏览器也可以查看包含水印)
                      console.log(123,res.tempFilePath)
                      this.flagC = true
                      this.photoData.push(res.tempFilePath);
                      callback();
                    }
                  })
                // 在自定义组件内 需要传递第二参数 this canvas才生效
               // }, this)
                }, 500)
              });
            }
          })
        },
    
        // 预览图片
        previewPhoto(url, list) {
          uni.previewImage({
            current: url,
            urls: list.map(item => item)
          })
        },
    
        // 删除图片
        deletePhoto(index) {
          this.photoArray.splice(index, 1);
          this.photoData.splice(index, 1);
          console.log(this.photoArray)
        }
      }
    }
    </script>
    
    <style>
    .content {
      padding: 20upx;
    }
    .photo,
    .photo image {
      display: inline-block;
      width: 220upx;
      height: 220upx;
    }
    .btnAddPhoto {
      width: 220upx;
      height: 220upx;
      border: dashed 1px #aaa;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 50upx;
    }
    canvas {
      border: solid 1px gray;
      position: absolute;
      left: 5000upx;
    }
    </style>
    
    

    未知问题: 小程序模拟器上,上传第一张图片没问题,再次上传第二张图片,会发现第二张图片显示出来的是两张图片的叠加图;但是在真机使用时候,却不会出现也不影响(故没有处理,猜测解决方案:可以再每次上传图片处理水印时候,使用不同的canvas元素,不要使用同一个去做水印);

    已知问题:
    1.若canvas图片渲染不出来,也就是uni.createCanvasContext()方法无效
    2.或ctx.draw()无效,
    3.或uni.canvasToTempFilePath()接口总是失败;
    4.或拿不到图片的tempFilePath;以上问题都是一个原因导致

    (查看uni-app文档或者微信小程序canvas文档可知原因:1.是需要在template模板里有canvas元素;2.是在自定义组件或者公共组件内,必须传递第二个参数this)。

    解决办法就是: createCanvasContext和canvasToTempFilePath两个地方的方法需要传递第二参数this

    var ctx = uni.createCanvasContext('myCanvas', this);
    
    uni.canvasToTempFilePath({获取图片的内容代码 详见下面}, this)
    

    截图是uni-app的文档:在这里插入图片描述
    在这里插入图片描述

    微信小程序工具 操作上传一张图:
    在这里插入图片描述

    未知问题演示:上传第二张图:(叠加图片问题只会在小程序模拟器中出现,在实际真机使用中不会影响)

    在这里插入图片描述

    展开全文
  • 前些日子把phpcms的内置编辑器改成了百度UE编辑器,非常好用,但是有个地方不是很满意,就是没法给上传的图片加水印了,经过一番研究终于实现了出来,分享给大家。
  • 易语言图片加水印

    2020-08-21 05:11:17
    易语言图片加水印源码系统结构:位图水印, ======窗口程序集1 || ||------__启动窗口_创建完毕 || ||------_合成按钮_被单击 || ||------_源图按钮_被单击 || ||------_水印按钮_被单击 || ||------_保存
  • 添加文字水印的工具类,自己去下JAR包,MAVEN的网站http://mvnrepository.com/
  • js 图片加水印例子

    2018-02-11 11:52:50
    js 图片加水印 h5 canvas实现,替换代码中的图片为自己的图片位置即可运行 chrome测试通过
  • java给图片添加水印

    2015-12-14 15:23:26
    java给图片添加水印,网站开发过程中可能需要对上传的图片添加属于本网站的水印,这是一个工具类,能实现添加文字水印和添加图片水印。
  • python实现给图片添加文字水印,也包含给动图添加文字水印。实现了两种方法,分别使用了两种不同的库。详细注释。
  • 主要为大家详细介绍了Android实现为图片添加水印的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • springboot实现上传图片添加水印
  • 在线给图片(照片/身份证/证件照)加水印,通过这个在线工具可以给你的个人证件加上水印,防止身份证复印件被盗用,拒绝上传保证个人信息安全! 首先,我们需要将身份证/证件照拍照下来,或者扫面件也可以,然后再将...

    有时候,我们需要办理各种证件,办理时都需要出示身份证复印件及原件,那么为了防止“有心人”盗用我们的证件,在复印身份证的时候建议大家都给此复印件添加水印会比较好,比如加上:办理***证件+日期。

    那么问题就来了,如何给图片添加水印呢?今天我们就一起来学习学习以下这种方法,在线添加!在线给图片(照片/身份证/证件照)加水印,通过这个在线工具可以给你的个人证件加上水印,防止身份证复印件被盗用,拒绝上传保证个人信息安全!

    首先,我们需要将身份证/证件照拍照下来,或者扫面件也可以,然后再将图片上传到在线网站进行处理,下面是详细的操作步骤,希望能帮到大家!

    操作步骤:

    第一步:在浏览器上搜索“水印云”或者网址“http://www.shuiyinyun.com/”,点击“立即体验”。

    在这里插入图片描述

    步骤二:注册一个账号并登录,点击“图片加水印”;

    在这里插入图片描述

    步骤三:点击“添加文件”,并本地上传图片;

    在这里插入图片描述

    步骤四:选择右上角“添加文字水印”输入框输入“办理驾驶证使用+日期”,如图所示;

    在这里插入图片描述

    水印大小可以根据视觉效果来进行调节,调节好字号之后点击“开始加水印”,水印加好之后点击“下载文件”即可保存到本地电脑。

    在这里插入图片描述

    处理好的效果图如下:

    在这里插入图片描述

    展开全文
  • java 图片添加水印

    2018-07-16 15:54:39
    java 图片添加水印 图片叠加文字类 图片生成方法,如果需要在已有的图片叠加文字
  • 开发一个项目,需要用到图片加水印的功能,这里考虑使用后台加水印,在上传的时候或者回显到页面时候,取图片文件的流数据,进行加水印在返回流数据就行了,非常简单,不懂可以问我
  • 主要介绍了ASP.NET实现图片自动添加水印,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • php图片添加水印例子

    2020-10-21 21:51:46
    主要为大家分享了一段php图片添加水印例子,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • JS用层实现为图片添加水印效果
  • html2canvas 网页对图片加水印
  • python实现图片加水印

    2020-12-02 16:37:30
    由于公司业务需求,使用python+PIL+opencv等模块实现对图片加水印以及图片缩放比例后加水印,并生成图片base64格式图片,代码里注释很详细,都可以看懂。 图片路径修改成本地图片位置,直接就可以运行。
  • 最近项目在做一个商城项目, 项目上的图片添加水印①,添加图片水印;②:添加文字水印;一下提供下个方法,希望大家可以用得着
  • 这个是我自己手写的,当然也结合一些网络上内容,很好用!如果需要代码讲解部分,可以去我这里下载讲解文档,有疑问的地方可以留言进行交流
  • 按键精灵手机版IOS,图片加水印源码,可实现给图片加水印。把水印图片加到主图片里面。暂时只支持IOS系统。
  • 我看到网上有好多关于图片加水印的类,写的很好 ,我这里只是把相应的原理写下,具体需求,根据自己的情况来修改,很简单的,写的不好,高手见谅
  • 图片加水印

    2017-08-26 19:53:48
    强化了给图片加水印的功能。可以实现对图片加文字水印和图像水印。其中文字水印支持X轴扩展,Y轴扩展,或者全屏加水印,支持文字的旋转。 有具体示例可以直接参考。 //自定义所有各种属性 ImageWaterManage ...
  • 主要给大家介绍了关于如何在ASP.NET Core中给上传图片功能添加水印的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,231
精华内容 15,292
关键字:

图片加水印

友情链接: CustomRollingFileLogger.zip