小程序上传图片加水印

小程序上传图片加水印思路:1.点击图片上传2.加水印3.传给后台html<canvasclass=’canvas’canvas-id=”firstCanvas”></canvas>css.canvas{border:2rpxsolidpink;background:pink;width:100%;height:100%;//position:fixed;left:100%;想隐藏画布单又想执行画布方法,用这个css;用display会不执行

大家好,又见面了,我是你们的朋友全栈君。

思路:
1.点击图片上传
2.加水印
3.传给后台
html

<canvas class='canvas' canvas-id="firstCanvas"></canvas>

css

.canvas{ 
   
  border: 2rpx solid pink;
  background: pink;
  width: 100%;
  height: 100%;
  //position:fixed;left:100%; 想隐藏画布单又想执行画布方法,用这个css;用display会不执行画布
}

js

//点击方法上传
  chooseImg: function () { 
   
    var that = this;
    wx.showActionSheet({ 
   
      itemList: ['手机拍摄', '图片上传'],
      success: function (res) { 
   
        //if (res.tapIndex == 0) { 
   
          wx.chooseImage({ 
   
            count: 3, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) { 
   
              // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
              var tempFilePaths = res.tempFilePaths;//
              for (let item of tempFilePaths) { 
   
                //that.uploadimg(item);//这是直接上传原图
              }
              if (that.data.imgList.length != 0) { 
   
                that.setData({ 
   
                  imgList: that.data.imgList.concat(res.tempFilePaths)
                })
              } else { 
   
                that.setData({ 
   
                  imgList: res.tempFilePaths
                })
              }
              that.watermark();//调方法加水印
            }
          })
      },
    })
  },
  //加水印
	watermark:function() { 
   
    let that = this
    console.log(that.data.imgList,11111)//上传的图片
		//获取图片详细信息
		for (let item of that.data.imgList) { 
   
			wx.getImageInfo({ 
   
				src: item,
				success: (ress) => { 
   
					console.log("获取图片详情", item)
          let ctx = wx.createCanvasContext('firstCanvas')
					that.setData({ 
   
						canvasHeight: ress.height,
						canvasWidth: ress.width
          })
					//将图片src放到cancas内,宽高为图片大小
					ctx.drawImage(item, 0, 0, 56, 56)
					//将声明的时间放入canvas
					ctx.setFontSize(17) //注意:设置文字大小必须放在填充文字之前,否则不生效
					ctx.setFillStyle('grey')
					ctx.fillText("水印", 0, 30)
          			ctx.strokeText("水印", 0, 30)
					ctx.draw(false, function () { 
   
					wx.canvasToTempFilePath({ 
   
						canvasId: 'firstCanvas',
						success: (res) => { 
   
                			that.uploadimg(res.tempFilePath);//上传图片,加了水印的图片
							},
							fail: (e) => { 
   
								console.log(e)
							}
						})
					})
				}
			})
		}
  },
  //上传图片
	 uploadimg(localUrl) { 
   
    let that = this;
    wx.showLoading({ 
   
      title: "正在上传图片",
      mask: true
    })
    var tempFilePaths = [];
    tempFilePaths.push(localUrl)
    //这是公司封装的上传方法,就是ajax上传而已
    ygPost.uploadFile(tempFilePaths, function (res) { 
   
      wx.hideLoading();
      if (res) { 
   
        wx.showToast({ 
   
          title: '图片上传成功',
          icon: 'success',
          duration: 1000
        })
        let arr = []
        arr.push(res)
        that.setData({ 
   
          uploadList: that.data.uploadList.concat(arr)//加了水印的图片合集
        })
        console.log(that.data.uploadList, 1111)
        wx.hideLoading();
      }
    })
  },
  //测试end

注意事项:
1.如果在画图完成后,有对应操作时,必须在draw的callback后执行,比如图片预览、改变画布大小等
ctx.draw(false, function() {

console.log(‘后续操作’);

})
2.draw完成后的图片预览
wx.canvasToTempFilePath({

x: 0,
y: 0,
width: width,
height: height,
canvasId: canvasId,
fileType: ‘png’,
success: function(res) {

wx.previewImage({

urls: [res.tempFilePath],
})
}
}, ctx)

大概思路
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/148950.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • js正则匹配截取数字

    js正则匹配截取数字varreg=/[1-9][0-9]*/g;varreward=‘adad13dd1’console.log(reward.match(reg)[0])打印结果:131微信小程序开发交流qq群173683895承接微信小程序开发。扫码加微信。…

  • mysql的乐观锁使用_mysql悲观锁需要注意什么

    mysql的乐观锁使用_mysql悲观锁需要注意什么记得在上大学那会开始,在大学的课堂上,常常会听到老师讲什么共享锁,排它锁各种锁的词汇,以前仅仅听过一次就没有管了,并没有进行深入的研究最近,在各种群里,又看见了什么乐观锁、悲观锁什么鬼的感觉很高级的词汇,于是乎今天对这几个概念进行学习,揭开它神秘的面纱,缕缕思路记录下我对这几个概念的想法实验环境:mysql5.6存储引擎:innoDB我们在操作数据库的时候,可能

  • 请你用三角形和平行四边形设计一个漂亮的图案(圆形和正方形组合图形)

    一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码。整合了一下,有错误欢迎指出。1.正方形650)this.width=650;”alt=””border=”0″src=”http://www.meilizhuo.com/uploads/allimg/141105/09101KE1-0.png”style=”border:0px;”/>#square{width:100

  • 溢出OF和进位CF标志位的判定

    溢出OF和进位CF标志位的判定一、学习CF与OF,要始终牢记一点。CF是无符号数溢出标志,OF是有符号数溢出标志。通俗一点说就是,即使有符号数相加/相减导致了CF=1也没什么意义,不能说明结果的正确与否。此时,OF=1,则说明结果溢出,出现错误;OF=0,说明结果正确。这个过程根本和CF没关系,CF=1/0,都不会影响。同理也可以得出OF对无符号数也无影响。举个例子:[9-6]补=[9]补-[6]补=[9]补+[-6]补[9]…

  • platform_driver_register( )过程追踪

    platform_driver_register( )过程追踪以下代码源于linux3.1.9。platform_driver_register()是内核中非常著名的函数。platform_driver_register()负责注册平台驱动程序,如果在内核中找到了使用驱动程序的设备,调用probe()。刨去参数检查、错误处理,platform_driver_register的主要过程如下:。。。{。。。retur…

  • vdbench安装及使用[通俗易懂]

    vdbench安装及使用[通俗易懂]一、 vdbench简介vdbench是一个I/O工作负载生成器,用于验证数据完整性和度量直接附加和网络连接的存储的性能。它是一个免费的工具,容易使用,而且常常用于测试和基准测试。可以使用vdbench测试磁盘和文件系统的读写性能。注:此软件的带宽及字节结算单位均为1024进制。二、 vdbench安装环境准备Vdbench使用需要有java环境,centos直接yuminstalljre即可,windows主机上则需要安装jre,并添加到环境变量中。程序测试环境配置好后,直接在

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号