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

資訊專欄INFORMATION COLUMN

javaScript旋轉Base64圖片并得到新的base64數據

ccj659 / 1762人閱讀

摘要:旋轉圖片并得到新的數據不合理的地方歡迎小伙伴雅正旋轉圖片度,并產生新的數據項目開發中,甲方希望上傳圖片的時候可以調整圖片的方向,這也是一個合理要求,不合理又怎么樣呢。

javaScript旋轉Base64圖片并得到新的base64數據
不合理的地方歡迎小伙伴雅正

js旋轉base64圖片90*N度,并產生新的base64數據

項目開發中,甲方希望上傳圖片的時候可以調整圖片的方向,這也是一個合理要求,不合理又怎么樣呢。

時間緊迫,我立刻閱覽資料,寄希望與現成的插件,網上的思路是有了,就是利用canvas做圖片旋轉,然后用todataURL()函數生產base64數據,思路是對的,就是函數都不好用,然后自己決定做一個吧。

DOM樣例,點擊下面的旋轉按鈕就能生成宣傳后的base64數據

具體函數的代碼就貼在下面了,三個參數

src:圖片鏈接,無論是url地址還是base64數據都可以

edg:旋轉角度,注意必須是90°的倍數,否則代碼報錯,非90°的旋轉的根據業務需要裁切裁切,用到的話小伙伴可以動動手修改一下函數

callback:因為img的load是個異步的,所以這才采取回調函數處理load成功的事件,回調的參數就是圖片旋轉后的base64的數據

    function rotateBase64Img(src, edg, callback) {

      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");

      var imgW;//圖片寬度
      var imgH;//圖片高度
      var size;//canvas初始大小

      if (edg % 90 != 0) {
          console.error("旋轉角度必須是90的倍數!");
          throw "旋轉角度必須是90的倍數!";
      }
      (edg < 0) && (edg = (edg % 360) + 360)
      const quadrant = (edg / 90) % 4; //旋轉象限
      const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐標

      var image = new Image();
      image.crossOrigin = "anonymous"
      image.src = src;

      image.onload = function () {

          imgW = image.width;
          imgH = image.height;
          size = imgW > imgH ? imgW : imgH;

          canvas.width = size * 2;
          canvas.height = size * 2;
          switch (quadrant) {
              case 0:
                  cutCoor.sx = size;
                  cutCoor.sy = size;
                  cutCoor.ex = size + imgW;
                  cutCoor.ey = size + imgH;
                  break;
              case 1:
                  cutCoor.sx = size - imgH;
                  cutCoor.sy = size;
                  cutCoor.ex = size;
                  cutCoor.ey = size + imgW;
                  break;
              case 2:
                  cutCoor.sx = size - imgW;
                  cutCoor.sy = size - imgH;
                  cutCoor.ex = size;
                  cutCoor.ey = size;
                  break;
              case 3:
                  cutCoor.sx = size;
                  cutCoor.sy = size - imgW;
                  cutCoor.ex = size + imgH;
                  cutCoor.ey = size + imgW;
                  break;
          }


          ctx.translate(size, size);
          ctx.rotate(edg * Math.PI / 180);
          ctx.drawImage(image, 0, 0);

          var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
          if (quadrant % 2 == 0) {
              canvas.width = imgW;
              canvas.height = imgH;
          } else {
              canvas.width = imgH;
              canvas.height = imgW;
          }
          ctx.putImageData(imgData, 0, 0);
          callback(canvas.toDataURL())
      };
    }

函數略大,不優雅,有什么不合理的地方歡迎小伙伴批評指正,共勵共勉。
DOM源碼鏈接https://github.com/sure2darli...
下載即用。

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

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

相關文章

  • JavaScript中的圖片處理與合成(一)

    摘要:中的圖片處理與合成一引言圖片處理現在已經成為了我們生活中的剛需,想必大家也經常有這方面的需求。實際前端業務中,也經常會有很多的項目需要用到圖片加工和處理。 JavaScript中的圖片處理與合成(一) 引言: 圖片處理現在已經成為了我們生活中的剛需,想必大家也經常有這方面的需求。實際前端業務中,也經常會有很多的項目需要用到圖片加工和處理。由于過去一段時間公司的業務需求,讓我在這方面積累...

    Charles 評論0 收藏0
  • html5 上傳本地圖片處理各種問題

    摘要:原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目,項目要求大概是這樣子上傳手機本地圖片,然后裁剪后加的需求能夠旋轉圖片,用于裁剪后面加的需求填寫各種文字,選擇顏色,之后把文字和個相關的圖片,水印到裁剪的圖片上,上傳服務器生成 原文還是在簡書上: html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目,項目要求大概是這樣子:1.上傳手機本地圖片,然后裁剪(后加的需...

    iOS122 評論0 收藏0
  • html5 上傳本地圖片處理各種問題

    摘要:原文還是在簡書上上傳本地圖片處理各種問題這是最近給公司寫一個項目,項目要求大概是這樣子上傳手機本地圖片,然后裁剪后加的需求能夠旋轉圖片,用于裁剪后面加的需求填寫各種文字,選擇顏色,之后把文字和個相關的圖片,水印到裁剪的圖片上,上傳服務器生成 原文還是在簡書上: html5 上傳本地圖片處理各種問題 這是最近給公司寫一個項目,項目要求大概是這樣子:1.上傳手機本地圖片,然后裁剪(后加的需...

    Taste 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<