devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js原生上传图片、裁剪_js 上传图片 自定义裁剪

作者：weixin_40725706 | 2024-05-13 20:00:47

赞

踩

js 上传图片 自定义裁剪

HTML  

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>图片上传裁剪</title>
  7.     <link rel="stylesheet" href="./index.css">
  8. </head>
  9. <body>
  10.     <div class="container">
  11.         <div class="upload">
  12.             <input type="file" id="file" accept="image/*">
  13.             <div class="clipImage">
  14.                 <img id="clipImage" src="">
  15.                 <img id="clipPathImg" src="">
  16.                 <div id="clip">
  17.                     <div class="lt"></div>
  18.                     <div class="rt"></div>
  19.                     <div class="rb"></div>
  20.                     <div class="lb"></div>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.         <div class="preview">
  25.             <div class="preview-img">
  26.                 <span>浏览：</span>
  27.                 <img id="clipView" src="" alt="">
  28.                 <button id="uploadImage">上传</button>
  29.             </div>
  30.         </div>
  31.     </div>
  32.     <script src="./index.js"></script>
  33.     <script>
  34.        let uploadImage = document.getElementById('uploadImage');
  35.        uploadImage.onclick = async function(){
  36.             if(!curCanvas){
  37.                 alert('请先上传图片');
  38.                 return;
  39.             }
  40.              // 获取裁剪后的图片file对象
  41.             let uploadFile = await getClipFile(curCanvas);
  42.             console.log(uploadFile);
  43.        } 
  44.     </script>
  45. </body>
  46. </html>

CSS  

  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     box-sizing: border-box;
  5. }
  6. .container{
  7.     width: 1000px;
  8.     display: flex;
  9.     justify-content: center;
  10.     margin: 0 auto;
  11. }
  12. .upload{
  13.     width: 50%;
  14. }
  15. .clipImage{
  16.     width: 100%;
  17.     position: relative;
  18. }
  19. .clipImage img{
  20.     width: 100%;
  21.     top: 0;
  22.     left: 0;
  23.     display: block;
  24. }
  25. .clipImage::after{
  26.     content: '';
  27.     position: absolute;
  28.     width: 100%;
  29.     height: 100%;
  30.     top: 0;
  31.     left: 0;
  32.     background: rgba(0, 0, 0, 0.5);
  33.     z-index: 1;
  34. }
  35. .clipImage #clipPathImg{
  36.     position: absolute;
  37.     top: 0;
  38.     left: 0;
  39.     width: 100%;
  40.     height: 100%;
  41.     z-index: 2;
  42.     -webkit-clip-path: var(--clipPath);
  43.     clip-path: var(--clipPath);
  44. }
  45. /* 裁剪框 */
  46. #clip{
  47.     position: absolute;
  48.     top: 0;
  49.     left: 0;
  50.     width: var(--clipWidth);
  51.     height: var(--clipHeight);
  52.     left: var(--clipX);
  53.     top: var(--clipY);
  54.     z-index: 3;
  55.     cursor: move;
  56.     /* border: 2px solid red; */
  57.     display: none;
  58. }
  59. #clip .lt{
  60.     position: absolute;
  61.     width: 10px;
  62.     height: 10px;
  63.     background: #fff;
  64.     border: 1px solid #000;
  65.     left: -5px;
  66.     top: -5px;
  67.     cursor: nw-resize;
  68. }
  69. #clip .rt{
  70.     position: absolute;
  71.     width: 10px;
  72.     height: 10px;
  73.     background: #fff;
  74.     border: 1px solid #000;
  75.     right: -5px;
  76.     top: -5px;
  77.     cursor: ne-resize;
  78. }
  79. #clip .lb{
  80.     position: absolute;
  81.     width: 10px;
  82.     height: 10px;
  83.     background: #fff;
  84.     border: 1px solid #000;
  85.     left: -5px;
  86.     bottom: -5px;
  87.     cursor: sw-resize;
  88. }
  89. #clip .rb{
  90.     position: absolute;
  91.     width: 10px;
  92.     height: 10px;
  93.     background: #fff;
  94.     border: 1px solid #000;
  95.     right: -5px;
  96.     bottom: -5px;
  97.     cursor: se-resize;
  98. }
  99.  
  100. /* 浏览 */
  101. .preview{
  102.     width: 100%;
  103.     height: 100%;
  104.     display: flex;
  105.     justify-content: center;
  106. }

