js 图片上传时加水印

  //通过file数据产生图片Domfunction createfileImg(file) {return new Promise((resolve, reject) => {let img = new Image()img.src = URL.createObjectURL(file)//img绑定load事件（载入完毕后 返出图片Dom）img.addEventListener('load', () => resolve(img))})}//画布配置function handleCanvas(img) {// const canvas = document.createElement('canvas')var canvas = document.getElementById("myCanvas");canvas.width = 300 //也可使用图片的宽 和 高canvas.height = 300//返回一个用于绘画的环境const ctx = canvas.getContext('2d')//写入图片ctx.drawImage(img, 0, 0, 300, 300)//写入水印文字ctx.font = '700 20px microsoft yahei'ctx.fillStyle = '#fff'ctx.textAlign = 'left'ctx.fillStyle = 'rgba(255, 255, 255,)'ctx.fillText(`${moment().format("YYYY-MM-DD HH:mm:ss")}`, 20, 290);return canvas}//创建blob对象，用于展示画布上的图片function createCanvasBlob(canvas) {return new Promise((resolve, reject) => {canvas.toBlob(blob => resolve(blob))})}async function customRequest(e) {//拿到图片let fil = document.getElementById('fileId')//创建图片const img = await createfileImg(fil.files[0])//处理画布const canvas = handleCanvas(img)const blob = createCanvasBlob(canvas)// 转为后端要的file对象const newFile = new File([blob], fil.files[0].name, { type: fil.files[0].type })//正常调用上传的接口........}

效果图：

js 图片上传时加水印相关推荐

【报错笔记】关于图片上传时的路径问题
在图片上传时将图片上传到本地磁盘后如下将图片保存到了D盘下因此在jsp页面中读取对应图片时,需要在tomcat中配置相关信息. 在jsp页面中图片路径src中使用虚拟路径加数据库中图片名称就可以将 ...
解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库一.Vant UI库Uploader 组件图 ...
【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面，也没有报错，数据库中也传入了值，可是eclipse中webapp下怎样都无法生存目录。
在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...
[html] 图片上传时实现本地预览功能的原理是什么？
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
.net core api 图片上传与加载
关于.net core API 图片上传与加载文件夹 [TOC] 1.上传图片 1.配置Swagger 与文件夹.接口添加 1.建立.net core api 项目下载 NuGet 包 Swash ...
php 更改图片后缀名,PHP在图片上传时如何改变图片后缀为jpg
PHP在图片上传时改变图片后缀为jpg的方法:首先获取上传的图片后缀,并获取图片在电脑上的临时存储位置:然后获取临时存储文件的后缀:最后实现后缀转换,代码为[case 'im{ / S # p |ag ...
php图片写入带问号_php实现图片上传时添加文字和图片水印技巧
本文实现的功能特别适用于一些商城和图片站中,分享了图片在上传时添加文字和图片水印的技巧,供大家参考,具体内容如下 1. water.class.php header('Content-Type:tex ...
JS实现图片上传时的本地预览，兼容IE和firefox谷歌
旁白: 一般来说如果要实现在上传前预览图片的话,用纯服务器端的语言必定是办不到的,需要先传到服务器上,哪怕是只是服务器上的临时文件,这也是个很麻烦的事情,不过可以用javascript来做这件事.下面 ...
微信JS图片上传与下载功能--微信JS系列文章（三）
概述在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){va ...
使用Kindeditor的多文件(图片)上传时出现上传失败的解决办法/使用Flash上传多文件(图片)上传时上传失败的解决办法
近来用户反映希望我们把在线编辑器中的多图片上传功能实现,因为他们在编辑商品描述时经常会有一次上传多张图片的需求,如果要逐张选择的话效率很低,客户的需求就是我们的追求,很快我们就把完善功能排到了日程表中 ...

js 图片上传时加水印

js 图片上传时加水印相关推荐

最新文章

热门文章