Canvas裁剪圖片（截選框可拖拽）

MAX_zuo 發布于2019-08-23 18:22 / 2113人閱讀

摘要：利用實現圖片裁剪效果圖實現思路打開圖片并將圖片繪制到中利用的函數來裁剪圖片將轉化為即可。巨坑轉化為圖片確認截圖確認截圖參考文章我是，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。文章有任何問題歡迎大家指出，也歡迎大家一起交流前端各種問題

利用Canvas實現圖片裁剪 效果圖

實現思路

打開圖片并將圖片繪制到canvas中；

利用canvas的drawImage()函數來裁剪圖片；

將canvas轉化為Image即可。

HTML代碼：

CSS代碼

CSS代碼基本通過javaScript添加

重點JavaScript代碼 變量定義、添加各事件按鈕、容器等：

  let originWidth; // 圖片原始寬度
  let originHeight; // 圖片原始高度
  let container = document.getElementById("container");
  let imgDiv = document.getElementById("imgDiv");    // 存放mycanvas
  let btnDiv = document.getElementById("btnDiv");
  let clipImgDiv = document.getElementById("clipImgDiv");    // 顯示裁剪所獲的圖片
  let btn1 = document.getElementById("btn1");    // 截圖按鈕
  let btn2 = document.getElementById("btn2");    // 確認截圖按鈕
  let btn3 = document.getElementById("btn3");    // 打開文件按鈕
  var oRelDiv = document.createElement("div"); // 截圖框
  var scaleX = 1;// 圖片寬度縮放比例（當前實際/原始）
  var scaleY = 1;  // 圖片高度縮放比例（當前實際/原始）
  //拖拽與拉伸方法
  //拖拽拉伸所需參數
  let params = {
    left: 0,
    top: 0,
    width: 0,
    height: 0,
    currentX: 0,
    currentY: 0,
    flag: false,
    kind: "drag"
  };
  
// CSS樣式修改
  container.style.display = "flex";
  container.style.flexDirection = "column";
  btnDiv.style.marginBottom = "20px";
  btnDiv.style.height = "30px";
  imgDiv.style.marginBottom = "20px";

  // 創建canvas，用于顯示被裁剪圖片
  var myCanvas = document.createElement("canvas");
  myCanvas.setAttribute("id", "myCanvas");
  myCanvas.style.display = "block";
  /*myCanvas.style.position = "absolute";*/
  myCanvas.width = 600;
  myCanvas.height = 600;
  myCanvas.style.border = "1px solid #d3d3d3";
  myCanvas.innerText = "您的瀏覽器不支持 HTML5 canvas 標簽。";
  myCanvas.style.zIndex = "auto";

  var ctx = myCanvas.getContext("2d");

  // 被裁剪圖片
  var img = new Image();
  img.src = "./images/IMG_1550.jpg";
  img.setAttribute("id", "img");
  img.width = 600;
  img.height = 600;
  img.onload = function () {
    console.log("onload()執行...");
    ctx.drawImage(img, 0, 0, 600, 600);
    originWidth = img.naturalWidth;
    originHeight = img.naturalHeight;
    console.log("圖片原始寬度=", originWidth);
    console.log("圖片原始高度=", originHeight);
  };

  // 裁剪得到的圖片
  let clipImg = new Image();
  clipImg.src = "";
  clipImg.style.height = "100px";
  clipImg.style.width = "100px";
  clipImg.alt = "裁剪獲得圖片...";

  // input用于打開文件
  let fileInput = document.createElement("input");
  fileInput.setAttribute("multiple", "multiple");
  fileInput.setAttribute("type", "file");
  fileInput.setAttribute("id", "fileInput");

  /*btnDiv.appendChild(fileInput);*/
  imgDiv.appendChild(myCanvas);
  /*clipImgDiv.appendChild(clipImg);*/

一些簡單的功能函數

// 生成本地圖片URL地址
let getObjectURL = function (file) {
    let url = null;
    if (window.createObjectURL !== undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.webkitURL !== undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    } else if (window.URL !== undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    }
    return url;
  };

  // 獲取指定元素DOM
  const ID = function (id) {
    return document.getElementById(id);
  };

  //獲取相關CSS屬性方法
  let getCss = function (o, key) {
    return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
  };

