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如下