js图片编辑器

JavaScript020

js图片编辑器,第1张

手机体验地址: 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

原理:

用JS在加载图片后判断图片是否突破规定的高和宽,如果超过再根据图片的宽高比例进行调整。

特别说明,JS代码只限制图片的高或者宽时,宽或者高会按照比例进行相应调整。

假如你需要把所有的图片显示在140*226的区间里面,那么就使用下面这样的代码:

<img src=2009/04/1232336585-19.jpg onload='if (this.width>140 || this.height>226) if (this.width/this.height>140/226) this.width=140else this.height=226'>