html5 canvas 头像上传

<html>
<head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdn.bootcss.com/popper.js/1.9.3/umd/popper.min.js" integrity="sha384-knhBOwpf8/28D6ygAjJeb0STNDZqfPbKaWQ8wIz/xgSc0xXwKsKhNype8fmfMka2" crossorigin="anonymous"></script><script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>  <div id="canvasDiv"><canvas id="crop" width="480" height="270" style="background-image:url(bg.png);"></div><div>  <div>  <input type="file" name="imgUpload" id="imgUpload">  </div>  <div styel="width:100px; height:100px;padding-top:100px;"><img id="showImg"></img></div>  </div>
<script>var canvas = document.getElementById('crop');var ctx = canvas.getContext('2d');var src; var canvasWidth = canvas.width;var canvasHeight = canvas.height;var wheelRate = 1;var tx = 0;var ty = 0;var downX = 0;var downY = 0;var moveX = 0;var moveY = 0;var moveFlag = false;var img = new Image();var imgWidth = 0;var imgHeight = 0;var widthRate = 0;var heightRate = 0;var rate = 0;var squareSideLength = 0;var x = 0;var y = 0;var imgTx = 0;var imgTy = 0;$("#imgUpload").change(function(e) {for (var i = 0; i < e.target.files.length; i++) {var file = e.target.files.item(i);            var freader = new FileReader();  freader.readAsDataURL(file);  freader.onload = function(e) {src = e.target.result; wheelRate = 1;tx = 0;ty = 0;$("#uploadhead").attr("src",src);img.src = src;imgWidth = img.width;imgHeight = img.height;squareSideLength = imgWidth < imgHeight ? imgWidth : imgHeight;widthRate = canvasWidth / imgWidth;heightRate = canvasHeight / imgHeight;drawCanvas();}  }});  canvas.onmousewheel = function(e){var evt = window.event ||e;var delta = evt.detail ? -evt.detail/3 : evt.wheelDelta/120;if(delta < 0){wheelRate *= 0.9;}else {if(wheelRate < 1){wheelRate /=  0.9;}}ctx.restore();ctx.clearRect(0,0,canvasWidth,canvasHeight);drawCanvas();}canvas.onmousedown = function(e){var evt = window.event ||e;downX = evt.clientX;downY = evt.clientY;moveX = tx;moveY = ty;moveFlag = true;}canvas.onmousemove = function(e){if(moveFlag){var evt = window.event ||e;tx = evt.clientX - downX + moveX;ty = evt.clientY - downY + moveY;if(x + tx/rate < 0){tx = -x*rate;}if(x + tx/rate + squareSideLength*wheelRate > imgWidth){tx = (imgWidth - x - squareSideLength*wheelRate)*rate;}if(y + ty/rate < 0){ty = -y*rate;}if(y + ty/rate + squareSideLength*wheelRate > imgHeight){ty = (imgHeight - y - squareSideLength*wheelRate)*rate;}drawCanvas();}}document.onmouseup = function(){moveFlag = false;}function drawCanvas(){ctx.restore();ctx.clearRect(0,0,canvasWidth,canvasHeight);rate = widthRate < heightRate ? widthRate : heightRate;ctx.save();ctx.scale(rate,rate);ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);//ctx.drawImage(img, 0, 0);ctx.globalAlpha=0.5;ctx.translate(-(canvas.width/rate - imgWidth)/2,-(canvas.height/rate - imgHeight)/2);//ctx.fillRect(0,0,canvas.width/rate,canvas.height/rate);ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);//var sx = (canvasWidth/rate - imgWidth)/2;//var sy = (canvasHeight/rate - imgHeight)/2;x = (imgWidth - squareSideLength)/2;y = (imgHeight - squareSideLength)/2;//ctx.drawImage(img, x, y, squareSideLength, squareSideLength, x, y, squareSideLength, squareSideLength);ctx.globalAlpha=1.0;ctx.drawImage(img, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate);imgData = ctx.getImageData(x - tx, y - ty, squareSideLength*wheelRate, squareSideLength*wheelRate);canvasToImage();ctx.restore();ctx.clearRect(0,0,canvasWidth,canvasHeight);rate = widthRate < heightRate ? widthRate : heightRate;ctx.save();ctx.scale(rate,rate);ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);ctx.drawImage(img, 0, 0);ctx.globalAlpha=0.5;ctx.translate(-(canvas.width/rate - imgWidth)/2,-(canvas.height/rate - imgHeight)/2);ctx.fillRect(0,0,canvas.width/rate,canvas.height/rate);ctx.translate((canvas.width/rate - imgWidth)/2,(canvas.height/rate - imgHeight)/2);//var sx = (canvasWidth/rate - imgWidth)/2;//var sy = (canvasHeight/rate - imgHeight)/2;x = (imgWidth - squareSideLength)/2;y = (imgHeight - squareSideLength)/2;//ctx.drawImage(img, x, y, squareSideLength, squareSideLength, x, y, squareSideLength, squareSideLength);ctx.globalAlpha=1.0;ctx.drawImage(img, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate, x + tx/rate, y + ty/rate, squareSideLength*wheelRate, squareSideLength*wheelRate);}function canvasToImage(){base64Str = canvas.toDataURL("image/png");$('#showImg').attr('src', base64Str);imgTx = squareSideLength*rate/2 - 240*wheelRate - tx;imgTy = squareSideLength*rate/2 - 135*wheelRate - ty;console.log(squareSideLength*rate/wheelRate);$('#showImg').css('transform', 'scale(' + (1/wheelRate) +') translateX(' + imgTx + 'px) translateY(' + imgTy + 'px) ');}
</script>
</body>
</html>

