一个基于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画一个阴阳八卦图
Mar 09 HTML / CSS
CSS3 倾斜的网页图片库实例教程
Nov 14 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS去掉A标签(链接)虚线框的方法
Apr 01 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
CSS3对背景图片的裁剪及尺寸和位置的设定方法
Mar 07 HTML / CSS
HTML5移动开发图片压缩上传功能
Nov 09 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
HTML5实现锚点时请使用id取代name
Sep 06 HTML / CSS
HTML5+CSS3模仿优酷视频截图功能示例
Jan 05 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 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
function.inc.php超越php
2006/12/09 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
Yii配置文件用法详解
2014/12/04 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
分享自定义的几个PHP功能函数
2015/04/15 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
Add Formatted Text to a Word Document
2007/06/15 Javascript
IE与firefox之jquery用法区别
2008/10/03 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
Python Tkinter实例——模拟掷骰子
2020/10/24 Python
python之随机数函数的实现示例
2020/12/30 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
标准版离职证明书
2014/09/12 职场文书
中学图书馆工作总结
2015/08/11 职场文书
交通安全学习心得体会
2016/01/18 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
详解JS数组方法
2021/11/20 Javascript
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS