一个基于canvas的移动端图片编辑器的实现
2020-11-23 04:07
1421 查看
项目地址: https://github.com/xiaosu95/canvas_mobile_drag
该插件是一款脱离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基于canvas实现一个简单的前端截图工具代码实例
- 基于 canvas 实现的一个截图小 demo
- 基于struts2的一个验证码的实现
- 写出一个你自己的MVC框架-基于对springMVC源码实现和理解(2):数据初始化(一)
- 本文实现了一个基于servlet技术的简单的csv文件导出的程序实例。
- 学习LSM(Linux security module)之四:一个基于LSM的简单沙箱的设计与实现
- 基于canvas实现图片压缩
- 使用canvas实现一个vue弹幕组件功能
- 基于canvas实现的钟摆效果完整实例
- PC端/移动端html2canvas实现截屏,对图片添加水印文字,最后实现图片导出
- 实现一个简单的基于asio的定时器
- 基于一个简单定长内存池的实现方法详解
- 一个基于socket的资源共享平台的实现(二)
- 网络编程学习笔记二(实现一个基于简单TCP的用户注册程序)
- 一个基于jQuery的移动端条件选择查询插件(原创)
- Javascript HTML5 Canvas实现的一个画板
- WebService—快速实现一个基于JAX-WS的WebService项目(一)
- [11] Windows PowerShell DSC学习系列---如何定制一个基于PowerShell脚本实现的DSC Resource
- [UWP]附加属性2:实现一个Canvas
- 57-005-3 bootstrap实现一个简单的项目案例--新闻操作(基于jsp无刷新异步操作)