vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；ca

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.targetlet _this = thisvar 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的srclet 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.widthcanvas.height = image.heightvar 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转换为imagecanvasToImg (canvas) {let _this = thisconsole.log(4, canvas)var src = canvas.toDataURL("image/jpeg")console.log('将绘有水印和img的canvas 转成图片获取到src', src)_this.img2 = srcreturn 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>

vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片