前言:
公司一个售前问我能不能用H5做一个手机拍照,给相片添加相框和添加文字上传到服务器的功能,我当时一琢磨觉得可行,就利用空余时间做了一个demo,去掉了拍照和上传,如果以后有机会,会给补上,当然对于开发过webApp的朋友来做到这个很简单。下面来看代码
1,思路
首先我们需要准备素材,一个相框和一个相片,然后我们要思考,只是把他们和并且就可以了吗?答案是否定的,我还需要对照片进行编辑,比如平移和缩放等。还要可以切换相框。
2,如何合并相框和图片?
上面是我的界面,从界面可以看出,我有三张图片和两个相框,最右边是相框和图片合并之后的结果。看代码:
html:
<style> body,html,ul,li,h1,h5,a,p,span,div{ margin: 0px; padding: 0px; } ul,li{ list-style: none; } .wrap{ position: relative; margin:40px; width: 1000px; height: 400px; background-color: #fff; box-shadow: 0px 0px 1px 1px #eee; } .imgWrap, .photoWrap{ width: 100px; height: 380px; float: left; border: 1px solid #ccc; margin:10px 40px 10px 40px; text-align: center; } .imgWrap img{ width: 60px; height: 100px; } .photoWrap img{ width: 90px; height: 140px; } .photoWrap_canvas{ position: absolute; /*opacity: 0.4;*/ width: 300px; left: 365px; height: 400px; /*background-color: red;*/ } </style> <div class="wrap"> <div class="photoWrap_canvas" id="photoWrap_canvas" > </div> <canvas id="myCanvas" width="300" height="400" style="background-color:#ccc"></canvas> <div class="photoWrap" id="photoWrap"> <ul> <li><img src="img/xk1.png" alt=""></li> <li><img src="img/xk2.png" alt=""></li> </ul> </div> <div class="imgWrap"> <ul> <li><img src="img/mm1.jpg" alt=""></li> <li><img src="img/mm2.jpg" alt=""></li> <li><img src="img/mm3.jpg" alt=""></li> </ul> </div> <div> <input type="text" id="txtKey"> <button id="btnAddFont">输入</button> <button id="btnOk">完成</button> <button id="btnReset">还原</button> </div> </div>
js:
var _ = function(selector){return document.getElementById(selector);} var util = { isNull:function(str){return str == null || str.length == 0 } } var c = _("myCanvas"); var ctx = c.getContext("2d"); var ctxW = c.width, ctxH = c.height; var img = new Image(); img.src = "img/mm2.jpg"; var imgW,imgH; img.onload=function(){ imgW = 300 || img.width, imgH = 400 || img.height; onDraw(); ctx.save(); } function onDraw(){ ctx.drawImage(img,0,0,300,400); } // 切换相册 $(".photoWrap").delegate("ul li img","click",function(){ var src = $(this).attr("src"); $(".photoWrap_canvas").css("background","url("+src+") no-repeat").css("background-size","100% 100%").attr("data-url",src); })
看到上面的代码,很简单,
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 } }
上面代码做了如下动作:
1,首先给div.photoWrap_canvas监听鼠标事件,有些人可能会问了,为什么要给div注册事件呢?我们操作的可是 canvas啊,刚刚我们说过我们为了能达到随意的切换相框的效果就给canvas上面蒙一个层,这样的话,我们可能就没法直接给canvas添加事件,希望大家理解。
2,在鼠标刚开始点击的时候执行 start()方法,他记住鼠标在div内部起点的位置,并告诉浏览器我们可以滑动了(bStart = 1)。
3,在鼠标移动的时候会先判断 是否执行过 start(),如果有的话,计算移动位置和开始位置的偏移值,然后赋值给 translate()方法。图片就可移动了
4,结束移动的时候,可以设置bStart = 0,等待下次启动
4,如何消除移动痕迹?
以上讲述的能让我们的图片随之鼠标的移动而移动,不过在移动的过程中,我们会发现,移动方向的相反位置会留下,很多痕迹。
上面的图片可以看到,很多痕迹,就像电脑卡顿住了一样,,那如何去除呢?
我们想明白造成这样的原因是什么?随着我们的移动,图片的位置也在做相应的改变,注意,我们调用drawImage()的时候,我是画上去,就像画画一样,当然有痕迹,幸好,canvas对象也给我们提供了清除的方法 clearRect()--清除矩形,没错使用这个方法,我们就能清除痕迹了。
让我们重写onDraw()方法:
function onDraw(){ ctx.clearRect(- ctxW,-ctxH, 2 * ctxW, 2 * ctxH); ctx.drawImage(img,0,0,300,400); }
重写之后的效果:
但是,当我们想左移动的时候会发现,还是会有痕迹,怎么回事呢?
在已上代码是指,在图片右下角的相反方向,清除一个是当前canvas大小2的范围。(在这里需要大家注意一点,外面的那个框是 c 这个dome元素,而我们现在对canvas做的任何操作,都是有 c 这个元素生成的 ctx对象上,所以,图像移动,那么图片的右下角也移动,当然它本身还是图片的右下角)其实不难理解,canvas初始化的时候,ctxW和ctxH这个就作为画布的右下角,为什么要用负号呢,因为clearRect(x,y,width,height)这个方法的使用是以(x,y)为起点,向右清除一个矩形范围的,注意是向右,那我们肯定是不能向右的(再向右的话,就什么也没有了),当然向左也不行,那怎么办呢?
在这里呢,我也通过查找博文找到了方案,就是我们用图片的的中心点,当然我们canvas的原点,什么意思呢?让我们来修改下代码:
img.onload=function(){ imgW = 300 || img.width, imgH = 400 || img.height; // 把canvas的原点设置为图片的中心点,但是现实的时候,要还原,否则图片会已左上角钉在canvas的中心点上 ctx.translate(imgW /2,imgH/2); onDraw(); ctx.save(); }
以上代码,修改了图片刚加载完毕之后,我们做的操作,就是给canvas先平移下位置,平移的位置就是图片大小的中心点上,这就完成了图片中心点偏移。
偏移之后,我们页面刚开始的时候,不能就这么显示对吧?不然会被客户骂的,那我们要进行显示还原。
function onDraw(){ // 这是清除图片因为平移而造成的痕迹,-ctxw是图片平移的反方向的位置,2*ctxW,是清除的面积 ctx.clearRect(- ctxW,-ctxH, 2 * ctxW, 2 * ctxH); // -imgW/2 是为了让图片显示的回复正常,因为上面显示的时候做了旋转 ctx.drawImage(img,-imgW / 2, -imgH / 2,300,400); }
代码:drawImage()的时候,(x,y)的值,本来是(0,0)的,也就是canvas的左上角,但是,我们把原点偏移了,通过显示的时候把这个偏移量给补回来就好了,所有就是(-imgW/2,-imgH/2);
好了,写到这儿,我们这个功能算是完成了一半,我们实现了相框的切换和图片的平移,下面就是图的缩放和图片合并了。
5,图片缩放
// 注册鼠标滚轮事件,,暂时只做除去 firfox之外的浏览器 window.onmousewheel = document.onmousewheel = scrollFnc; var scale = 1; function scrollFnc(ev){ var delta = ev.wheelDelta; if(delta > 0 && scale <= 5){ //滚轮向上 scale += 0.1; }else if(delta < 0 && scale >= 1){ scale -= 0.2; } ctx.scale(scale,scale); onDraw(); }
注意,我们这边缩放是通过鼠标的滚轮来做的,当然了,如果使用手机来的话,那就需要手势的操作了,通过计算两个手指或则三个手指之间的距离来进行缩放操作,以后我会补上,现在先这么做吧。
代码很简单,获取鼠标在元素上滚轮的动作如果是负数就缩小,正数就放大,scale(w,h),放大缩小的函数。
6,图片和相框的合并
我们可以进行图片的缩放和平移了,那么下步就是把图片和相框进行合并,我刚才说了,为了能够随意的切换相框,那我就先用div的背景来做,并不是直接加入到canvas中,那样会很麻烦。
// 完成 var newxCtx; $("#btnOk").click(function(){ newCanvas = document.createElement(‘canvas‘); newCanvas.width = 300; newCanvas.height = 400; newxCtx = newCanvas.getContext("2d"); var img = new Image(); img.src = $(".photoWrap_canvas").attr("data-url"); img.onload=function(){ $(".photoWrap_canvas").hide(); // var x = (-ctxW / 2) - offsetX_ctx, // y = (-ctxH / 2) - offsetY_ctx; // console.log(offsetX_ctx,offsetY_ctx); newxCtx.drawImage(c,0,0); newxCtx.drawImage(img,0,0,300,400); //-ctxW /2, -ctxH / 2 $(".wrap").prepend(newCanvas); } })
其实大家看看到了,我是把相框和canvas(图片)再重新drawImage到一个新的canvas里面去的,那为什么这么做呢?直接把相框draw到原有的canvas不久行了吗?
我先给大家看下如果这么做的效果是什么:
可以明显的看出,相框随着图片的小而小,位置也发生了变化,当然了,位置我们可以给他设置偏移,但是大小却不一定,至少,我还没有找到方法,那我就是想到了一个办法,再创建一个canvas这个专门为相框而做的,然后把做好的相片在画到相框这个canvas里面就可以了。
7,写入文字
// 添加文字 $("#btnAddFont").click(function(){ var val = $("#txtKey").val(); if(val == null || val.length == 0) return; if(util.isNull(newxCtx)) return; newxCtx.font="40px Arial"; newxCtx.fillText(val,50,100); })
写入文字很简单,对不对,得到想要的之,使用 fillText()就可以了,,,
OK,到这,都写完了,希望对你有帮助.