一个基于canvas的移动端图片编辑器
欢迎使用 canvas_mobile_drag
项目地址:https://github.com/xiaosu95/canvas_mobile_drag
点击查看demo(在移动端上查看)
该插件是一款脱离jq的移动端图片编辑器。可以应用在移动端H5页面或者微信小程序中。
- 插件实现的功能为可页面内初始化载入图片、手动添加手机相册内的图片、或者添加服务器端的图片(服务器端需要开启允许图片跨域)。拥有多种的编辑模式。支持操作画布内的所有图片和单独设置某一种图片的状态或者位置等。
- 插件操作模式支持手势放大、旋转;支持点击图片的四个角落拖拽放大或旋转或者。
- 支持照片exif自动矫正。许多手机用不同方向拍照时会导致图片在canvas中显示角度不正常。常规解决方法是引入exif.js。不过该js大小太大。所以我在这里直接将exif获取角度的部分提取出来,大大精简了代码量。
- 插件可输出你期望的分辨率图片,格式。
开始使用
var canvasBox = document.querySelector('#picBox');
var canvas = new _Canvas({
box: canvasBox, // 容器
bgColor: '#000', // 背景色
bgPhoto: 'none', // 背景图
photoModel: 'adaption', // 载入图片模式(设置后添加图片时默认为当前设置模式)
model: 'Cascade' // 模式Cascade为添加的图片层级右添加顺序决定,autoHierarchy为层级由选中的图片为最高级
})
创建canvas为画布对象,调用初始化函数init(Object)
- dragEvent、zoomEvent、rotateEvent分别是拖拽、缩放、旋转三个事件监听,传递2个参数(picArr, target)picArr为画布内的所有图片对象数组,target为当前操作的图片对象。
- callback为'图片初始化完成的回调。
canvas.init({
dragEvent: function (picArr, target) { // 监听拖拽事件
console.log('当前操作事件:正在拖拽')
},
zoomEvent: function (picArr, target) { // 监听缩放事件
console.log('当前操作事件:正在缩放')
},
rotateEvent: function (picArr, target) { // 监听旋转事件
console.log('当前操作事件:正在旋转')
},
callback: function () {
console.log('图片初始化完成...')
}
});
- canvas画布的方法:
toDataURL(Object)
- width: 输出的宽 (必须);
- height: 输出的高 (必须);
- type: 输出图片格式;
- bgColor: 图片背景色(若设置了背景图则背景图的层级比背景色高);
- callback: 回调函数(传入参数为图片的baes64)若没有写callback则toDataURL会return图片的baes64;
$('.outputmodel2').click(function () {
canvas.toDataURL({
width: 750,
height: 600,
type: 'image/png',
callback: function (url) {
$('.outputPic').attr('src', url);
console.log('成功输出1倍png图')
}
})
})
addPhoto(Object)
- url: 图片url(必须);
- model: 载入图片模式默认为'covered'铺满(为数字时为固定宽度,adaption为自适应显示);
- enable: 是否禁止编辑(Boolean)默认为false;
- callback: 图片加载完的回调,参数为图片的对象;
$('.addEnablePic').click(function () {
canvas.addPhoto({
url: './img/pic6.jpg',
model: 200,
enable: true,
callback: function () {
console.log('成功添加一张禁止编辑的图片')
}
})
})
changeBg(Object)
- color: 背景色
- photo: 背景图(url)//为'none'时移除背景图
$('.bgColor').click(function () {
var color = '#' + parseInt(Math.random() * 10) + parseInt(Math.random() * 10) + parseInt(Math.random() * 10)
canvas.changeBg({
photo: url,
color: color
})
})
changeParams(Object)
- width: '画布宽度',
- height: '画布高度',
- model: '画布模式' (模式Cascade为添加的图片层级由添加顺序决定,autoHierarchy为层级由选中的图片为最高级)
getNowPhoto()
- return 当前操作的图片对象
clearCanvas()
- 清空画布
canvas画布的属性:
photos: 画布内所有图片对象
Photo对象方法(画布内图片对象)
init()
- 重置图片大小和位置
getPhotoInfo()
- 返回图片的位置信息{model、enable、x(相对画布的x)、y(相对画布的y)、rotate、scale、width(画布内图片的宽度)、height(画布内图片的高度)、actualWidth(图片实际宽度)、actualHeight(图片实际高度)}
changeInfo(Object)
- hierarchy: 层级(Number)
- img: 图片URL(String)
- rotate: 旋转角度(Number)
- scale: 放大倍数(Number)
- callback: 修改参数后的回调(Function)
$('.changeUrl').click(function () {
var nowPhoto = canvas.getNowPhoto();
if (!nowPhoto) {
alert('未选中任何图片');
return;
} else {
var nowPhotoInfo = nowPhoto.getPhotoInfo();
nowPhoto.changeInfo({
img: './img/pic7.jpg',
scale: nowPhotoInfo.scale / 1.1,
hierarchy: 1,
rotate: nowPhotoInfo.rotate + 90,
callback: function () {
console.log('成功修改')
}
})
}
})
_delete()
- 删除该图片
一个基于canvas的移动端图片编辑器的更多相关文章
- 准备开发一个基于canvas的图表库,记录一些东西(一)
开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...
- 一个基于jQuery的移动端条件选择查询插件(原创)
下载插件 目前给出的下载是混淆了后的代码 愿意一起探讨的可以找我要源码 使用方式: var ConditionsChoose = $("#Screening").Condition ...
- 基于SignalR的服务端和客户端通讯处理
SignalR是一个.NET Core/.NET Framework的实时通讯的框架,一般应用在ASP.NET上,当然也可以应用在Winform上实现服务端和客户端的消息通讯,本篇随笔主要基于Sign ...
- 基于canvas实现的高性能、跨平台的股票图表库--clchart
什么是 ClChart? ClChart是一个基于canvas创建的简单.高性能和跨平台的股票数据可视化开源项目.支持PC.webApp以及React Native和Weex等平台.在React Na ...
- 写一个基于TCP协议套接字,服务端实现接收客户端的连接并发
''' 写一个基于TCP协议套接字,服务端实现接收客户端的连接并发 ''' client import socket import time client = socket.socket() clie ...
- PhantomJS是一个基于WebKit的服务器端JavaScript API
PhantomJS是一个基于WebKit的服务器端JavaScript API,它基于 BSD开源协议发布.PhantomJS无需浏览器的支持即可实现对Web的支持,且原生支持各种Web标准,如DOM ...
- Canvas动画(PC端 移动端)
Canvas动画(PC端 移动端) 一,介绍与需求 1.1,介绍 canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API,它可以实现在网页中完成动态的2D与3 ...
- 为什么说基于TCP的移动端IM仍然需要心跳保活?
1.前言 很多人认为,TCP协议自身先天就有KeepAlive机制,为何基于它的通讯链接,仍然需要在应用层实现额外的心跳保活?本文将从移动端IM实践的角度告诉你,即使使用的是TCP协议,应用层的心跳保 ...
- CXF 入门:创建一个基于WS-Security标准的安全验证(CXF回调函数使用,)
http://jyao.iteye.com/blog/1346547 注意:以下客户端调用代码中获取服务端ws实例,都是通过CXF 入门: 远程接口调用方式实现 直入正题! 以下是服务端配置 ==== ...
随机推荐
- springcloud一些博文记录
自己搭建完整demo后看的一个系列博文https://my.oschina.net/u/3375733/following 现在看着这个系列的后期文章估计出差前不会看了 一个博主的系列的git地址和博 ...
- java之死锁
转载自 https://www.cnblogs.com/xiaoxi/p/8311034.html 一.死锁的定义 多线程以及多进程改善了系统资源的利用率并提高了系统 的处理能力.然而,并发执行也带来 ...
- @JsonCreator自定义反序列化函数-JSON框架Jackson精解第5篇
Jackson是Spring Boot(SpringBoot)默认的JSON数据处理框架,但是其并不依赖于任何的Spring 库.有的小伙伴以为Jackson只能在Spring框架内使用,其实不是的, ...
- Java源码赏析(五)再识 String 类
在 Java源码赏析(三)初识 String 类 中,我们已经大概理解了String的接口,接下来我们描述一下String的常用工具方法. /** * 为了精简的String结构,之前提到的方法省 ...
- 1.UiPath账密安全保存常见方法
今天在写流程的时候突然用到密码保存,看到同事不同项目中所用到的方法不同,就看了一下别的同学博客,总结的特别好,自己跟着实操了一遍,受益匪浅. RPA适合于登录不同的系统代替人工操作,而登录系统时难免要 ...
- 关于struts1与struts2
1.Action方面 Action是整个Struts框架的核心内容,Struts1.x与Struts2的Action模型很大的区别.Struts2是一个 pull-MVC架构 ,从开发者角度看,就是说 ...
- 从 ES6 高阶箭头函数理解函数柯里化
前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...
- Java基础——克隆
1.克隆 假设有一个对象object1,在某处又需要一个跟object1一样的实例object2,这两个对象是绝对独立的,不会因为某一个修改另一个随之改变,这样,我们不能直接将对象objec1t的引用 ...
- 【CF1425B】 Blue and Red of Our Faculty! 题解
原题链接 简要翻译: 有一个连通图,A和B同时从点1出发,沿不同的路径前进.原本,图上的每一条边都是灰色的.A将经过的边涂成红色,B将经过的边涂成蓝色的.每个回合每个人只能走灰色的边.当某个回合中不存 ...
- Python-变量-数字类型
数字 number 整形 int 浮点型 float bool True(=1) False(=0) int_num = 10 float_num = 10.1 bool_True = True bo ...