一個基於canvas的移動端圖片編輯器

歡迎使用 canvas_mobile_drag


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

點擊查看demo(在移動端上查看)

該插件是一款脫離jq的移動端圖片編輯器。可以應用在移動端H5頁面或者微信小程序中。

  • 插件實現的功能爲可頁面內初始化載入圖片、手動添加手機相冊內的圖片、或者添加服務器端的圖片(服務器端需要開啓允許圖片跨域)。擁有多種的編輯模式。支持操作畫布內的所有圖片和單獨設置某一種圖片的狀態或者位置等。
  • 插件操作模式支持手勢放大、旋轉;支持點擊圖片的四個角落拖拽放大或旋轉或者。
  • 支持照片exif自動矯正。許多手機用不同方向拍照時會導致圖片在canvas中顯示角度不正常。常規解決方法是引入exif.js。不過該js大小太大。所以我在這裏直接將exif獲取角度的部分提取出來,大大精簡了代碼量。
  • 插件可輸出你期望的分辨率圖片,格式。

圖1

開始使用

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()

  • 刪除該圖片
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章