A. 前端圖片裁剪怎麼實現
寫個div把圖片作為div的背景，然後如下
div{
background:url("imagepath")no-repeat x y
//x為橫向偏移值，y為縱向偏移值。通過設置div大小，來限制圖片顯示的大小，然後通過偏移，來選擇要顯示的圖片區域
}
B. 前端開發怎麼截圖
使用Fireworks的切片工具.
一般來說,可以是用PS將psd文件按照demo圖和業務不同需要保存成幾分.
然後使用Fireworks的切片工具來裁剪需要的圖片區域.
Fireworks,優勢在於啟動快速, 由於操作是的圖片而不是巨大的psd, 所以在截圖的時候速度也很快.
可以保存多種圖片格式, gif png(8, 24, 32) jpg.
C. 前端怎麼實現手機相機拍照之後用戶手動裁剪
這個我們可以直接點擊手機上的相機，可以通過相機的這個前攝攝像頭或者後像攝像頭直接拍照就好了，就會保存到自己的這個手機上，不需要剪輯。
D. 前端必備的切圖知識
本文以Adobe Photoshop CC 2018 (32 Bit)版本為例介紹，不同版本可能有細微差異。
由於ps默認的是以厘米為單位，因此需要修改為我們前端所用的以像素為單位：
編輯-->首選項-->單位與標尺-->按下圖修改即可：
由於ps默認未啟用標尺及智能參考線等，因此需要自行開啟：
如果左側工具欄未開啟顯示，則也可在此設置讓其顯示；另外需要提的是，信息面板需要一些額外的設置：
信息面板選項設置
以上設置完後，建議保存工作區以保存之前預設的一些設置。
保存工作區方法： 窗口-->工作區-->新建工作區
這里就不解釋了，直接上圖：
選擇移動工具 ---> 勾選自動選擇及選擇圖層選項（不是組） --->選擇預切圖的位置（選擇後會自動跳至相應圖層）--->右鍵相應的圖層--->選擇轉換為智能對象--->啟用選框工具框選相應區域--->復制--->新建文件--->粘貼--->選擇圖像菜單--->選擇裁切--->選中基於透明像素--->確定即可；
此方法比較適合不規則的圖像，比如logo等；
拉好參考線後，選擇切片工具--->點擊 基於參考線的切片
--->文件--->導出--->存儲為web所用格式--->選擇png24--->存儲--->選中所有用戶切片；
由於有很多條參考線存在時會相互干擾，我們可以將原有圖片裁剪成幾個獨立的部分，然後再使用參考線切圖法即可。
文件--->導出（Photoshop低級版本此處是腳本而不是導出）--->將圖層導出到文件--->設置文件類型（PNG24，勾選透明區域、交錯及裁切圖層）
完成後，ps腳本會自動運行。可能耗時比較長。
該方法需要事先設置兩個地方：
a、編輯-->首選項-->增效工具-->啟用生成器
b、文件-->生成-->圖像資源
上述兩個設置完成後，啟用移動工具，選擇需要的切圖，在其圖層上加後綴名，則在原始psd文件目錄下的xxxxxx-assets文件夾中會自動生成相應格式的圖片（甚至svg）。
當然我們還可以在後綴名添加數字來表示圖片的質量。比如logo.jpg8（表示80%的質量），logo.png24，logo.png8等。當然如果不加數字的話則默認取最大值；
不僅如此，我們還可以設置生成後的大小倍數 比如命名 300% logo @2x.png 則表示會在原有基礎上放大三倍大小導出。這一點對視網膜屏很有用。
E. PS-前端切圖教程（切jpg圖和切png圖）
轉發自： PS-前端切圖教程（切jpg圖和切png圖） - xing.org1^ - 博客園 (cnblogs.com)
———————-------------------------------------------------------------------- PS切圖步驟說明 ————————————————————————————————
一共分兩大項：切jpg圖、切png圖。
我用的是PS CC 版本，教程中用到的除了界面和擺放位置不一樣外，其他應該和低版本的都一樣了。
一、 切JPG圖
1．打開ps導入圖片的步驟是鐵定的了
2．選擇左邊工具欄里的「切片工具」
事先自己沒用過或上一次ps工具使用時沒有使用過「切片工具」的，打開ps工具欄里默認是「裁剪工具」的圖標
你可以滑鼠左鍵點住「裁剪工具」不鬆手，他會在右邊展開（我這是工具欄在ps界面左側的情況下）這一組的所有工具，在里邊選擇「切片工具」即可
我圖中之所以框選了兩個工具，是因為後期還要用到「切片選擇工具」，這里先認識一下他的位置在哪。
3．用「切片工具」切出想要的范圍，框選范圍就像平時用qq的截圖工具一樣。
如下，我需要這個小圖標，我就框選了他。
框選中：
框選後：
如果你框選好了松開了滑鼠，他還是這種黃色的邊線，你把「切片工具」移到附近，他還能調整框的大小范圍。
但是如果你框選了好幾個了，想改前邊已經框選好的：
像如上這樣，要知道，ps切片工具最近一個選區的切片是用黃色框包裹的，其他前邊切得都是藍色邊線，這時候你再用「切片工具」去調整藍色邊線的選區是動不了的。
這就要用上「切片選擇工具」了
4．「切片選擇工具」調整范圍：
切片選擇工具就在「切片工具」的下邊，尋找方法見上解。點擊選擇要調整的切片藍線，待其變成黃色後，調整范圍。
切片選擇工具只能選擇並調節范圍，不能切片。
5．切好後保存
保存方法：文件——存儲為web所用格式【快捷鍵ctrl+shift+alt+s】
在彈出的【存儲為web所用格式】對話框中，下拉選擇框選擇JPEG格式
按需求更改質量（低、中、高、非常高、最佳。這五個模式）
點擊存儲後彈出【將優化結果存儲為】的對話框
選擇存放位置、設置文件信息——
一般存儲時，ps會自動建立一個images文件夾，你要找到剛才自己設定的位置中，找images文件夾，在她里邊才有你剛才切好的圖。
命名文件名
「格式「——僅限圖像
在「切片」那裡，可以選擇是存儲全部切片還是只存儲選中的切片，
一般默認就存儲全部切片就好了，有時候只需要一小塊切片時，可以選擇存儲選中的切片，他會只保存一張你當前切得圖，這樣省的自己去一大堆切片中撿出來自己要用的了。
二、 切PNG圖
切透明圖的核心理念是，你要把不需要的背景圖給隱藏掉，只讓需要的留下來，底部背景變成像馬賽克那樣的樣式。
1．打開ps拖進來你要切的psd或者tif文件，
一定得是帶圖層的。
2．先選擇移動工具
3．並在頂部選項欄里勾選自動選擇，
4．下拉框里選擇圖層
若沒有選項欄或者圖層欄的：
在菜單欄點擊窗口——選項。打了對勾後就能調出工具對應的選項面板了。
5．然後用「移動工具」點擊你不需要的背景圖，ps會自動選中該背景所在的圖層，
6．你在圖層面板中，把對應這層的左邊小眼睛關掉就好了，讓背景圖先隱藏起來。
有時候設計會有好幾層，他為了光效或者其他效果做了好幾層不同透明度的背景疊加在你要切的東西後邊，
你就用移動工具（快捷鍵v【英文輸入法下按v就可以鎖定移動工具】）點擊它然後關掉它，有幾層就多做幾步，直到你不需要的背景全部隱藏掉。
但是良心的設計一般會把背景都放到一個圖層中，你找到一層背景，所有的都和他在一個組里邊，你把組的小眼睛關掉即可
7．然後切片工具切出你要的那個圖標
8．保存：文件-存儲為web所用格式(ctrl+shift+alt+s)
9．選擇png-8/png-24格式，看你對圖標的要求了
PNG8」是指8位索引色點陣圖，「PNG24」是24位索引色點陣圖；
png8：
每一張「png8」圖像，都最多隻能展示256種顏色，所以「png8」格式更適合那些顏色比較單一的圖像，
例如純色、logo、圖標等；因為顏色數量少，所以圖片的體積也會更小；
png24：
每一張「png24」圖像，可展示的顏色就遠遠多於「png8」了，最多可展示的顏色數量多大1600萬；
所以「png24」所展示的圖片顏色會更豐富，圖片的清晰度也會更好，圖片質量更高，當然圖片的大小也會相應增加，
所以「png24」的圖片比較適合像攝影作品之類顏色比較豐富的圖片；
這是二者的區別，根據自己的需求選擇吧。
10．然後就是一定要勾選透明度，其他默認設置就好。
Png-8的透明度位置
Png-24的透明度位置
11．」保存全部切片「或者「保存選中切片」
這里還要說明一個問題，有時候一個頁面中，我用切片工具選出好幾張png圖標准備切，然後保存的時候也選擇png格式都沒問題，
但是到了選擇保存位置這個對話框里，選擇的是「保存所有切片「，
最後保存出來的圖片，只有最後切得那張或者說切片工具選中的那張是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的圖，還是建議，一張一張「保存選中切片」比較好。
或者你的圖標與白色底差別大的話，你也可以不計較，讓他保存成jpg後再去ps中魔棒摳圖也好，不過這樣比較麻煩不是。
有的說，背景圖和圖標每分圖層咋辦？那咋辦？找設計吧。要不你自己選取工具扣吧，扣好了另存為png也是一種辦法
三、 其他技巧 ：
1．Ctrl+ +號放大圖片，
2．ctrl-縮小
3．按住空格，滑鼠圖標變成抓手工具，移動頁面
四、重磅彩蛋！！！還有一個吊炸天的方法——針對單一小icon切成png的
「移動工具」點擊圖標，選中圖標所在的圖層；
右擊該圖層，選擇「轉換為智能對象」；（ps這時候沒反應，不要大驚小怪，是你看不到而已）
接著再次在這個圖層上，右擊——「編輯內容」
對話框點擊確定
ps就自動生成一個新的文件，只有那個icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有沒有！
以下是圖解：
這是點擊一個小圖標
選中圖標後的圖層面板
右鍵點擊該圖層選擇「轉換為智能對象」
沒轉換前的圖層樣式：
轉換後的圖層樣式：
所以別說「我轉換了ps沒反應」這樣的話了，是有的，你不仔細看看不到
接著再右擊——「編輯內容」
點擊「確定」
看，他就新建了一個「形狀8」的頁面，放的是我的png的小圖標，
最後你保存為png也好，「存儲為web所有格式」也好，自由發揮吧。
這個方法可能只能保存一個圖標，
有的人說我好幾個圖：例如文字+圖片都有咋弄？
那就切圖唄！
那還要糾結的話那就合並圖層吧！
F. 幾個有效的前端數據處理的方法
一、JSON對象過濾數據（處理復雜數據時可以直接在內部過濾掉）
封裝方法：
function getTargetObject(targetObject, propsArray){if(typeof(targetObject) !=="object"|| !Array.isArray(propsArray)) {thrownewError("參數格式不正確"); }constresult = {};Object.keys(targetObject).filter(key=>propsArray.includes(key)).forEach(key=>{ result[key] = targetObject[key]; })returnresult;}
使用方法：
let arr = {a: '1', b:'2', c: '3'}
getTargetObject(arr, ['a', 'b'])
引用網站： https://segmentfault.com/q/1010000016133960/a-1020000016134570
二、數組切割（當後端傳來數據過多的時候，將數據切成幾個等分，用戶下拉的時候再展示）
* 將一個數組分成幾個同等長度的數組 * array[分割的原數組] * size[每個子數組的長度]
*/functionsliceArray(array, size) {
varresult = [];
for(varx = 0; x < Math.ceil(array.length / size); x++) {
varstart = x * size;
varend = start + size;
result.push(array.slice(start, end));
} returnresult }
引用網站： https://..com/question/941679549069381612.html?fr=iks&word=js%CA%FD%D7%E9%C7%D0%B7%D6&ie=gbk
三、數據過濾（使用JSON.stringify方法）
數據： persons: [
{apple: '蘋果'},
{watermelon: '西瓜'},
{lemon: '檸檬'},
{Blueberry: '藍莓'},
{orange: '橙子'}],
方法： handChange() {
let oneFruits = JSON.stringify(this.persons, function (inx, ite) {
if (inx === 'watermelon' || inx === 'orange') {
return undefined
} else {
return ite } })
this.persons = JSON.parse(oneFruits) }
結果：
四、通過$set給數據注入值並更新視圖（解決在vue中新增數據不更新視圖的問題）
數據： persons: [
{id: '1',name: '蘋果'},
{id: '2',name: '西瓜'},
{id: '3',name: '檸檬'},
{id: '4',name: '藍莓'} ]
方法： handChange() {
let oneFruits = JSON.parse(JSON.stringify(this.persons[0]))
let twoFruits = JSON.parse(JSON.stringify(this.persons[1]))
let newFruits = {id: '5', name: '葡萄'}
console.log(twoFruits)
this.$set(this.persons, 1, oneFruits) // 將西瓜的位置放上蘋果
this.$set(this.persons, 0, twoFruits) // 將蘋果的位置方式西瓜
this.$set(this.persons, 4, newFruits) // 添加葡萄並更新視圖
console.log(this.persons) }
結果：
G. 【微信小程序】圖片裁剪 前端裁剪 後端裁剪
微信小程序裁剪組件，支持前端裁剪和後端裁剪兩種方式
1.前端裁剪：將裁剪框指定的區域，單獨生成圖片，獲取裁剪圖片的臨時文件路徑
2.後端裁剪：獲取裁剪框相對於原圖的像素坐標位置，將裁剪區域坐標以及原圖臨時文件路徑，傳到後端進行圖片裁剪
https://gitee.com/gnliscream/image-cropper
使用微信小程序自定義組件開發
小程序自定義組件官網： https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
添加image-cropper標簽，如下
可以在image-cropper標簽內添加操作按鈕，如下
首先需要在onLoad方法中，設置裁剪標簽屬性
然後添加按鈕相應的綁定方法
獲取到的res如下
獲取到的裁剪參數的對應關系圖
獲取到裁剪參數後，將原圖以及裁剪參數傳到後台進行裁剪
2.獲取裁剪圖片地址
獲取到的res如下