JS怎么把图片分成一个个小块

JavaScript027

JS怎么把图片分成一个个小块,第1张

两个方法，没现成代码，自己想办法搞：

简单的：js判断鼠标在图片上时，产生一个div覆盖在图片上面，这个div给格子背景图

(兼容性好，但是格子尺寸固定，一张网页上多个不同尺寸图片上用，格子全一样大)

复杂的：js生成个html5的canvas画布，把图片放上去，再用js画些线条在上面

(无法顾及不支持html5的浏览器，但是格子尺寸你可以根据图片尺寸比例动态生成)

手机体验地址： http://114.67.68.76:8080/roc/imgDist/

github地址： https://github.com/lijibing01/picture_edit

1、引入dist文件夹下的ped.js

2、new window.PED.imageInfo(url,saveFn)

1、可以双指放大缩小图片

2、可以在图片上进行涂鸦

2、可以输入文字，输入文字后可以单指移动文字在图片上的位置

3、可以撤回涂鸦的内容，不能撤回文字，文字编辑功能还未实现

1、npm install

2、npm run build

欢迎star

这个东西很多的，给你一些资料，看看吧。

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/comment-page-12/

http://thinhunan.cnblogs.com/archive/2006/04/01/DeveloperNotesForPrototype.html prototype

http://space.flash8.net/space/?592455/action_viewspace_itemid_357808.html prototype 分析

http://www.resizeyourimage.com/

http://www.nwhite.net/MooCrop/ 推荐，比较简单，有详细解释和使用方法

http://zeroliu.blogdriver.com/zeroliu/1212817.html

http://bbs.phpchina.com/viewthread.php?tid=49867

http://www.google.cn/search?complete=1&hl=zh-CN&newwindow=1&q=javascript+%E8%A3%81%E5%89%AA%E5%9B%BE%E7%89%87&meta=&aq=f

http://bbs.blueidea.com/thread-2801917-1-1.html