前言:

  公司一个售前问我能不能用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,到这,都写完了,希望对你有帮助.

利用canvas制作图片(可缩放和平移)+相框+文字的更多相关文章

  1. 利用canvas压缩图片

    现在手机拍的照片动不动就是几M,当用户上传手机里的照片时一个消耗流量大,一个上传时间长,为了解决这个问题,就需要压缩图片: 想法:利用canvas重绘图片,保持宽高比不变,具体宽高根本具体情况而定. ...

  2. 利用canvas制作乱跑的小球

    canvas制作乱跑的小球 说明:将下面的代码放到html的body就可以,键盘控制上(W)下(S)左(A)右(D) <body> <canvas id="canvas&q ...

  3. 利用canvas 导出图片

    1.使用canvas绘制图片,并将图片导出. 在本地直接访问静态网页时,无法使用toDataURL(),需要将网页发布后,canvas才能使用toDataURL获取画布上的内容.因为canvas不允许 ...

  4. Js利用Canvas实现图片压缩

    最近做的APP项目涉及到手机拍照上传图片,因为手机拍照的图片通常都比较大,所以上传的时候就会很慢.为此,需要对图片进行压缩处理来优化上传功能.以下是具体实现: /* * 图片压缩 * img 原始图片 ...

  5. 利用canvas添加图片水印--直接上代码

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 利用canvas制作简单的logo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. 利用scrollTop 制作图片无缝滚动

    <!doctype html><title>javascript无缝滚动 by 司徒正美</title><meta charset="utf-8&q ...

  8. flash8中利用遮罩制作图片切换效果

    http://www.56.com/w73/play_album-aid-8642763_vid-NDY5ODU2Mzg.html

  9. 利用canvas对上传图片进行上传前压缩

    利用谷歌调式工具发现,图片大小直接影响着首屏加载时间. 且考虑到后期服务端压力,图片压缩特别必要. 本文是前端利用canvas实现图片.参考文章:https://www.cnblogs.com/007 ...

随机推荐

  1. django admin的自定制

    from django.contrib import admin # Register your models here. from .models import * from django.util ...

  2. Linux下查看yun rpm dpkg 软件是否安装成功的方法

    因为Linux安装软件的方式比较多,所以没有一个通用的办法能查到某些软件是否安装了. 总结起来就是这样几类: 一.rpm包安装的,可以用rpm -qa看到,如果要查找某软件包是否安装,用 rpm -q ...

  3. SFML从入门到放弃(1) 窗口和交互

    SFML从入门到放弃(1) 窗口和交互 创建一个新窗口: sf::RenderWindow window(sf::VideoMode(,),"new window"); 但是光创建 ...

  4. (转)windows下VMware-workstation中安装CentOS

    windows下VMware-workstation中安装CentOS   windows下VMware-workstation中安装CentOS,可以分两部分,安装虚拟机和安装CentOS虚拟机.具 ...

  5. 2018年10月19 手记 - 身为开发者的我de窘境

    从10月1国庆过完节回来,那已经是7号了,之后便开始紧锣密鼓的筹划着接下来11月份的公司组织的对外活动,这边新来的产品对产品或者说对任务很是负责,并且策划了很多的方案,并且乐意站在我们开发的角度上去考 ...

  6. px,em, rem的区别,在项目中怎么使用rem.

    一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...

  7. HTML 标记大全参考手册

    1.文件结构 文件类型 <HTML></HTML> (放在文档的开头与结尾) 文件主题 <TITLE></TITLE> (必须放在「文头」区块内) 文头 ...

  8. linux 系统管理(二) 磁盘分区

    LINUX下分区命令Parted详解 通常划分分区工具我们用的比较多是fdisk命令,但是现在由于磁盘越来越廉价,而且磁盘空间越来越大. 而fdisk工具他对分区是有大小限制的,它只能划分小于2T的磁 ...

  9. 转 OGG 部署阶段常见问题

    序号 问题 解决方案1 "2019-04-13 20:23:55 ERROR OGG-00868 Oracle GoldenGate Capture for Oracle, e_db1.pr ...

  10. css :before 内容左边 分割线(四)

    商品 左边分割线,使用css伪类实现,before or  after <style> *{ margin:; padding:; } .clearfix { *zoom:; } .cle ...