Skip to content

agulado/ImageMarkPen

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ImageMarkPen 1.1.4

基于canvas的图片标记插件

功能介绍

  1. jquery+canvas,编辑后可以返回编辑后的base64
  2. 引入hidpi-canvas-polyfill,实现canvas自动匹配window.devicePixelRatio
  3. 引入jquery-ui,解决ie+edge不支持resize样式的问题。jquery-ui是根据需要release的版本,同时只有ie+edge用。
  4. 弹层是基于LayerShow_2.5.4写的,包括后期的编辑都放在一起了。理论上是可以不依靠LayerShow的。时间关系,暂时先这样了,有时间再剥离
  5. 部分代码用到了es6,dist提供了es6和babel后的版本,同时为了兼容ie,要引用babel-polyfill(assets文件夹中有)
  6. demo中提供了amd版本和原生引用版本
  7. 后续会考虑扩展移动端兼容

npm

npm install image-mark-pen

文件说明

dist:

ImageMarkPen_es2015.js是源码
ImageMarkPen.js是babel过的。

dist/assets:

· widget/lib/canvas_hidpi.js: hidpi-canvas-polyfill
在ImageMarkPen.js(描述具体位置或行号时,均指ImageMarkPen_es2015.js,后同)最底部的amd封装中引用,
非amd规范请在视图中引用
· widget/lib/jquery-ui.min.js: jquery-ui
在ImageMarkPen.js最底部的amd封装中引用,非amd规范请在视图中引用
· inc/jquery-ui.min.css: jquery-ui
jquery-ui的样式表。
在ImageMarkPen.js的show()方法(line 33)中引用
· inc/jquery-ui-icons_444444_256x240.png:
jquery-ui的图标。
在inc/jquery-ui.min.css中搜索444444可以找到
· inc/polyfill.min.js: babel-polyfill
在视图中引用

使用

调用:

ImageMarkPen.show({
	debug: true, // debug模式。默认false
	Pics: '', // 图片路径。 无默认值
	DrawRecord: [], // 默认绘制记录,数组。无默认值。编辑成功后,会返回编辑的记录,此处传入可用于图片保存前的再次操作 或 图片不保存而是保存绘制记录到数据库
	z_index: 400, // 弹层的z-index。 图片层为z_index+1。 默认400
	bg_color: '#000000', // 背景层16进制颜色。 默认 #000000
	bg_opacity: 0.8, // 背景层透明度,0~1。默认0.8
	callback_before: null, // 弹层前执行,如显示loading,无默认
	callback_success: null, // 弹层后回调,如隐藏loading,无默认
	callback_button_cancal: null, // 点击关闭按钮后的回调,无默认。如需关闭弹层请调用close()
	callback_button_finish: null, // 点击完成按钮后的回调,无默认。function(base64,DrawRecord){ @base64: 图片base64; @DrawRecord: canvas绘制记录数组}。如需关闭弹层请调用close()
	callback_close: null // 关闭弹层后回调,无默认
});

关闭:

ImageMarkPen.close();

更新日志:

v1.1.4(2018-08-03)

* 修改√按钮:不再disable,随时可以点击完成修改。

v1.1.3(2018-07-07)

* 重新整理资源文件,之前polyfill使用有问题,不能用requireJS。

v1.1.2(2018-07-07)

* 把所有变量包入匿名函数中
* 增加参数debug,默认false

v1.1.1(2018-07-05)

* 整理资源文件,上线

v0.3.2(2018-07-05)

* 引入babel
* close()中重置style.width和height,解决window.devicePixelRatio==1时,style.width/height没有被重置的bug
* 解决button_char改为svg图片后,resetStyle被遗漏的bug
* 引入jquery-ui,用resizable方法解决ie全系不支持css.resize的问题(除ie外依旧使用原生css)
* 解决text被undo时y坐标自加的bug

v0.3.1(2018-07-04)

* 拖拽好了

v0.2.1(2018-07-04)

* 放大、缩小好了

v0.1.1(2018-07-03)

* 左侧"绘制栏"功能好了
* 右侧"编辑栏"功能好了
* 中间"查看栏"待做

About

图片的标记功能

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published