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


Posted in HTML / CSS onOctober 28, 2020

项目地址: https://github.com/xiaosu95/canvas_mobile_drag

点击查看demo(在移动端上查看)

该插件是一款脱离jq的移动端图片编辑器。可以应用在移动端H5页面或者微信小程序中。

  • 插件实现的功能为可页面内初始化载入图片、手动添加手机相册内的图片、或者添加服务器端的图片(服务器端需要开启允许图片跨域)。拥有多种的编辑模式。支持操作画布内的所有图片和单独设置某一种图片的状态或者位置等。
  • 插件操作模式支持手势放大、旋转;支持点击图片的四个角落拖拽放大或旋转或者。
  • 支持照片exif自动矫正。许多手机用不同方向拍照时会导致图片在canvas中显示角度不正常。常规解决方法是引入exif.js。不过该js大小太大。所以我在这里直接将exif获取角度的部分提取出来,大大精简了代码量。
  • 插件可输出你期望的分辨率图片,格式。

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

开始使用

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 移动端图片编辑器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
浅谈CSS3 动画卡顿解决方案
Jan 02 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
Jan 19 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 #HTML / CSS
HTML5实现移动端点击翻牌功能
Oct 23 #HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 #HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 #HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 #HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 #HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 #HTML / CSS
You might like
用PHP实现图象锐化代码
2007/06/14 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
微信小程序 Flex布局详解
2016/10/09 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
vue2.0 路由模式mode="history"的作用
2018/10/18 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
Pycharm中如何关掉python console
2020/10/27 Python
最新pycharm安装教程
2020/11/18 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
同事打架检讨书
2014/02/04 职场文书
C++程序员求职信
2014/05/07 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
推广普通话共筑中国梦演讲稿
2014/09/21 职场文书
大学军训的体会
2014/11/08 职场文书
2016年过年放假安排通知
2015/08/18 职场文书