Chinaunix首页 | 论坛 | 博客
  • 博客访问: 709518
  • 博文数量: 90
  • 博客积分: 803
  • 博客等级: 准尉
  • 技术积分: 1041
  • 用 户 组: 普通用户
  • 注册时间: 2012-05-24 13:42
文章分类

全部博文(90)

文章存档

2020年(4)

2019年(4)

2018年(9)

2017年(11)

2016年(11)

2015年(6)

2014年(3)

2013年(28)

2012年(14)

分类: PHP

2019-05-13 13:54:12


点击(此处)折叠或打开

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>
  8.   <form name='test'>
  9.     <input type="file" name='file'>
  10.     <button id="clip">裁剪</button>
  11.     <input type="submit" value="提交">
  12.   </form>
  13.   <img src="" >
  14.   <canvas width="800" height="600" style="border:1px solid #d3d3d3;background:#ffffff;"></canvas>
  15.   <script>
  16.     var canvas,ctx,img;
  17.     window.onload = function(){
  18.         canvas = document.querySelector('canvas');
  19.         ctx = canvas.getContext('2d');
  20.         img = document.querySelector('img');


  21.         document.test.file.addEventListener('change', function() {
  22.             var fr = new FileReader();
  23.             fr.onload = function() {
  24.                 preview = this.result;
  25.                 img.src = preview;
  26.                 img.onload = function(){
  27.                     //ctx.clearRect(0, 0, canvas.width, canvas.height); //画布全清
  28.                     ctx.drawImage(img, 0,0, this.width, this.height);
  29.                 }
  30.             };
  31.             fr.readAsDataURL(this.files[0]);
  32.         });

  33.         document.test.addEventListener('submit', function(e) {
  34.             e.preventDefault();
  35.             var binaryString = atob(preview.split(',')[1]),
  36.             mimeType = preview.split(',')[0].match(/:(.*?);/)[1],
  37.             length = binaryString.length,
  38.             u8arr = new Uint8Array(length),
  39.             blob,
  40.             fd = new FormData(),
  41.             xhr = new XMLHttpRequest();
  42.             while(length--) {
  43.                 u8arr[length] = binaryString.charCodeAt(length);
  44.             }
  45.             blob = new Blob([u8arr.buffer], {type: mimeType});
  46.             fd.append('file', blob);
  47.             xhr.open('post', '/upload/upload.php');
  48.             xhr.send(fd);
  49.         });

  50.         /////////////////////////////////////////////
  51.         //获取裁剪的两个顶点
  52.         var sPoint = {},
  53.             ePoint = {};
  54.         canvas.addEventListener('mousedown', function(e) {
  55.          if(e.button === 0) {
  56.             sPoint.x = e.offsetX;
  57.             sPoint.y = e.offsetY;
  58.             sPoint.drag = true;
  59.          }
  60.         });

  61.         canvas.addEventListener('mousemove', function(e) {
  62.          if(e.button === 0 && sPoint.drag) {var nPoint = {
  63.              x: e.offsetX,
  64.              y: e.offsetY
  65.             };
  66.             ctx.save(); //clip要通过restore回复
  67.             ctx.clearRect(0, 0, canvas.width, canvas.height); //画布全清
  68.             drawImage(); //绘制底图
  69.             drawCover(); //绘制阴影
  70.             ctx.beginPath(); //开始路径
  71.             ctx.rect(sPoint.x, sPoint.y, nPoint.x - sPoint.x, nPoint.y - sPoint.y); //设置路径为选取框
  72.             ctx.clip(); //截取路径内为新的作用区域
  73.             drawImage(); //在选取框内绘制底图
  74.             ctx.restore(); //恢复clip截取的作用范围
  75.          }
  76.         });

  77.         //松开鼠标
  78.         canvas.addEventListener('mouseup', function(e) {
  79.          if(e.button === 0) {
  80.             sPoint.drag = false;
  81.             ePoint.x = e.offsetX;
  82.             ePoint.y = e.offsetY;
  83.          }else if(e.button === 2) {
  84.             restore();
  85.          }
  86.         });

  87.         var clip = document.querySelector('#clip');
  88.         clip.addEventListener('click', function(e) {
  89.        e.preventDefault(); //阻止默认事件,不然会触发form的submit
  90.          if(sPoint.x !== undefined && ePoint.x !== undefined) {
  91.             var imgData = ctx.getImageData(sPoint.x, sPoint.y, ePoint.x - sPoint.x, ePoint.y - sPoint.y); //把裁剪区域的图片信息提取出来
  92.             ctx.clearRect(0, 0, canvas.width, canvas.height); //清空画布
  93.             canvas.width = Math.abs(ePoint.x - sPoint.x); //重置canvas的大小为新图的大小
  94.             canvas.height = Math.abs(ePoint.y - sPoint.y);
  95.             ctx.putImageData(imgData, 0, 0); //把提取出来的图片信息放进canvas中
  96.             preview = canvas.toDataURL();
  97.             img.src = canvas.toDataURL(); //裁剪后我们用新图替换底图,方便继续处理
  98.          }else {
  99.             alert('没有选择区域');
  100.          }
  101.         });

  102.         document.addEventListener('contextmenu', function(e) {
  103.          e.preventDefault();
  104.          e.stopPropagation();
  105.         });
  106.     }


  107.     ////////////////////////////////////

  108.     function drawImage() {
  109.       ctx.drawImage(img, 0,0,img.width, img.height); //把图片绘制到canvas上
  110.     }
  111.     //绘制矩形框
  112.     function drawCover() {
  113.       ctx.save();
  114.       ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
  115.       ctx.fillRect(0, 0, canvas.width, canvas.height);
  116.       ctx.restore();
  117.     }
  118.     
  119.     function restore() {
  120.       sPoint = {};
  121.       ePoint = {};
  122.       drawImage();
  123.     }

  124.   </script>
  125. </body>
  126. </html>
后端代码:

点击(此处)折叠或打开

  1. <?php
  2. print_r($_FILES);
  3. move_uploaded_file($_FILES['file']['tmp_name'], time().".jpg" );
  4. ?>


阅读(922) | 评论(0) | 转发(0) |
0

上一篇:DRAM ROM BIOS

下一篇:go简单聊天室

给主人留下些什么吧!~~