1、界面樣式和生成結果:javascript
① 界面樣式java
② 生成結果canvas
2、所用技術:svg
easeljs + interact.js,easeljs是方便對canvas進行操做,interact.js主要是用來調整圖片的位置大小的。性能
3、程序流程圖:網站
4、核心步驟及代碼:this
① 上傳圖片設計
/*上傳圖片*/ document.getElementById('inputimg').onchange = function() { var fileObj = document.getElementById('inputimg').files[0]; if (document.getElementById('inputimg').files.length === 0) { return; } var oFile = document.getElementById('inputimg').files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); }; var imgthis; var oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; oFReader.onload = function(oFREvent) { stage.removeChild(imgthis); imgthis = new createjs.Bitmap(oFREvent.target.result); //document.getElementById('show').src=oFREvent.target.result; var image=new Image(); setTimeout(function(){ image.src=oFREvent.target.result; console.log('img width:'+image.width+' img height:'+image.height) var imgWidth=image.width; var imgHeight=image.height; var imgFaceWidth=imgWidth*elePos.w/100; var imgFaceHeight=imgHeight*elePos.h/100; var sizescale=448/imgFaceWidth/2; scale=sizescale; console.log('imgWidth:'+imgWidth+';elePos.w:'+elePos.w+';scale:'+sizescale); /*圖片初始位置*/ var fx=360/2; var fy=152/2; /*注:上傳圖片,放大縮小倍數須要除以2;設計稿中頭像左上角,距內容區左上角距離,依然也須要除以2(橫座標除以2,縱座標除以2)*/ console.log(fx,fy); elePos.s=sizescale; elePos.x=fx; elePos.y=fy; imgthis.scaleX =sizescale, imgthis.scaleY = sizescale, imgthis.rotation = elePos.a, imgthis.x = fx, imgthis.y = fy; stage.addChild(imgthis); stage.swapChildren(bg, imgthis); stage.update(); },200) };
調整圖片位置大小xml
/*上傳圖片的初始位置 放大倍數及旋轉角度*/ var elePos = { x: 80, y: 500, s: 1, a: 0, w:100, h:100 } var scale = 1, angle = 0, gestureArea = document.getElementById('gesture-area'); //手勢區域 var stageplay=1; /*調整圖片位置*/ interact(gestureArea).gesturable({ onstart: function(event) { }, onmove: function(event) { if (typeof imgthis == 'undefined') { return; } scale = scale * (1 + event.ds); angle += event.da; x = (parseFloat(elePos.x) || 0) + event.dx, y = (parseFloat(elePos.y) || 0) + event.dy; elePos.x = x; elePos.y = y; elePos.s = scale; elePos.a = angle; imgthis.scaleX = elePos.s, imgthis.scaleY = elePos.s, imgthis.rotation = elePos.a, imgthis.x = elePos.x, imgthis.y = elePos.y; stage.update(); }, onend: function(event) {} }).draggable({ onmove: dragMoveListener }); function dragMoveListener(event) { if (typeof imgthis == 'undefined') { return } x = (parseFloat(elePos.x) || 0) + event.dx, y = (parseFloat(elePos.y) || 0) + event.dy; s = (parseFloat(elePos.s) || 1), a = (parseFloat(elePos.a) || 0); imgthis.scaleX = elePos.s, imgthis.scaleY = elePos.s, imgthis.rotation = elePos.a, imgthis.x = elePos.x, imgthis.y = elePos.y; elePos.x = x; elePos.y = y; console.log('*************'+elePos.x) console.log('*************'+elePos.y) stage.update(); }
③ 輸入文字blog
<input type="text" id="inputwd" minlength="1" maxlength="6" placeholder="相框暱稱,六字之內">
④生成圖片(生成的圖片包括已有的背景+上傳調整後的照片+輸入的文字)
// 生成圖片 document.getElementById('upload').onclick = function() { var getCanvas = document.getElementById('demoCanvas'); var context=getCanvas.getContext('2d'); var inputwd = document.getElementById('inputwd').value; var inputimg = document.getElementById('inputimg').value; if(inputwd != '' && inputimg!=''){ context.font='24px 微軟雅黑'; context.textAlign='center'; context.textBaseline='middle'; context.fillStyle='#333'; context.fillText('我愛',158,18); context.fillText(inputwd,458,18); document.getElementById('content1').style.display='none'; document.getElementById('content2').style.display='block'; var imgDatadahe = getCanvas.toDataURL().replace("image/png", "image/octet-stream"); document.getElementById('show').src=imgDatadahe; console.log('imgDatadahe:'+imgDatadahe); }else{ alert('請上傳圖片,爲相框起個暱稱,例如:童話相框~~~'); } }
5、DEMO演示
6、注意事項:
① 運行終端必須支持Canvas
② 性能消耗過大。尤爲是在移動端,很容易形成崩潰。解決辦法:設定最大寬度,將圖片等比縮放,減小損耗。
其實實現方法還有不少種,好比用原生JS操做Canvas + HammerJS操做圖片,感興趣的小夥伴能夠多研究一下。
此文章主要發佈在本人所在公司網站H5案例分享(http://www.h5-share.com/)、公司公衆號H5握手和我的博客中,轉載請註明出處。