小程序圖片剪裁

qylost 發布于2019-08-23 10:30 / 333人閱讀

摘要：基于上面原因，我采用的是里面放置圖片，監聽上面的手勢，通過樣式控制圖片的旋轉縮放和移動，最后剪裁用隱藏的。

一個微信小程序圖片剪裁組件，可以通過手勢控制旋轉縮放移動，也可以點擊旋轉進行90度旋轉，先看下效果（視屏不知道為啥用不了，上個壓縮過度的GIF先）：

圖片剪裁毫無疑問用的是canvas，但是開發過小程序的同學應該了解小程序canvas的一些坑。比如小程序canvas的設定了畫布的大小后不能像web的canvas那樣通過css樣式來調整畫布在手機上顯示的大小、還有canvas不能設置太大因為可能會在某些安卓機上導致小程序崩潰、canvas繪制過大的圖片會讓小程序變得非常卡頓等等。

　　網上能找到的圖片剪裁框架大多采用在canvas上面直接繪制圖片，然后通過監聽canvas上的用戶手勢來控制圖片移動旋轉等，這樣截出來的圖片會出現模糊的問題，因為canvas的太小了。一種解決方法是，在頁面上再放置一個隱藏的canvas大小設為原來的兩倍或者再大一點也行用來作為實際剪裁圖片的canvas，當然剪裁數據都是從第一個canvas那里來的。但是這樣還是有些小問題，就是canvas繪制大的圖片會出現卡頓的問題，這種方案在監聽用戶手勢的變化的時候要不停的重新繪制canvas，卡頓變得更加嚴重，體驗非常不好。

　　基于上面原因，我采用的是view里面放置圖片，監聽view上面的手勢，通過css樣式控制圖片的旋轉、縮放和移動，最后剪裁用隱藏的canvas。先看下頁面布局：

　　最重要的操作是圖片在view中的位置變化如何在canvas中保持一致再剪裁出來，圖片相對與view中的左上角坐標、圖片的長度和寬度我們都是知道的，還有旋轉值通過用戶手勢變化計算出來，旋轉的時候將畫布的中心移動到圖片的中心點再旋轉就行了。

  let ctx = wx.createCanvasContext("imgcrop",this);
  let cropData = _this.data.stv;
  ctx.save();
  // 縮放偏移值
  let x = (_this.data.originImg.width - _this.data.originImg.width * cropData.scale) / 2;
  let y = (_this.data.originImg.height - _this.data.originImg.height * cropData.scale) / 2;

  //畫布中點坐標轉移到圖片中心
  let movex = (cropData.offsetX + x) * 2 + _this.data.originImg.width * cropData.scale;
  let movey = (cropData.offsetY + y) * 2 + _this.data.originImg.height * cropData.scale;
  ctx.translate(movex, movey);
  ctx.rotate(cropData.rotate * Math.PI / 180);
  ctx.translate(-movex, -movey);
  
  ctx.drawImage(_this.data.originImg.url, (cropData.offsetX + x) * 2, (cropData.offsetY + y) * 2, _this.data.originImg.width * 2 * cropData.scale, _this.data.originImg.height * 2 * cropData.scale);
  ctx.restore();

　　查看完整代碼請移步到：https://github.com/yuanwyj/Mi...，喜歡的畫點個start～～

GPU云服務器云服務器圖片剪裁可拖放圖片剪裁 php圖片壓縮與剪裁小程序滾動到圖片js

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

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

實踐是檢驗程序員的唯一標準01：用戶不想跟你說話并向你扔出一張圖片 - 圖片上傳組件開發【思路篇】

摘要：表示不一定是原生形式的數據。接口基于，繼承了的功能并將其擴展使其支持用戶系統上的文件。讀取操作完成的時候，會變成已完成，并觸發事件，同時屬性將包含一個格式的字符串編碼以表示所讀取文件的內容。溫馨提示：這里除了一些幼稚的小組件啥也沒有溫馨提示-續：這是一個新的系列，寫一些實際開發中遇到的一些常用的功能，想法笨拙，代碼亂套寫在前面圖片上傳，作為web端一個常用的功能，在不同的項目中有...

PiscesYE 2019-08-26 11:31 評論0 收藏0
PHP極其強大的圖片處理庫Grafika詳細教程（1）：圖像基本處理

摘要：它包含所有的圖片處理方法。由于，是基于和庫，所以使用方法會根據當前情況，自動選擇所需要的圖片處理庫。這里說明下，如果文字為中文，需要找一個支持中文的字體。默認字體不支持中文，所以你寫中文，就是都是小方框。 Grafika是一個PHP圖像處理庫，是基于Imagick和GD，可以用于改變圖片大小，剪裁，比較，添加水印等等功能。還有感知哈希，高級圖像過濾，繪制貝塞爾曲線等功能，可謂非常強大。...

fai1017 2019-06-27 14:45 評論0 收藏0
Drawable 使用詳解

摘要：啟用或停用位圖過濾。當位圖收縮或拉伸以使其外觀平滑時使用過濾。在每個狀態變更期間，將從上到下遍歷狀態列表，并使用第一個與當前狀態匹配的項目此選擇并非基于最佳匹配，而是選擇符合狀態最低條件的第一個項目。每個可繪制對象由單一元素內的元素表示。 showImg(https://segmentfault.com/img/remote/1460000019975019?w=157&h=54); ...

JinB 2019-08-19 10:19 評論0 收藏0
本文教你用了python圖片剪裁

　　Python語言的表達照片處理使人們常常所使用的層面,那樣我們應該怎么實現圖片的裁切呢?接下來本文關鍵為大家介紹了關于用python圖片剪裁的資料,原文中根據案例編碼推薦的十分詳盡,必須的小伙伴可以借鑒一下　　怎么使用python圖片剪裁　　以上如圖所示，這也是1張包括了各種象棋棋子的照片。我們應該將在其中每個棋盤都裁切出去，這時可以借助python的PIL庫成功?！　∫?、組裝PIL庫　　假如...

89542767 2023-01-12 13:45 評論0 收藏0
如何使用css來讓圖片居中不變形微信小程序和web端適用

摘要：被替換的內容將被縮放，以在填充元素的內容框時保持其寬高比。整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配，該對象將被添加黑邊。如果對象的寬高比與盒子的寬高比不匹配，該對象將被剪裁以適應。圖片變形很多人祭奠出了妖魔鬼怪般的各種大法，比如使用jq來寫，或者使用css表達式來寫。今天我總結的是使用css3來寫，唯一最大缺點就是對一些瀏覽器版本不夠兼容。下面就是關于如何使用c...

番茄西紅柿 2019-04-23 13:32 評論0 收藏0