打開本地圖片

可伸縮截圖框實現思路：

截圖框由8各控制截圖框大小、位置小div組成，鼠標在選中截圖框后在拖動鼠標的過程中會根據鼠標位置對截圖框進行實時繪制

// 打開本地圖片
fileInput.addEventListener("change", function () {
    console.log("change()執行...");
    img.src = getObjectURL(this.files[0]);
  });
btn3.addEventListener("click", function () {
    fileInput.click();
  });

截圖選框的繪制、拖動、大小調整

btn1.addEventListener("click", function () {
    var clickFlag = false;
    // 獲取canvas中圖片實際大小
    var iCurWidth = img.width;
    var iCurHeight = img.height;
    console.log("圖片當前實際寬度=", iCurWidth);
    console.log("圖片當前實際高度=", iCurHeight);

    // 可調整截圖框
    oRelDiv.innerHTML = "";
    oRelDiv.style.position = "absolute";
    oRelDiv.style.width = iCurWidth + "px";
    oRelDiv.style.height = iCurHeight + "px";
    oRelDiv.style.top = myCanvas.offsetTop + "px";
    console.log("oRelDiv.style.top = ", oRelDiv.style.top);
    oRelDiv.id = "cropContainer";

    var iOrigWidth = originWidth;
    var iOrigHeight = originHeight;
    scaleX = iCurWidth / iOrigWidth; // 圖片寬度縮放比例（當前實際/原始）
    scaleY = iCurHeight / iOrigHeight;  // 圖片高度縮放比例（當前實際/原始）
    console.log("圖片橫向（寬度）縮放比=", scaleX);
    console.log("圖片縱向（高度）縮放比=", scaleY);

    // 將oRelDiv插入到myCanvas前
    myCanvas.parentNode.insertBefore(oRelDiv, myCanvas);

    //初始化坐標與剪裁高寬
    var cropW = 80; //截圖框默認寬度
    var cropH = 80; //截圖框默認高度
    /*console.log("myCanvas.offsetLeft=", myCanvas.offsetLeft);
    console.log("myCanvas.offsetTop=", myCanvas.offsetTop);*/
    var posX = myCanvas.width / 2 - cropW / 2;  // 截圖框左上角x坐標
    var posY = myCanvas.height / 2 - cropH / 2;    // 截圖框左上角y坐標
    /*console.log("posX=",posX);
    console.log("posY=",posY);*/

    oRelDiv.innerHTML = "" +
      "" +
      "" +
      "" +
      "" +
      "" +
      "" +
      "" +
      " " +
      "" +
      "" +
      "" +
      "" +
      "" +
      "";

    var startDrag = function (point, target, kind) {
      //point是拉伸點，target是被拉伸的目標，其高度及位置會發生改變
      //此處的target與上面拖拽的target是同一目標，故其params.left,params.top可以共用，也必須共用
      //初始化寬高
      params.width = getCss(target, "width");
      params.height = getCss(target, "height");
      //初始化坐標
      if (getCss(target, "left") !== "auto") {
        params.left = getCss(target, "left");
      }
      if (getCss(target, "top") !== "auto") {
        params.top = getCss(target, "top");
      }
      //target是移動對象
      point.onmousedown = function (event) {
        params.kind = kind;
        params.flag = true;
        clickFlag = true;
        if (!event) {
          event = window.event;
        }
        var e = event;
        params.currentX = e.clientX;  //鼠標按下時坐標x軸
        params.currentY = e.clientY;  //鼠標按下時坐標y軸
        /*console.log("params.currentX=", params.currentX);
        console.log("params.currentY=", params.currentY);*/
        //防止IE文字選中，有助于拖拽平滑
        point.onselectstart = function () {
          return false;
        };

        document.onmousemove = function (event) {
          let e = event ? event : window.event;
          clickFlag = false;
          if (params.flag) {
            var nowX = e.clientX; // 鼠標移動時x坐標
            var nowY = e.clientY;   // 鼠標移動時y坐標
            var disX = nowX - params.currentX;  // 鼠標x方向移動距離
            var disY = nowY - params.currentY;  // 鼠標y方向移動距離
            if (params.kind === "n") {
              //上拉伸
              //高度增加或減小，位置上下移動
              target.style.top = parseInt(params.top) + disY + "px";
              target.style.height = parseInt(params.height) - disY + "px";
            } else if (params.kind === "w") { //左拉伸
              target.style.left = parseInt(params.left) + disX + "px";
              target.style.width = parseInt(params.width) - disX + "px";
            } else if (params.kind === "e") { //右拉伸
              target.style.width = parseInt(params.width) + disX + "px";
            } else if (params.kind === "s") { //下拉伸
              target.style.height = parseInt(params.height) + disY + "px";
            } else if (params.kind === "nw") { //左上拉伸
              target.style.left = parseInt(params.left) + disX + "px";
              target.style.width = parseInt(params.width) - disX + "px";
              target.style.top = parseInt(params.top) + disY + "px";
              target.style.height = parseInt(params.height) - disY + "px";
            } else if (params.kind === "ne") { //右上拉伸
              target.style.top = parseInt(params.top) + disY + "px";
              target.style.height = parseInt(params.height) - disY + "px";
              target.style.width = parseInt(params.width) + disX + "px";
            } else if (params.kind === "sw") { //左下拉伸
              target.style.left = parseInt(params.left) + disX + "px";
              target.style.width = parseInt(params.width) - disX + "px";
              target.style.height = parseInt(params.height) + disY + "px";
            } else if (params.kind === "se") { //右下拉伸
              target.style.width = parseInt(params.width) + disX + "px";
              target.style.height = parseInt(params.height) + disY + "px";
            } else { //移動
              target.style.left = parseInt(params.left) + disX + "px";
              target.style.top = parseInt(params.top) + disY + "px";
            }
          }

          document.onmouseup = function () {

            params.flag = false;
            if (getCss(target, "left") !== "auto") {
              params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
              params.top = getCss(target, "top");
            }
            params.width = getCss(target, "width");
            params.height = getCss(target, "height");
            /*console.log("params.width=", params.width);
            console.log("params.height", params.width);*/

            //給隱藏文本框賦值
            posX = parseInt(target.style.left);
            posY = parseInt(target.style.top);
            cropW = parseInt(target.style.width);
            cropH = parseInt(target.style.height);
            if (posX < 0) {
              posX = 0;
            }
            if (posY < 0) {
              posY = 0;
            }
            if ((posX + cropW) > iCurWidth) {
              cropW = iCurWidth - posX;
            }
            if ((posY + cropH) > iCurHeight) {
              cropH = iCurHeight - posY;
            }
            //賦值
            ID("cropPosX").value = posX;
            ID("cropPosY").value = posY;
            ID("cropImageWidth").value = parseInt(ID("zxxCropBox").style.width);
            ID("cropImageHeight").value = parseInt(ID("zxxCropBox").style.height);

            /*console.log("posX=",posX);
            console.log("posY=",posY);*/
          };
        }
      };
    };

    //綁定拖拽
    startDrag(ID("zxxDragBg"), ID("zxxCropBox"), "drag");
    //綁定拉伸
    startDrag(ID("dragLeftTop"), ID("zxxCropBox"), "nw");
    startDrag(ID("dragLeftBot"), ID("zxxCropBox"), "sw");
    startDrag(ID("dragRightTop"), ID("zxxCropBox"), "ne");
    startDrag(ID("dragRightBot"), ID("zxxCropBox"), "se");
    startDrag(ID("dragTopCenter"), ID("zxxCropBox"), "n");
    startDrag(ID("dragBotCenter"), ID("zxxCropBox"), "s");
    startDrag(ID("dragRightCenter"), ID("zxxCropBox"), "e");
    startDrag(ID("dragLeftCenter"), ID("zxxCropBox"), "w");


    //圖片不能被選中，目的在于使拖拽順滑
    ID("myCanvas").onselectstart = function () {
      return false;
    };
    img.onselectstart = function () {
      return false;
    };
  });

