項目地址: https://github.com/xiaosu95/canvas_mobile_drag
點擊查看demo(在移動端上查看)
該插件是一款脫離jq的移動端圖片編輯器??梢詰?yīng)用在移動端H5頁面或者微信小程序中。
開始使用
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)
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)
$('.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)
$('.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)
$('.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)于一個基于canvas的移動端圖片編輯器的實現(xiàn)的文章就介紹到這了,更多相關(guān)canvas 移動端圖片編輯器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
標(biāo)簽:西藏 棗莊 池州 漯河 新疆 青島 永州 遼源
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《一個基于canvas的移動端圖片編輯器的實現(xiàn)》,本文關(guān)鍵詞 一個,基于,canvas,的,移動,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。