一个根据canva㊑s的手机端照片编写器的完成

日期:2021-01-21 类型:科技新闻 

关键词:如何织梦建站,如何创建网站,网站建立,公众号搭建,网站建站的

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

点一下查询demo(在手机端上查询)

该软件是一款摆脱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各自是拖动、放缩、转动三个恶性事件监视,传送两个主要参数(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 手机端照片编写器內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!

上一篇:AmazeUI 控■制面板的完成实例 返回下一篇:没有了