<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>Document</title>
<style>
* {
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;
background-repeat: no-repeat;
background-size: 100%;
}
.photoWrap_canvas {
position: absolute;
left: 0px;
/*opacity: 0.4;*/
width: 300px;
height: 400px;
background-repeat: no-repeat;
background-size: 100% 100%;
/*background-color: red;*/
}
button {
width: 50px;
height: 30px;
line-height: 30px;
}
p {
margin-top: 20px;
}
.sourse {
overflow: hidden;
width: 400px;
float: left;
}
.album {
float: left;
position: relative;
}
</style>
</head>
<body>
<div class="wrap">
<div class="sourse">
<!-- 相框 -->
<div class="photoWrap" id="photoWrap">
<ul>
<li><img src="img/xc1.png" alt=""></li>
<li><img src="img/xc2.png" alt=""></li>
<li><img
src="http://uploaduat-10051630.image.myqcloud.com/introduce/2018-08/2c9082946522bfef000001650000000b_701.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>
<div class="album">
<div class="photoWrap_canvas" id="photoWrap_canvas"></div>
<!-- 画布 -->
<canvas id="myCanvas" width="300" height="400" style="background-color:#ccc"></canvas>
</div>
<div style="clear:left">
<p>1,点击相框和图片，点击“完成”可完成图片拼图</p>
<button id="btnOk">完成</button>
<p>2，在完成后的相片内可输入文字。注意生成后的相片还是canvas格式</p>
<input type="text" id="txtKey">
<button id="btnAddFont">输入</button>
</div>
<div class="result">
</div>
</div>
<script src="./img/zepto.js"></script>
<script>
var album = null;
(function () {
var util = {
getEl: function (selector) {
return document.getElementById(selector);
},
isNull: function (str) {
return str == null || str.length == 0
},
loadImg: function (imgurl, callback) {
var img = new Image();
img.src = imgurl || "img/mm2.jpg";
img.onload = function () {
callback && callback(img)
}
}
};
// 平移
(function () {
// 移动相册的动作
var hasTouch = 'ontouchstart' in window;
console.log(hasTouch);
var STA_EN = hasTouch ? "touchstart" : "mousedown",
MV_EV = hasTouch ? "touchmove":"mousemove",
END_EV = hasTouch ? "touchend" : "mouseup",
END_Cancel = hasTouch ? "touchcancel" : "mouseout";
var bStart = 0;
var bginX=0, bginY=0, startX = 0, startY = 0;
var offsetX_ctx = 0, offsetY_ctx = 0;
var starts = [];
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;
if (ev.touches.length >= 2) { //判断是否有两个点在屏幕上
starts = ev.touches; //得到第一组两个点
};
}
function move(ev) {
ev.preventDefault();
if (bStart === 0) return;
if (!hasTouch || ev.touches.length == 1) {
var poi = getEvtLocation(ev);
var offsetX = poi.x - bginX, offsetY = poi.y - bginY;
album.translate(offsetX, offsetY);
album.onDraw();
bginX = poi.x;
bginY = poi.y;
}else if (ev.touches.length == 2) {
var now = ev.touches;
var scale = (getDistance(now[0], now[1]) / getDistance(starts[0], starts[1]));
// 对缩放 比例 取整
scale = scale.toFixed(2);
//alert(scale)
if( scale < 1 ){
scale = 0.95;
} else {
scale = 1.05;
}
album.scale(scale);
album.onDraw();
}
}
function getDistance(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y));
};
function end(ev) {
// body...
ev.preventDefault();
bStart = 0;
}
function getEvtLocation(ev) {
if (util.isNull(ev)) return;
// var touch = ev.touches[0];
if(hasTouch){
return {
x: ev.pageX,
y: ev.pageY
}
}else {
return {
x: ev.offsetX,
y: ev.offsetY
}
}
}
util.getEl("photoWrap_canvas").addEventListener(STA_EN, start, false);
util.getEl("photoWrap_canvas").addEventListener(MV_EV, move, false);
util.getEl("photoWrap_canvas").addEventListener(END_EV, end, false);
util.getEl("photoWrap_canvas").addEventListener(END_Cancel, end, false);
})();
function ComposeAlbum() {
// this.ctx,
// this.ctxW, this.ctxH,
// this.imgH, this.imgW;
this._init();
}
ComposeAlbum.prototype = {
_init: function () {
var c = util.getEl("myCanvas");
var ctx = this.ctx = c.getContext("2d");
var ctxW = imgW = this.ctxW = this.imgW = c.width;
var ctxH = imgH = this.ctxH = this.imgH = c.height;
var self = this;
util.loadImg("img/mm1.jpg", function (imgObj) {
self.imgObj = imgObj;
// 把canvas的原点设置为图片的中心点，但是现实的时候，要还原，否则图片会已左上角钉在canvas的中心点上
ctx.translate(imgW / 2, imgH / 2);
// 清楚移动痕迹
ctx.clearRect(-ctxW, -ctxH, 2 * ctxW, 2 * ctxH);
// -imgW/2 是为了让图片显示的回复正常，因为上面显示的时候做了旋转
ctx.drawImage(imgObj, -imgW / 2, -imgH / 2, 300, 400);
ctx.save();
});
},
onDraw: function () {
var _this = this;
var ctxW = imgW = this.ctxW, ctxH = imgH = this.ctxH;
// 这是清除图片因为平移而造成的痕迹，-ctxw是图片平移的反方向的位置，2*ctxW，是清除的面积
try {
_this.ctx.clearRect(-ctxW, -ctxH, 2 * ctxW, 2 * ctxH);
// -imgW/2 是为了让图片显示的回复正常，因为上面显示的时候做了旋转
_this.ctx.drawImage(_this.imgObj, -imgW / 2, -imgH / 2, 300, 400);
}catch (e){
alert(e)
}
},
// 缩放
scale: function (scale) {
console.log(scale)
this.ctx.scale(scale, scale);
},
// 转换
translate: function (offsetX, offsetY) {
this.ctx.translate(offsetX, offsetY);
},
// 改变背景图片
changeImg: function (imgSrc) {
var self = this;
util.loadImg(imgSrc, function (imgObj) {
self.imgObj = imgObj;
// -imgW/2 是为了让图片显示的回复正常，因为上面显示的时候做了旋转
self.ctx.drawImage(imgObj, -self.imgW / 2, -self.imgH / 2, 300, 400);
self.ctx.save();
})
}
};
// 完成
var Make = (function () {
var newCanvas = document.createElement('canvas');
newCanvas.width = 300;
newCanvas.height = 400;
newxCtx = newCanvas.getContext("2d");
return {
over: function () {
var img = new Image();
img.src = $(".photoWrap_canvas").attr("data-url");
img.onload = function () {
// $(".photoWrap_canvas").hide();
newxCtx.drawImage(util.getEl("myCanvas"), 0, 0);
newxCtx.drawImage(img, 0, 0, 300, 400);
H5 canvas图片加相框 图片缩放扩大移动
需积分: 49 200 浏览量
2018-08-20
11:26:55
上传
评论 2
收藏 2.96MB RAR 举报
canvasphoto.rar （9个子文件） 
canvasphoto 
canvas_photo.html 10KB img 
zepto.js 77KB
xk1.jpg 22KB mm1.jpg 11KB
xk2.png 661KB xk1.png 674KB xc2.png 800KB xc1.png 797KB mm2.jpg 53KB资源评论