JS 

  1. /**
  2.   * 上传图片并裁剪
  3.  */
  4. //  file选择框
  5. let file = document.getElementById('file')
  6. // 裁剪背景图片
  7. let clipImage = document.getElementById('clipImage')
  8. // 裁剪使用的图片
  9. let clipPathImg = document.getElementById('clipPathImg')
  10. // 裁剪框
  11. let clip = document.getElementById('clip');
  12. // 浏览裁剪图片
  13. let clipView = document.getElementById('clipView');
  14. // 裁剪框的尺寸占图片比例
  15. let clipSize = 0.7;
  16. // 图片当前宽高
  17. let clipImageWidth = 0;
  18. let clipImageHeight = 0;
  19. // 图片原始宽高
  20. let clipImageOriginWidth = 0;
  21. let clipImageOriginHeight = 0;
  22. // 缩放比例
  23. let scale = 0;
  24. // 当前canvas对象
  25. let curCanvas = null;
  26.  
  27. // 监听上传状态 浏览图片
  28. file.addEventListener('change', function () {
  29.   let file = this.files[0];
  30.   let reader = new FileReader();
  31.   reader.readAsDataURL(file);
  32.   reader.onload = function () {
  33.     // 读取到的图片数据
  34.     clipImage.src = reader.result;
  35.     // 裁剪使用的图片
  36.     clipPathImg.src = reader.result;
  37.       //获取当前图片的宽高
  38.       getClipImageSize(reader.result).then((res) => {
  39.         // 初始化
  40.         init();
  41.       })
  42.   }
  43. })
  44.  
  45. // 获取上传图片的当前尺寸和原始尺寸
  46. function getClipImageSize(dataurl){
  47.    return  new Promise((resolve) => {
  48.         clipImage.onload = function () {
  49.           resolve(clipImage);
  50.         }
  51.     }).then((data) => {
  52.         // 获取图片当前宽高
  53.         clipImageWidth = data.width;
  54.         clipImageHeight = data.height;
  55.         return new Promise((resolve) => {
  56.           // 获取图片原始宽高
  57.           let img = document.createElement('img');
  58.           img.src = dataurl;
  59.           img.onload = function () {
  60.             resolve(img)
  61.           }
  62.         })
  63.     }).then((data) => {
  64.         // 获取图片原始宽高
  65.         clipImageOriginWidth = data.width;
  66.         clipImageOriginHeight = data.height;
  67.         return Promise.resolve();
  68.     })
  69. }
  70.  
  71. // 初始化
  72. function init(){
  73.   // 显示裁剪框
  74.   clip.style.display = 'block';
  75.   // 缩放比例
  76.   scale = clipImageOriginWidth / clipImageWidth;
  77.  
  78.   // 设置裁剪框的宽高
  79.   let clipWidth = Math.floor(clipImageWidth*clipSize);
  80.   let clipHeight = Math.floor(clipImageHeight*clipSize);
  81.   setClipSize(clipWidth, clipHeight);
  82.  
  83.   // 设置裁剪框的位置
  84.   let x = Math.floor((clipImageWidth - clipWidth)/2);
  85.   let y = Math.floor((clipImageHeight - clipHeight)/2);
  86.   setClipPosition(x, y);
  87. }
  88.  
  89. // 设置裁剪框的尺寸
  90. function setClipSize(clipWidth, clipHeight){
  91.   clip.style.setProperty('--clipWidth', clipWidth + 'px');
  92.   clip.style.setProperty('--clipHeight', clipHeight + 'px');
  93. }
  94.  
  95. // 设置裁剪框的位置
  96. function setClipPosition(x, y){
  97.   clip.style.setProperty('--clipX', x + 'px');
  98.   clip.style.setProperty('--clipY', y + 'px');
  99.   // 设置裁剪阴影
  100.   setClipPath();
  101. }
  102.  
  103. // 设置裁剪阴影
  104.  function setClipPath(){
  105.   let lt = clip.offsetLeft + 'px' + ' ' + clip.offsetTop + 'px';
  106.   let rt =   (clip.offsetLeft + clip.offsetWidth) + 'px' + ' ' + clip.offsetTop + 'px';
  107.   let rb = (clip.offsetLeft + clip.offsetWidth) + 'px' + ' ' +  (clip.offsetTop + clip.offsetHeight) + 'px';
  108.   let lb = clip.offsetLeft + 'px' + ' ' +  (clip.offsetTop + clip.offsetHeight) + 'px' ;
  109.   clipPathImg.style.setProperty('--clipPath', `polygon(${lt}, ${rt}, ${rb}, ${lb})`);
  110.    // 裁剪
  111.   let dataUrl =  clipImg(clip.offsetLeft * scale, clip.offsetTop * scale, clip.offsetWidth * scale, clip.offsetHeight * scale, clip.offsetWidth, clip.offsetHeight);
  112.   // 显示裁剪后的图片
  113.   clipView.src = dataUrl;
  114. }
  115.  
  116. // 裁剪
  117. function clipImg(x,y,cutWidth,cutHeight,width,height,){
  118.   let canvas = document.createElement('canvas');
  119.   let ctx = canvas.getContext('2d');
  120.   canvas.width = width;
  121.   canvas.height = height;
  122.   ctx.drawImage(clipImage, x, y, cutWidth, cutHeight, 0, 0, width, height);
  123.   // 当前canvas对象
  124.   curCanvas = canvas;
  125.   // 返回裁剪后的图片
  126.    return canvas.toDataURL();  
  127. }
  128.  
  129.  
  130. /**
  131.  *  裁剪框的拖拽
  132.  */
  133. // 鼠标按下时的位置
  134. let x = 0;
  135. let y = 0;
  136. // 鼠标按下时裁剪框的位置
  137. let offsetX = 0;
  138. let offsetY = 0;
  139. // 偏移量
  140. let py = {};
  141. // 鼠标按下
  142. clip.onmousedown = function (e) {
  143.   // 鼠标按下时的位置
  144.   x = e.clientX;
  145.   y = e.clientY;
  146.   // 鼠标按下时裁剪框的位置
  147.   offsetX = clip.offsetLeft;
  148.   offsetY = clip.offsetTop;
  149.   // 偏移量
  150.   py = {
  151.     x: e.clientX - offsetX,
  152.     y: e.clientY - offsetY
  153.   }
  154.   // 鼠标移动
  155.   window.onmousemove = function (e) {
  156.     // 鼠标移动的距离
  157.     let moveX = e.clientX - py.x;
  158.     let moveY = e.clientY - py.y;
  159.     // 裁剪框的位置
  160.     let left = moveX;
  161.     let top = moveY;
  162.     // 裁剪框的位置限制
  163.     if (left < 0) {
  164.       left = 0;
  165.     }
  166.     if (top < 0) {
  167.       top = 0;
  168.     }
  169.     if (left > clipImageWidth - clip.offsetWidth) {
  170.       left = clipImageWidth - clip.offsetWidth;
  171.     }
  172.     if (top > clipImageHeight - clip.offsetHeight) {
  173.       top = clipImageHeight - clip.offsetHeight;
  174.     }
  175.     // 设置裁剪框的位置
  176.     setClipPosition(left, top);
  177.   }
  178.   // 鼠标松开
  179.   window.onmouseup = function () {
  180.     window.onmouseup = null;
  181.     window.onmousemove = null;
  182.   }
  183. }
  184.  
  185.  
  186.  
  187. /**
  188.  *  裁剪框的缩放
  189.  */
  190.  
  191. // 获取裁剪框的四个角
  192. let zoomDom = {
  193.   lt: document.getElementsByClassName('lt'),
  194.   rt: document.getElementsByClassName('rt'),
  195.   rb: document.getElementsByClassName('rb'),
  196.   lb: document.getElementsByClassName('lb')
  197. };
  198. // 鼠标按下时的位置
  199. let zoomInfo = {
  200.   x: 0,
  201.   y: 0,
  202.   minWidth: 100,
  203.   minHeight: 100
  204. }
  205. // 鼠标按下时裁剪框的位置
  206. for (let key in zoomDom) {
  207.     zoomDom[key][0].onmousedown = function (e) {
  208.       // 禁止冒泡
  209.       e.stopPropagation();
  210.       // 鼠标按下时的位置
  211.       zoomInfo.x = e.clientX;
  212.       zoomInfo.y = e.clientY;
  213.       // 鼠标移动
  214.       window.onmousemove = function (e) {
  215.         // 鼠标移动的距离
  216.         let moveX = e.clientX - zoomInfo.x;
  217.         let moveY = e.clientY - zoomInfo.y;
  218.         // 裁剪框的位置 
  219.         let left = 0;
  220.         let top = 0;
  221.         // 裁剪框的尺寸
  222.         let width = 0;
  223.         let height = 0;
  224.  
  225.         // 左上角
  226.         if (key === 'lt') {
  227.           // 裁剪框的位置 
  228.           left = clip.offsetLeft + moveX;
  229.           top = clip.offsetTop + moveY;
  230.           // 裁剪框的尺寸
  231.           width = clip.offsetWidth - moveX;
  232.           height = clip.offsetHeight - moveY;
  233.           // 裁剪框的位置限制
  234.           if (left < 0) {
  235.             left = 0;
  236.             // 原来宽度+原来left
  237.             width = clip.offsetWidth + clip.offsetLeft;
  238.           }
  239.           if (top < 0) {
  240.             top = 0;
  241.             // 原来高度+原来top
  242.             height = clip.offsetHeight + clip.offsetTop;
  243.           }
  244.         }
  245.         // 右上角
  246.         if (key === 'rt') {
  247.           // 裁剪框的位置
  248.           top = clip.offsetTop + moveY;
  249.           left = clip.offsetLeft;
  250.           // 裁剪框的尺寸
  251.           width = clip.offsetWidth + moveX;
  252.           height = clip.offsetHeight - moveY;
  253.           // 裁剪框的位置限制
  254.           if (top < 0) {
  255.             top = 0;
  256.             // 原来高度+原来top
  257.             height = clip.offsetHeight + clip.offsetTop;
  258.           }
  259.           if(left + width > clipImageWidth){
  260.             // 图片当前宽-原来left
  261.             width = clipImageWidth - left;
  262.           }
  263.         }
  264.         // 右下角
  265.         if (key === 'rb') {
  266.           // 裁剪框的尺寸
  267.           top = clip.offsetTop;
  268.           left = clip.offsetLeft;
  269.           width = clip.offsetWidth + moveX;
  270.           height = clip.offsetHeight + moveY;
  271.           // 裁剪框的位置限制
  272.           // 当前的left+当前的width>图片当前宽
  273.           if(clip.offsetLeft + width > clipImageWidth){
  274.             width = clipImageWidth - left;
  275.           }
  276.           // 当前的top+当前的height>图片当前宽
  277.           if(clip.offsetTop + height > clipImageHeight){
  278.             height = clipImageHeight - top;
  279.           }
  280.         }
  281.         // 左下角
  282.         if (key === 'lb') {
  283.           // 裁剪框的位置
  284.           left = clip.offsetLeft + moveX;
  285.           top = clip.offsetTop;
  286.           // 裁剪框的尺寸
  287.           width = clip.offsetWidth - moveX;
  288.           height = clip.offsetHeight + moveY;
  289.           // 裁剪框的位置限制
  290.           if (left < 0) {
  291.             left = 0;
  292.             width = clip.offsetWidth + clip.offsetLeft;
  293.           }
  294.           // 当前的top+当前的height>图片当前宽
  295.           if(clip.offsetTop + height > clipImageHeight){
  296.             height = clipImageHeight - top;
  297.           }
  298.         }
  299.         // 裁剪框的限制
  300.         ({width,height,left,top} = ClipWidthPosition(width, height, left, top))
  301.         // 设置裁剪框的位置
  302.         setClipPosition(left, top);
  303.         // 设置裁剪框的尺寸
  304.         setClipSize(width, height);
  305.         // 记录上一次的位置
  306.         zoomInfo.x = e.clientX;
  307.         zoomInfo.y = e.clientY;
  308.       }
  309.       // 鼠标松开
  310.       window.onmouseup = function () {
  311.         window.onmouseup = null;
  312.         window.onmousemove = null;
  313.       }
  314.     }
  315. }
  316.  
  317. /**
  318.  * 裁剪框的宽高限制以及位置限制
  319.  * 
  320.  * @param {裁剪框宽度} w 
  321.  * @param {裁剪框的高度} h 
  322.  * @param {裁剪框的left} l 
  323.  * @param {裁剪框的top} r 
  324.  * @returns {宽度，高度，left，top}
  325.  */
  326. function ClipWidthPosition(w, h,l,t){
  327.   let width = w;
  328.   let height = h;
  329.   let left = l;
  330.   let top = t;
  331.   if (w < zoomInfo.minWidth) {
  332.     width = zoomInfo.minWidth;
  333.     left = clip.offsetLeft;
  334.   }
  335.   if (h < zoomInfo.minHeight) {
  336.     height = zoomInfo.minHeight;
  337.     top = clip.offsetTop;
  338.   }
  339.   return {width, height, left, top};
  340. }
  341.  
  342.  
  343. // 获取file对象
  344. async function getClipFile(canvas){
  345.   const file =  await new Promise((resolve) => {
  346.     canvas.toBlob((blob) => {
  347.      resolve(new File([blob], 'clip.png', {type: 'image/png'}));
  348.     })
  349.   })
  350.   return file;
  351. }

效果：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/565292
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号