切图

参考链接 Fabric.js 简单介绍和使用 简介 Fabric.js是一个可以简化canvas程序编写的库。 Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。基于MIT协议开源，在github上有许多人贡献代码。 为什么选择fabric.js 手上的项目必须使用canvas 原生的canvas API不够友好 用fabric.js实现切图用户体验更好 为项目以后的迭代留下扩展的余地 简单上手 请参考文章开头的参考链接 这里主要介绍一下为了实现以下目标所需要配置的东西 终极目标： 加载图片 鼠标拖动生成切图框 点击切图后按照原图比例切出图片 将切出来的图片通过ajax上传至服务器 1. 加载图片 设置一个不可见的canvas并将原尺寸图片绘制上 12345678910 let fullImgCv = document.createElement('canvas')let fullImgCtx = fullImgCv.getContext('2d')let fullImg = new Image()fullImg.src = '***'//your pathfullImg.crossOrigin = "Anonymous"fullImg.onload = function () { fullImgCv.width =

妈呀，不得不感慨一下，切了这么久的图，竟然不知道有个切图工具这么好用 以前我的切图流程： 拿到ui设计好的psd文件 ==> 拉基准线 ==> 切片工具切图 ==>（如果图片下还有别的图层）用移动工具找到别的图层，右侧把多余的图层隐藏掉 ==> 文件导出，存储为web所用格式 ==>完成 结果有这么一天，看着ui给我的切片文件那么快，好奇问了一下，额。。。。工具原来这么用，图层原来这么用。。。可能专业的ui使用这个方法不以为然，但是我这里，拜过了。。。 下面是快速切图的方法奉上： 1.点击移动工具，然后点一下要切的图片，右侧自动选中当前图层 2.打开切图神奇（窗口 ==> 扩展功能 ==> Cutterman-切图神奇） 3.选择模式、导出图片的格式及导出图片的存放位置（新建文件夹后，再点击新建文件夹就能新增存放的位置），最后点击“导出选中图层”，完成 另外，如果ui给的图层需要合并成一个图片导出的话，按住ctrl键，鼠标挨个选择需要合并的图层，之后Ctrl+E合并图层即可 使用这个方法，省去了拉基准线、切图片以及隐藏不必要的图片这些操作，美滋滋。。。 来源： https://www.cnblogs.com/duanzhenzhen/p/11595955.html

蓝湖 sketch for Mac 是一款适用于sketch的高效切图插件。本次为您带来了如何使用蓝湖 sketch for Mac设置切图的教程，想知道如何使用的小伙伴千万不要错过教程哦，快来看看吧！ 使用蓝湖 sketch for Mac设置切图 方法一. 选中图标后 点击 右下角Make Exportable 点击完成后 文件夹列表图标上 会有个切刀 这就算切图完成了。之后上传该画板 切图会跟随画板一起上传 此类切图导出后 不包含透明边距 推荐使用第二种方法 方法二. 开始和第一布相同 点击 右下角Make Exportable ,然后点击上面的切刀按钮 此时会在页面上生成一个 切图区域 这个切图区域也可以自定义调整大小，切图区域的大小 就是最后导出时图标的大小 方法三. 可以在工具栏内找到 切图 工具 快捷键 s 选择后 可以在页面内随意拖拽 创建和 方法二一致的切图范围 设置好切图后 不需再次导出，然后打开蓝湖插件 上传设计稿 切图会跟随画板一起上传。 如果切图下载下来有背景色，如何去掉背景色？ 把你的图标和切图 成组 成组后右侧把Export group contents only 勾上，再从新上传到蓝湖，下载切图就不带背景色了 来源： https://blog.csdn.net/tyyyyyy1114/article/details/100121367

一直以来切图一直都是在windows下面使用fireworks来做，或者ps来做。 最近转到力linux下面，而且也没有想转回去的意思了。专心研究如何在linxu下面进行切图。 下面简单介绍一下我现在的思路。 1. guide line http://docs.gimp.org/2.6/en/gimp-concepts-image-guides.html 这里是介绍参考线的使用。 2. 选择 滤镜-》网页-》slice 配置好（就像fireworks一样） 一切ok 相关参考资料： 猛击这里 转载于:https://www.cnblogs.com/TLightSky/archive/1970/01/01/2941457.html 来源： https://blog.csdn.net/weixin_30814319/article/details/99919853

