如何實現(xiàn)一個基于canvas的移動端圖片編輯器

這篇文章給大家分享的是有關(guān)如何實現(xiàn)一個基于canvas的移動端圖片編輯器的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站建設(shè)、成都做網(wǎng)站與策劃設(shè)計,巴彥淖爾網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:巴彥淖爾等地區(qū)。巴彥淖爾做網(wǎng)站價格咨詢:13518219792

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

  • 插件實現(xiàn)的功能為可頁面內(nèi)初始化載入圖片、手動添加手機相冊內(nèi)的圖片、或者添加服務(wù)器端的圖片（服務(wù)器端需要開啟允許圖片跨域）。擁有多種的編輯模式。支持操作畫布內(nèi)的所有圖片和單獨設(shè)置某一種圖片的狀態(tài)或者位置等。

  • 插件操作模式支持手勢放大、旋轉(zhuǎn)；支持點擊圖片的四個角落拖拽放大或旋轉(zhuǎn)或者。

  • 支持照片exif自動矯正。許多手機用不同方向拍照時會導(dǎo)致圖片在canvas中顯示角度不正常。常規(guī)解決方法是引入exif.js。不過該js大小太大。所以我在這里直接將exif獲取角度的部分提取出來，大大精簡了代碼量。

  • 插件可輸出你期望的分辨率圖片，格式。

如何實現(xiàn)一個基于canvas的移動端圖片編輯器

開始使用

var canvasBox = document.querySelector('#picBox');
var canvas = new _Canvas({
  box: canvasBox,                  // 容器
  bgColor: '#000',                // 背景色
  bgPhoto: 'none',                // 背景圖
  photoModel: 'adaption',        // 載入圖片模式(設(shè)置后添加圖片時默認(rèn)為當(dāng)前設(shè)置模式)
  model: 'Cascade'                // 模式Cascade為添加的圖片層級右添加順序決定，autoHierarchy為層級由選中的圖片為最高級
})

創(chuàng)建canvas為畫布對象，調(diào)用初始化函數(shù)init(Object)

  • dragEvent、zoomEvent、rotateEvent分別是拖拽、縮放、旋轉(zhuǎn)三個事件監(jiān)聽，傳遞2個參數(shù)（picArr, target）picArr為畫布內(nèi)的所有圖片對象數(shù)組，target為當(dāng)前操作的圖片對象。

  • callback為'圖片初始化完成的回調(diào)。

canvas.init({
  dragEvent: function (picArr, target) {        // 監(jiān)聽拖拽事件
    console.log('當(dāng)前操作事件：正在拖拽')
  },
  zoomEvent: function (picArr, target) {        // 監(jiān)聽縮放事件
    console.log('當(dāng)前操作事件：正在縮放')
  },
  rotateEvent: function (picArr, target) {        // 監(jiān)聽旋轉(zhuǎn)事件
    console.log('當(dāng)前操作事件：正在旋轉(zhuǎn)')
  },
  callback: function () {
    console.log('圖片初始化完成...')
  }
});

canvas畫布的方法：

 toDataURL(Object)

  • width: 輸出的寬 (必須)；

  • height: 輸出的高 (必須)；

  • type: 輸出圖片格式；

  • bgColor: 圖片背景色（若設(shè)置了背景圖則背景圖的層級比背景色高）；

  • callback: 回調(diào)函數(shù)(傳入?yún)?shù)為圖片的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: 載入圖片模式默認(rèn)為'covered'鋪滿（為數(shù)字時為固定寬度，adaption為自適應(yīng)顯示）;

  • enable: 是否禁止編輯（Boolean）默認(rèn)為false；

  • callback: 圖片加載完的回調(diào)，參數(shù)為圖片的對象;

$('.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 當(dāng)前操作的圖片對象

 clearCanvas()

清空畫布

 canvas畫布的屬性：

photos：畫布內(nèi)所有圖片對象

Photo對象方法（畫布內(nèi)圖片對象）

 init()

重置圖片大小和位置

 getPhotoInfo()

返回圖片的位置信息{model、enable、x（相對畫布的x）、y（相對畫布的y）、rotate、scale、width（畫布內(nèi)圖片的寬度）、height（畫布內(nèi)圖片的高度）、actualWidth（圖片實際寬度）、actualHeight（圖片實際高度）}

 changeInfo(Object)

  •  hierarchy: 層級(Number)

  • img: 圖片URL(String)

  • rotate: 旋轉(zhuǎn)角度(Number)

  • scale: 放大倍數(shù)(Number)

  • callback: 修改參數(shù)后的回調(diào)(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()

刪除該圖片

感謝各位的閱讀！關(guān)于“如何實現(xiàn)一個基于canvas的移動端圖片編輯器”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)站標(biāo)題：如何實現(xiàn)一個基于canvas的移動端圖片編輯器
分享URL：http://muchs.cn/article0/ihesoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、虛擬主機、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司