网页制作

一个基于canvas的移动端图片编辑器的实现
网页制作 2024/11/15 佚名
3 2

项目地址： 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,移动端,图片编辑器
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com