一个基于canvas的移动端图片编辑器的实现

插件实现的成果为可页面内初始化载入图片、手动添加手机相册内的图片、可能添加处事器端的图片（处事器端必要开启应承图片跨域）。拥有多种的编辑模式。支持操纵画布内的全部图片和单独配置某一种图片的状态可能位置等。

插件操纵模式支持手势放大、旋转；支持点击图片的四个角落拖拽放大或旋转可能。

支持照片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('乐成修改') } }) } })

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!