H5 实现图片裁剪、上传

2670阅读　0评论2019-05-13　nuoyazhou110
分类：PHP


点击(此处)折叠或打开

  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');


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

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

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

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

  83.         //松开鼠标
  84.         canvas.addEventListener('mouseup', function(e) {
  85.          if(e.button === 0) {
  86.             sPoint.drag = false;
  87.             ePoint.x = e.offsetX;
  88.             ePoint.y = e.offsetY;
  89.          }else if(e.button === 2) {
  90.             restore();
  91.          }
  92.         });

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

  110.         document.addEventListener('contextmenu', function(e) {
  111.          e.preventDefault();
  112.          e.stopPropagation();
  113.         });
  114.     }


  117.     ////////////////////////////////////

  119.     function drawImage() {
  120.       ctx.drawImage(img, 0,0,img.width, img.height); //把图片绘制到canvas上
  121.     }
  122.     //绘制矩形框
  123.     function drawCover() {
  124.       ctx.save();
  125.       ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
  126.       ctx.fillRect(0, 0, canvas.width, canvas.height);
  127.       ctx.restore();
  128.     }
  129.     
  130.     function restore() {
  131.       sPoint = {};
  132.       ePoint = {};
  133.       drawImage();
  134.     }

  136.   </script>
  137. </body>
  138. </html>
后端代码:

点击(此处)折叠或打开

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


上一篇：DRAM ROM BIOS
下一篇：go简单聊天室