一个基于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提交意见输入框样式代码
Oct 30 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
HTML5 Convas APIs方法详解
Apr 24 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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中HTML标签过滤技巧
2014/01/07 PHP
ThinkPHP路由详解
2015/07/27 PHP
四个PHP非常实用的功能
2015/09/29 PHP
广告切换效果(缓动切换)
2009/05/27 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
Egret引擎开发指南之发布项目
2014/09/03 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
JavaScript Date 知识浅析
2017/01/29 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
angular组件间通讯的实现方法示例
2020/05/07 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
Django卸载之后重新安装的方法
2017/03/15 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python字典key不能是可以是啥类型
2020/08/04 Python
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
什么是View State?
2013/01/27 面试题
建筑工地宣传标语
2014/06/18 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
话题作文之诚信
2019/11/28 职场文书
服务器间如何实现文件共享
2022/05/20 Servers
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技