精华内容
下载资源
问答
  • uni-app图片加水印;小程序图片添加水印;使用canvas上传图片加水印
    千次阅读 热门讨论
    2021-06-28 14:15:14

    原博主点击查看

    需求: 微信小程序,上传图片,成功后图片有水印,既图片的网络地址也有水印。
    上传图片使用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的文档:在这里插入图片描述
    在这里插入图片描述

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

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

    在这里插入图片描述

    更多相关内容
  • 图片加上图案水印也是许多经营网店或者网站的商家所遇到的问题,如果采用手工的方法给一张张图片加水印,那必然很慢很麻烦,小编就不推荐使用啦。但是有别的方法可以帮你,一次性搞定全部图片,轻轻松松给图片加上...

    我们在给图片添加水印的时候,也许会想要给其加上图案水印的情况,好看的图案比起普通的文字水印,显得高大上。给图片加上图案水印也是许多经营网店或者网站的商家所遇到的问题,如果采用手工的方法给一张张图片加水印,那必然很慢很麻烦,小编就不推荐使用啦。但是有别的方法可以帮你,一次性搞定全部图片,轻轻松松给图片加上图案水印。

     

    步骤一:我们在浏览器上搜索“水印云”,点击“立即体验”。

     

    QQ截图20201218142520.png

     

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

     

    QQ截图20210120151714.png

     

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

     

    QQ截图20210120153034.png

     

     

     

    步骤四:选择右上角“添加图片水印”,并上传要添加的水印,如图所示;

     

     

    QQ截图20210120153436.png

     

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

    QQ截图20210120153734.png

    效果图如下:

    QQ截图20210120154341.png

     

    展开全文
  • 如果不加水印,盗图者可以很轻易的转载甚至把照片说成是自己拍的。今天这篇教程,教大家制作只属于自己的专属水印,加在照片或者视频当中,让你的水印更有自己的个性,也让盗图者不会那么轻易了。先来看一下加上自己...

    加百思特网水印现在真的太重要了,自百思特网己辛辛苦苦拍的照片或视频,被别人随便一转,不注明出处和原作者,就非常容易误导观者这些照片是“转载者”拍的,这对原作者实在太不公平了。如果不加水印,盗图者可以很轻易的转载甚至把照片说成是自己拍的。

    今天这篇教程,教大家制作只属于自己的专属水印,加在照片或者视频当中,让你的水印更有自己的个性,也让盗图者不会那么轻易了。

    先来看一下

    加上自己专属签名水印的效果

    51c2e9047969a2e98f860912bcf4286c.png

    7b3eebd11bcfd691c20a510c72d99d12.png

    b629f470924ae191323c323315ba60f9.png

    上面这些照片中的水印,就是我自己手写的水印,相当于是在照片中加上自己的签名,比起用软件输入文字加水印的方式,这种水印的效果要更加个性化,当然,水印的板式、画笔轻重、颜色、样式等都可以自己设置。

    给照片或视频加这种水印需要用到两个软件:picsart、泼辣修图、剪映。

    de34409978d9a89b4bdceae5f5b886d2.png

    picsart

    8fb65ab917eccd0797dbff977c4ddd37.png

    泼辣修图

    2c5ae757ea8cfc6be2777e65bfb2ec08.png

    剪映

    这种水印添加的思路是这样:先在picsart软件中新建画布、自己手写签名,导出一张透明底的签名图;之后在泼辣修图中把百思特网签名图加在照片上,就完成签名水印的添加了。

    本文地址:https://www.best73.com/news/58757.html

    展开全文
  • 详细说明和预览,将水印添加到foto。
  • 第一步,添加一个一般处理程序(Handler),本例是ImageHandler 代码如下:using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using ...
  • 在线图片加水印,canvas加水印,在线给图片加水印照片上添加文字,通过前端canvas给你的证件加上水印,防止证件被盗。 演示地址:http://watermark.dxcweb.com/
  • php图片添加水印例子

    2020-10-21 21:51:46
    主要为大家分享了一段php图片添加水印例子,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前两天给个人网站添加了一个小功能,就是文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能,也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas前端实现图片...
  • Java实现在图片上添加水印图片水印文字.docJava实现在图片上添加水印图片水印文字.docJava实现在图片上添加水印图片水印文字.docJava实现在图片上添加水印图片水印文字.doc
  • 用C# + Halcon 混合编程的“照片上添加照片创建日期水印”的小程序,程序比较简单,是为了让初学者了解C# + Halcon 混合编程
  • C# 批量加水印,可以将文字或者图片设置为水印,且支持自定义水印位置(右下角、左下角、中间、右角、左上角等等),且支持批量水印操作
  • 易语言图片加水印

    2020-08-21 05:11:17
    易语言图片加水印源码系统结构:位图水印, ======窗口程序集1 || ||------__启动窗口_创建完毕 || ||------_合成按钮_被单击 || ||------_源图按钮_被单击 || ||------_水印按钮_被单击 || ||------_保存
  • 主要给大家介绍了关于如何ASP.NET Core中给上传图片功能添加水印的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • java 图片添加水印

    2018-07-16 15:54:39
    java 图片添加水印 图片叠加文字类 图片生成方法,如果需要已有的图片叠加文字
  • 主要介绍了ASP.NET实现图片自动添加水印,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 添加图片水印

    2018-06-07 17:16:05
    读入待添加图片水印图片,将水印图片合成到待添加图片的对应位置(可实现颜色反转)并显示出来。 用来实现批量添加商标、LOGO等。
  • python实现给图片添加文字水印,也包含给动图添加文字水印。实现了两种方法,分别使用了两种不同的库。详细注释。
  • 一、怎么给图片加水印? 1、Win 10自带的画图软件 win10系统中,有一个自带的画图软件,就是【画图3D】,那我们来看下怎么借助这个软件来为图片添加水印吧。 1、软件打开需要添加水印的图片,再点击左侧的...

    现在大家对自己的图片的保护意识比较中了,所以自己辛辛苦苦做出来的图片,我们会加个水印来“宣誓主权”。那今天就要来和大家讲讲,怎么轻松给图片及上水印以及去除水印。

    一、怎么给图片加水印?

    1、Win 10自带的画图软件

    在win10系统中,有一个自带的画图软件,就是【画图3D】,那我们来看下怎么借助这个软件来为图片添加水印吧。

    1、在软件上打开需要添加水印的图片,再点击左侧的“文件夹——插入”,将水印添加进来。

    2、接下来对水印的位置进行调整,右侧属性栏中也可以对水印进行简单编辑。完成设置后导出图片就行。

    这样就添加好水印了,这里可以看下对比图。

    二、美图秀秀批处理

    【美图秀秀批处理】中也有一个添加水印的功能,而且这个功能可以批量添加水印。操作如下:

    1、运行软件,然后添加图片,点击中间的【水印】按钮,进入水印界面。

    2、然后点击【导入水印】,插入要添加的水印的图片即可。

    3、然后再根据自己的需求,在预览图中调整下水印的位置,可以调整大小,旋转,透明度等。

    完成后将其保存导出就行。下面看看对比图哟:

    三、借助PPT

    平时我们会借助PPT来展示一些内容,但是PPT也能为图片添加水印。

    1、运行PPT后,在软件上添加主图片和水印图片,水印图片最好是透明背景的,若不是透明背景,也可以点击图片【设置透明色】,去除背景色。

    2、调整水印位置,完成后按住【Ctrl】,分别选中两张图片,点击【组合】按钮,让图片合二为一。

    3、完成后,只需要右键点击图片,选择【另存为图片】就行。

    这样就把水印加好了,看看前后对比图:

    四、改图宝

    除此之外,还可以通过在线工具为图片添加水印,比如借助【改图宝】在线图片制作网站。只需要根据网站提示,就能轻松添加水印。

    二、怎么给图片去水印?

    那我们可以为图片添加水印,那怎么给图片去除水印呢?其实也不难。

    1、借助PS

    Ps是一款图片处理软件,当然少不了一个去水印的功能。

    1、可以在软件上添加上有水印的图片,然后点击左侧工具栏的图章工具,选择【仿制图章】。

    2、然后按住Alt键选取仿制区域,也就是水印相似区域,然后通过小圆点直接涂抹水印区域,直到水印区域去除为止。

    去完水印的图片对比图:

    二、迅捷去水印

    这里为大家介绍一款去水印的软件—【迅捷去水印】。这是一款专注于去水印的软件,可以快速去除图片以及视频上的水印。

    图片去水印:

    1、点击软件上的【添加水印】,插入水印图片,然后点击右边工具栏中的【区域框】,调整水印的区域位置,调整好后,选择文件的保存位置,点击【开始】就能去除水印了。

    2、若水印的位置是不规则的,不能使用区域看怎么办?可可以通过工具栏中的【画笔】工具,手动绘制水印的区域,绘制完成后点击【开始】就能去除水印了。

    去完水印后的前后对比图:

    小彩蛋来了~去图片水印比较简单,那么去视频水印呢?【迅捷去水印】里面还有去视频水印的功能哟!

    视频去水印:

    同样在软件上点击【插入视频】,添加有水印的视频,再选择【区域看】,调整水印的位置,还可以选择时间和保存位置,完成设置后点击【开始】就能轻松去除视频水印了。

    是不是很神奇?如果感兴趣的话可以自己试试看哟!直接浏览器搜索【迅捷去水印】即可安装下载啦~

    以上就是为大家介绍的关于图片加水印以及去水印的方法。大家有需要的话不妨一试。

    转载请注明出处。

    展开全文
  • C#图片加版权,在图片上加阴影文字水印,为一幅图像文件添加格式固定的版权文字,类似于加水印的效果,打开程序后,添加一张图片,点击“添加版权信息”后,图片即输出到C:盘目录下,文件名为output.jpeg。...
  • 最近项目中遇到一个需求,需要把一张图片加上平铺的水印 类似这样的效果 ...// 因为我项目中的业务是,要把淘宝的图片添加水印,所以这里就放一个淘宝商品的主图 img.src = 'https://gd4.alicdn.com/imgextr
  • 图片上加水印相信每位程序员都会遇到这个需求,下面这篇文章主要给大家介绍了asp .net实现给图片添加图片水印的方法,文中给出了完整的实例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
  • js 图片加水印例子

    2018-02-11 11:52:50
    js 图片加水印 h5 canvas实现,替换代码中的图片为自己的图片位置即可运行 chrome测试通过
  • 之后开始加水印:  $img->send();  说明:  send( strimg filename ) 这个方法有一个函数,可以省略,省略的情况下,保存的图片路径和名称和原来的一样,如需保存成例外的图片,就这里提供要保存的图片...
  • 原理很简单, 就是画布Canvas绘制图形、图片、文字等等, 得到你想要的效果图片。 百度搜索图片水印有很多结果, 没找到斜着打水印的代码,有很多公司都要求图的效果, 所以写着玩玩。 /* 添加全屏斜着...
  • 大家好给大家带来一款图片加水印的微信小程序源码 该小程序拥有多种水印的添加方式 比如: 全屏水印(也就是整张图片都给加上水印透明度可以自行调整) 隐形水印(该水印是肉眼不可见但是通过PS等软件就可以看得到...
  • java给图片添加水印

    2015-12-14 15:23:26
    java给图片添加水印,网站开发过程中可能需要对上传的图片添加属于本网站的水印,这是一个工具类,能实现添加文字水印添加图片水印
  • 批量图片文字加水印,批量将照片的文件名加到照片上去,图片的名称批量写到图片上面,方便看得出那个图片的名字是什么,怎样批量将照片的文件名添加照片中 软件试用的方法参考博文: ...
  • 水印添加总的来说可以简单的分为三步来走,第一步先完成一个画布的创建,第二步画板画出你想添加水印图片,第三步画你要添加水印文字。   创建画板   <canvas style="width: {{imageWidth}}px; ...

空空如也

空空如也

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

怎么在图片上添加水印