图片上传时用Canvas 压缩和加水印

用菜鸟教程模拟的

菜鸟对应链接 https://www.runoob.com/try/try-cdnjs.php?filename=tryhtml5_canvas_tut_img

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<img id="screamaa" src="" alt="The Scream" width="220" height="277"><input type="file"id="uploadFile"accept="image/*"/>
<script>var imgff= function (base64){var bili = 0.7; //压缩后的图片尺寸,0.7就是70%var img=new Image()
img.src = base64console.log("img.width", img.width,"height", img.height)
img.crossOrigin = "Anonymous";
img.onload = function() {var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");//图片地址加载完后执行操作var newWidth = img.width; //压缩后图片的宽度var newHeight = img.height; //压缩后图片的高度c.width = newWidth; //压缩图的宽度c.height = newHeight; //压缩图的高度ctx.drawImage(img, 0, 0, newWidth,newHeight); //压缩 把图片放到画布上ctx.font="30px Arial";ctx.fillStyle = "#ffffff"; //设置水印ctx.fillText("你好", 40, 40); //选择水印位置let newBase64 = c.toDataURL("image/jpeg", 0.7);//压缩的模糊度 数字越小越模糊console.log("dnewBase64",newBase64)var c=document.getElementById("screamaa");c.src =newBase64
}
}var eleUploadFile = document.getElementById('uploadFile');eleUploadFile.addEventListener('change', function(event) {var file = event.target.files[0] || event.target.dataTransfer.files[0];var reader = new FileReader();reader.onload = function(e) {var base64 = e.target.result;// canvas压缩图片，并且回调显示imgff(base64)}reader.readAsDataURL(file);});</script></body>
</html>

图片上传时用Canvas 压缩和加水印相关推荐

android h5 多图上传源码,JS移动端/H5同时选择多张图片上传并使用canvas压缩图片...
最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别图片的功能,这里对识别图片的功能不做赘述,不属本文范畴.我在做完并上线项目后,同事跟我提了一个要求是可不可以同时选择多张图片上传,我做的时候 ...
解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库一.Vant UI库Uploader 组件图 ...
移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传
现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...
【报错笔记】关于图片上传时的路径问题
在图片上传时将图片上传到本地磁盘后如下将图片保存到了D盘下因此在jsp页面中读取对应图片时,需要在tomcat中配置相关信息. 在jsp页面中图片路径src中使用虚拟路径加数据库中图片名称就可以将 ...
【报错笔记】在做图片上传时上传图片后可以跳转到上传成功界面，也没有报错，数据库中也传入了值，可是eclipse中webapp下怎样都无法生存目录。
在做图片上传时上传图片后可以跳转到上传成功界面,也没有报错,数据库中也传入了值,可是eclipse中webapp下怎样都无法生存目录. 我使用UUID生成8级目录,在webapp下创建目录,将图片传进 ...
[html] 图片上传时实现本地预览功能的原理是什么？
[html] 图片上传时实现本地预览功能的原理是什么? 通过HTML5 File API读取用户上传的图片,生成一个image对象显示到页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
php 更改图片后缀名,PHP在图片上传时如何改变图片后缀为jpg
PHP在图片上传时改变图片后缀为jpg的方法:首先获取上传的图片后缀,并获取图片在电脑上的临时存储位置:然后获取临时存储文件的后缀:最后实现后缀转换,代码为[case 'im{ / S # p |ag ...
php图片写入带问号_php实现图片上传时添加文字和图片水印技巧
本文实现的功能特别适用于一些商城和图片站中,分享了图片在上传时添加文字和图片水印的技巧,供大家参考,具体内容如下 1. water.class.php header('Content-Type:tex ...
图片上传至服务器实现压缩
2019独角兽企业重金招聘Python工程师标准>>> 1.缩略图压缩文件jar包 <dependency><groupId ...

图片上传时用Canvas 压缩和加水印

图片上传时用Canvas 压缩和加水印相关推荐

最新文章

热门文章