利用canvas制作图片（可缩放和平移）+相框+文字_H5之家

> WEB开发 > JavaScript > 正文

编程大巴

利用canvas制作图片（可缩放和平移）+相框+文字

作者：发布日期：2015-01-20 20:22:10

Tag标签：相框文字图片

前言：

　　公司一个售前问我能不能用H5做一个手机拍照，给相片添加相框和添加文字上传到服务器的功能，我当时一琢磨觉得可行，就利用空余时间做了一个demo，去掉了拍照和上传，如果以后有机会，会给补上，当然对于开发过webApp的朋友来做到这个很简单。下面来看代码

1，思路

　首先我们需要准备素材，一个相框和一个相片，然后我们要思考，只是把他们和并且就可以了吗？答案是否定的，我还需要对照片进行编辑，比如平移和缩放等。还要可以切换相框。

2，如何合并相框和图片？

上面是我的界面，从界面可以看出，我有三张图片和两个相框，最右边是相框和图片合并之后的结果。看代码：

html:

js:

看到上面的代码，很简单，

　　1，获取一个canvas标签，然后利用getContext('2d')获取到一个画布对象；

　　2，创建一个image对象，给它添加src属性

　　3，图片加载完毕使用 drawImage()把img对象画到canvas里面，

　　4，再给div.photoWrap的div添加背景图片，（通过给canvas添加一个透明的蒙层可以做一个切换相框的效果）

3，如何平移图片？

以上效果，通过移动鼠标来设置图片的位置。看代码：

　　　　　　// 移动相册的动作 var hasTouch = 'ontouchstart' in window; // console.log(window); var STA_EN = hasTouch ? 'touchstart' : 'mousedown', MV_EV = hasTouch ? 'touchmove':'mousemove', END_EV = hasTouch ? 'touchend' : 'mouseup', END_Cancel = hasTouch ? 'touchcancel' : 'mouseout'; _('photoWrap_canvas').addEventListener(STA_EN,start,false); _('photoWrap_canvas').addEventListener(MV_EV,move,false); _('photoWrap_canvas').addEventListener(END_EV,end,false); _('photoWrap_canvas').addEventListener(END_EV,end,false); var bStart = 0; var bginX,bginY,startX = 0,startY = 0; var offsetX_ctx = 0,offsetY_ctx = 0; function start(ev){ // console.log('32') ev.preventDefault(); bStart = 1; var poi = getEvtLocation(ev); // console.log(poi.x,poi.y); bginX = poi.x; bginY = poi.y; } function move(ev){ ev.preventDefault(); if(bStart === 0)return; var poi = getEvtLocation(ev); var offsetX = poi.x - bginX, offsetY = poi.y - bginY; ctx.translate(offsetX,offsetY); onDraw(); bginX = poi.x; bginY = poi.y; } function end (ev) { // body... ev.preventDefault(); bStart = 0; } function getEvtLocation(ev){ if(util.isNull(ev)) return; // var touch = ev.touches[0]; return{ x : ev.offsetX, y : ev.offsetY } }

上面代码做了如下动作：