所獲截圖繪制

function cropImage(img, cropPosX, cropPosY, width, height) {
    /*var cropContainer = ID("cropContainer");
    cropContainer.parentNode.removeChild(cropContainer);*/
    /*ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);*/
    //sx,sy 是相對于圖片的坐標。巨坑
    var newCanvas = document.createElement("canvas");
    newCanvas.setAttribute("id", "newCanvas");
    newCanvas.width = width * scaleX;
    newCanvas.height = height * scaleY;
    newCanvas.style.border = "1px solid #d3d3d3";
    var newCtx = newCanvas.getContext("2d");
    clipImgDiv.appendChild(newCanvas);
    newCtx.drawImage(img, cropPosX, cropPosY, width, height, 0, 0, width * scaleX, height * scaleY);

    // canvas轉化為圖片
    var newImage = new Image();
    newImage.src = newCanvas.toDataURL("image/png");
    newImage.style.marginLeft = "5px";
    clipImgDiv.appendChild(newImage);

    oRelDiv.innerHTML = "";
  }

確認截圖

// 確認截圖
  btn2.addEventListener("click", function () {
    console.log("clipend......");

    var x = document.getElementById("cropPosX").value;
    var y = document.getElementById("cropPosY").value;
    var w = document.getElementById("cropImageWidth").value;
    var h = document.getElementById("cropImageHeight").value;
    console.log("cropImage(img,", x, ",", y, ",", parseInt(w), ",", parseInt(h), ")");
    cropImage(img, x / scaleX, y / scaleY, parseInt(w) / scaleX, parseInt(h) / scaleY);
  });