html5 canvas 头像上传相关推荐

  1. html 头像选择,html5点击上传头像选取本地图片上传代码

    特效描述:html5 点击上传头像 选取本地图片 上传代码.html5点击上传头像,图片上传代码 代码结构 1. HTML代码 上传头像 //获取上传按钮 var input1 = document. ...

  2. 个人中心html更换头像,html5 头像上传更换插件

    插件描述:html5 头像上传.更换.剪切插件 利用bootstrap样式排版已经点击功能,进行弹窗更换头像.modal的div中有form表单提交地址 以下方法由网友杜威提供 遇到的几个情况希望能帮 ...

  3. discuz 头像html5上传,discuz更新H5头像上传

    越来越多的浏览器可以慢慢的不在支持flash,对应一些discuz论坛的老的版本来说就需要进行升级操作了,接下来吾爱编程为大家介绍一下discuz头像上传flash改为h5上传的方法,有需要的小伙伴可 ...

  4. HTML5 多图片上传（前端+后台详解）

    HTML5 多图片上传(前端+后台详解) 1.参考jquery插件库 2.修改代码 3.添加的后台代码 4.删除的后台代码 1.参考jquery插件库 手机端实现多图片上传 2.修改代码 我发现他这里 ...

  5. php头像上传思路,PHP头像上传，php头像上传_PHP教程

    PHP 头像上传,php头像上传 嘻嘻,自从圣诞节过后,就一直懒散,这几天也因为是太过于繁忙的原因,感觉好久都没有出来冒冒泡,诶... 为了生活一直在奋斗,作为一名前端开发工程师,我现在越来越迷茫了, ...

  6. java cropper 上传_java web 网站头像上传处理 (springmvc +bootstrap+cropper)

    制作头像上传.请根据您的实际需求,修改代码,不完全正确,仅供参考! 前端页面设计使用bootstrap ,头像预览和剪裁工具使用cropper 后台使用springmvc. 现在来看前端的页面设计 前 ...

  7. Php设置上传头像,PHP 头像上传，php头像上传_PHP教程

    PHP 头像上传,php头像上传 嘻嘻,自从圣诞节过后,就一直懒散,这几天也因为是太过于繁忙的原因,感觉好久都没有出来冒冒泡,诶- 为了生活一直在奋斗,作为一名前端开发工程师,我现在越来越迷茫了,都不 ...

  8. MUI关于头像上传和压缩示例

    思路:通过h5+拍照或从手机选择图片,然后将图片压缩转成base64,通过post提交base64格式的图片字符串(这需要跟后台接口支持),上传成功之后,接口返回图片id,前端根据上传图片id,拼接i ...

  9. 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能

    小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...

最新文章

  1. 华硕笔记本：Ubuntu 18.04安装Nvidia驱动
  2. 别让不好意思害了你 。
  3. 【数据结构】排序相关题目及各种排序方法的总结
  4. python字典文件,python-文件转字典，字典转文件
  5. Spark: sortBy和sortByKey函数详解
  6. 每日长难句打卡Day23
  7. 排序算法(三)--冒泡排序法
  8. Struts2漏洞分析，漏洞波及全系版本
  9. 【权限设计】一个案例，三个角色，简单说下B端产品的权限设计
  10. Interpretation of 403 Bounded biharmonic weights
  11. MybatisPlus官方文档
  12. Loadrunner_集合点（rendezvous）
  13. Evolutionary Acyclic Graph Partition
  14. 小新700换主板_算不算诚意之作？——联想小新700笔记本到手拆升级+换系统
  15. CPU核数和线程数有什么作用？CPU核数和线程的关系与区别，服务器CPU与电脑主机CPU的区别
  16. 用Html+css写一个渐变背景的个人名片
  17. Android 11 变更及适配攻略
  18. SDUT java 单词和字符鉴别器
  19. python永真循环_python永真循环_Python学习（一）
  20. Android内存优化—Android的内存管理方式

热门文章

  1. 【快速入门Linux】7_Linux命令—使用su命令切换用户出现认证失败
  2. mysql 合计单条数据_mysql之数据去重并记录总数
  3. MYSQL导出数据报错ERROR 1290 (HY000) 和 ERROR 1 (HY000)
  4. python全栈还是大数据好_青岛PYTHON全栈应用开发班
  5. python直线检测_opencv+python 开操作进行直线检测
  6. 计算机工程学院迎新晚会,计算机与信息工程学院2016级迎新晚会举行
  7. python读取data_Python批处理数据读取方法的细节：dataloader,Pytorch,批量,详解,DataLoader...
  8. python web生产环境_2020年了，python的web framework sanic 可以考虑生产环境部署了么？...
  9. JAVA 定义全局常量码表_【Java基础】java常量是什么？
  10. Ubuntu上通过FinalShell或Asbru访问CentOS虚拟机