H5\uniapp图片添加水印

H5## 标题

图片加水印

   </div>
</body>
<script>function blobToImg(blob) {return new Promise((resolve, reject) => {let reader = new FileReader()reader.addEventListener('load', () => {let img = new Image()img.src = reader.resultimg.addEventListener('load', () => resolve(img))})console.log(blob)reader.readAsDataURL(blob)})}function imgToCanvas(img) {let canvas = document.createElement('canvas')canvas.width = img.widthcanvas.height = img.heightlet ctx = canvas.getContext('2d')ctx.drawImage(img, 0, 0)return canvas}function watermark(canvas, text) {return new Promise((resolve, reject) => {let ctx = canvas.getContext('2d')// 设置填充字号和字体，样式ctx.font = "24px 宋体"ctx.fillStyle = "#FFF"// 设置右对齐ctx.textAlign = 'right'// 在指定位置绘制文字，这里指定距离右下角20坐标的地方let chr = text.split("")let temp = ""let row = []console.log(chr)for (let a = 0; a<chr.length;a++){if( ctx.measureText(temp).width < 220 && ctx.measureText(temp+(chr[a])).width <= 220){//220水印宽度temp += chr[a];}else{row.push(temp);temp = chr[a];}console.log(temp,chr[a])}row.push(temp)console.log(row)for(let b=0;b<row.length;b++){ctx.fillText(row[b], canvas.width - 20, (canvas.height - 150)+(b+1)*30)//每行字体y坐标间隔30}// ctx.fillText(row[b], canvas.width - 20, canvas.height - 20)canvas.toBlob(blob => resolve(blob))})}function imgWatermark(dom, text) {let input = document.createElement('input')input.setAttribute('type', 'file')input.setAttribute('accept', 'image/*')input.onchange = async () => {console.log(input.files[0])let img = await blobToImg(input.files[0])let canvas = imgToCanvas(img)let blob = await watermark(canvas, text)let newImage = await blobToImg(blob)dom.appendChild(newImage)}dom.appendChild(input)}let dom = document.querySelector('#container')console.log(dom)imgWatermark(dom, '            16：302022/06/22 星期三我在这里')
</script>

uniapp

H5\uniapp图片添加水印相关推荐

uni-app图片加水印；小程序图片添加水印；使用canvas上传图片加水印
原博主:点击查看需求: 微信小程序,上传图片,成功后图片有水印,既图片的网络地址也有水印. 上传图片使用uni-app的uni.chooseImage()方法,水印是用canvas. 以下代码可以直 ...
uniapp制作水印相机给图片添加水印并且保存图片至本地
uniapp保存文件的三种方式文件主要分为两大类: 1.代码包文件:代码包文件指的是在项目目录中添加的文件. 2.本地文件:通过调用接口本地产生,或通过网络下载下来,存储到本地的文件. 其中本地文件 ...
uni 根目录路径_如何解决uniapp图片路径错误问题
uniapp图片路径错误的解决办法:1.在根目录"manifest.json"中配置h5下的"publicPath":2.在h5配置中运行的基础路径进行配置即可 ...
uniapp 图片上传与展示
项目场景: uniapp 图片上传阿里 OSS 对象存储需求描述: H5移动端开发中需要用户上传图片头像.身份证件等需求时.需要将图片上传至阿里oss中存储,并且下载到当前页面进行展示. 解决方 ...
uniapp vue 添加水印模板
在默认文件先新建components文件夹创建vue 文件 'wm-watermark.vue' <template><view class=&q ...
小程序使用 canvas 给图片添加水印
小程序使用 canvas 给图片添加水印操作 canvas 相关的 api 使用的是微信最新提供的 (一路过来踩了好多坑-) 浅用微信小程序 canvas 给图片添加简单水印, 废话不多说, 先上效 ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
分享几个用 Python 给图片添加水印的方法，简单实用
作者 |俊欣来源 |关于数据分析与可视化今天来分享几种可以给图片添加水印的方法,都是十分的简单实用,大家在看了之后也可以私底下去自己试试,有些方法需要的代码量就比较少,有些方法需要的代码量就稍微多 ...
php 怎么支持中文图片显示,给图片添加水印(支持中文)并生成缩略图_php
// **************************************** // // 功能:给图片添加水印(支持中文)并生成缩略图 // 参数: $srcFile 图片文件名 // $d ...

H5\uniapp图片添加水印

H5## 标题

uniapp

H5\uniapp图片添加水印相关推荐

最新文章

热门文章