參考文章：https://blog.csdn.net/qq_3870...

我是Cloudy，年輕的前端攻城獅一枚，愛專研，愛技術，愛分享。 
個人筆記，整理不易，感謝閱讀、點贊和收藏。
文章有任何問題歡迎大家指出，也歡迎大家一起交流前端各種問題！

GPU云服務器云服務器截選框可 java表單可拖拽 html可拖拽的表格可拖放圖片剪裁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105121.html

畫布、拖放事件、音視頻

摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。一、拖放事件 1.1 設置拖拽給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...

Nosee 2019-08-29 16:12 評論0 收藏0
畫布、拖放事件、音視頻

摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。一、拖放事件 1.1 設置拖拽給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...

dailybird 2019-08-23 10:31 評論0 收藏0
畫布、拖放事件、音視頻

摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。一、拖放事件 1.1 設置拖拽給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...

atinosun 2019-08-02 11:05 評論0 收藏0

發表評論

登陸后可評論

0條評論

MAX_zuo

男|高級講師

我要關注我要私信

TA的文章

易探云：棗莊高防云服務器促銷,4核4G內存/30M帶寬/100G防御,130元/月

閱讀 3530·2021-11-23 10:10
你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

閱讀 3292·2019-08-30 14:03
CSS實用技巧總結一

閱讀 2066·2019-08-30 13:09
前端每日實戰：29# 視頻演示如何不用 transition 和 animation 也能做網頁動畫

閱讀 3392·2019-08-29 15:29
移動端h5開發相關內容總結（四）

閱讀 1540·2019-08-29 11:23
CSS清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？

閱讀 2002·2019-08-28 18:28
Webpack Loader 高手進階(一)

閱讀 2840·2019-08-26 13:34
用Vue搭建一個應用盒子（一）：todo-list

閱讀 2168·2019-08-26 11:32

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

Canvas裁剪圖片（截選框可拖拽）

相關文章

畫布、拖放事件、音視頻

畫布、拖放事件、音視頻

畫布、拖放事件、音視頻

發表評論

0條評論

MAX_zuo

男|高級講師

TA的文章

易探云：棗莊高防云服務器促銷,4核4G內存/30M帶寬/100G防御,130元/月

你可能不了解的動畫神器之requestAnimationFrame及其兼容寫法

CSS實用技巧總結一

前端每日實戰：29# 視頻演示如何不用 transition 和 animation 也能做網頁動畫

移動端h5開發相關內容總結（四）

CSS清除浮動float的三種方法總結，為什么清浮動？浮動會有那些影響？

Webpack Loader 高手進階(一)

用Vue搭建一個應用盒子（一）：todo-list

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

Canvas裁剪圖片（截選框可拖拽）

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！