iPhone 6 / 6 Plus 设计·适配方案 关于iPhone6/6+适配问题一直有争议，今天小编专门为大家整理了相关的有效方案，希望对大伙儿有帮助！ 移动app开发中多种设备尺寸适配问题，过去只属于Android阵营的头疼事儿，只是很多设计师选择性地忽视android适配问题，只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏iPhone 6，iOS平台尺寸适配问题终于还是来了，移动设计全面进入“杂屏”时代。看看下面三款iPhone尺寸和分辨率数据就知道屏幕有多杂了。 加上Android生态中纷繁复杂的各种奇葩尺寸，现在APP设计开发必须考虑适配大、中、小三种屏幕。所以如何做到交付一套设计稿解决适配大中小三屏的问题？设计和开发之间采用什么协作模式？一个基本思路是： 1、选择一种尺寸作为设计和开发基准； 2、定义一套适配规则，自动适配剩下两种尺寸； 3、特殊适配效果给出设计效果。 手机淘宝的iPhone 6/iPhone 6 Plus适配版本即将提交App store审核。先晒一下我们采用的协作模式，再慢慢说明原委。 第一步，视觉设计阶段，设计师按宽度750px（iPhone 6）做设计稿，除图片外所有设计元素用矢量路径来做。设计定稿后在750px的设计稿上做标注，输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿，在1125px的稿子里切图。 第二步

鉴于很多朋友问到如何切图这个问题，又鉴于这个问题可大可小，一两句话是绝对讲不清楚的，所以今天有空闲在家里就举一个简单的例子来说明这个问题吧!OK，让我们开始： 　　step1:在 Photoshop 中打开设计稿，如下图 　　 选择工具板上的slice切片工具，先大刀阔斧的切上一番!技巧： 大面积的色块单独切成一块，尽可能的保持在水平线上的整齐(这个问题你们在后面的制作页面中深有感触)切好的图如下所示： 　　step2:在PhotoShop中选择file-save for web...来输出，这里要注意一些参数的选择： 　　我们来看看红线所标识的1，2，3部分，将1所示的切片工具选中，然后点选2所示的图片，在3所示的地方选择色值，如果色彩单一可以选择尽量小的色值位;(为什么要这样？？)答案：这样会大大减小文件的大小，同时又能比较好的保持图片的色彩；设置好后点OK输出文件，这里的文件包括了一个htm和images文件夹，如图： 　　这里候你的页面才算完成了一半，接下来在 Dreamweaver 里建立站点： 　　step3:定义站点： 　　在图示左边的site name中为站点起一个名字，如example 然后在下面的local root folder中选择我们刚才导出的站点所以的文件夹；站点建好后在site map中我们看到： 　　(为什么要建立站点？

一，基本概念 1，切图，是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。Fireworks也提供了切图技术，Flash则直接提供了网页格式输出技术（不需要切图）。 2，切片，是切图的直接结果，切图实际上就将图切分为一系列的切片 二，切图操作过程 1，切图工具图标的识别 2，切图基本操作 1）基本操作有两个：划分切片和编辑切片 划分切片，是使用切片工具，在原图上进行切分的操作。 编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等等 下面我们看一下这两个操作 2）基本操作 如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用鼠标进行拖动，也可以使用实现，另外如果想精确的细微移动，则可以使用实现 如果想将某个切片存为某个图片输出，可以使用“切片选择工具”选择某个切片，然后选择“文件”菜单，并选择“存储为Web所用格式(W)...”，然后在弹出的界面中... 3，切图技巧 1）一张图，可以有多种切分方式，如下： 既然存在n多种切图方式，那么是不是哪种方式都可以满足要求？ 答案：不是的。 一般对页面的要求是，当页面大小发生变化时，页面的各部分可以相对自由地伸缩，而不会使页面发生错乱或变形等问题。 我们切分好的图是要输出为Html格式的网页文件的，然后通过网页编辑器，将该页面进行加工，做成符合要求（例如可以根据内容多少，自由伸缩等

一，设置PS 使用PS进行切图前的设置： 1，打开PS----打开PSD图片----点击窗口-----分别把：历史记录，信息，图层，三个打勾。 历史记录：可以回到之前想要的步骤，特别是不小心把图层的文字或者图层删除了，进行恢复。 信息：可以获得框选部分的：rgb ，XY轴的起始位置，还有宽高。 图层：PSD图片，是通过很多图层叠加起来才变成视觉上为一个页面的效果。 2，设置自动选择图层：点击窗口----选项打勾----即显示顶部的选项，选项中的：自动选择：图层。自动选择打勾，并且把组改为图层。 　　此时随便点击PSD文件的任何一个地方，图层都会显示该图层。 3，设置标尺：点击是图----标尺打勾。 　　按键盘M(矩形框选工具) ，如果有该选取，那么标尺移动到该处时，会自动吸附。很好用 二，测量 Ctrl + 鼠标滚轮 缩放PSD文件 　空格键 + 鼠标左键 拖动PSD文件 M 矩形选区 V 拖动指定对象 　　方法一：比较简单，推荐使用： 　　1，打开PS ----打开PSD文件 　　2，按快捷键M 画矩形选区 ------- 选区左边 与 图层 左边对齐。 　　3，按住Shift ------ 画矩形选区 ------- 选区右边 与 图层 右边对齐。 　　4，查看信息，这时的 W 就是 两个矩形选区之间的宽度，指左边选区的左边 到 右边选区的右边 之间的宽度。 H 就是