快过年了给大家拜个新年，祝大家新年快乐，苦逼的我还在上班。写这篇文章也是我正好前两天写过一个修改资料的页面，其中就有上传头像，这里和大家分享下。
Screenshot.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<title>图片截取</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,
html {
background-color: #000;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.canvas_img,
.canvas,
.canvas_div,
.canvas_btn,
.canvas_bg {
position: absolute;
}
.canvas_div,
.canvas_bg {
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.canvas_img {
z-index: 1;
}
.canvas_bg {
background-color: rgba(0, 0, 0, .6);
z-index: 2;
}
.canvas {
left: 0;
border: 1px solid #fff;
top: 30px;
z-index: 100;
}
.canvas_div {
z-index: 999;
}
.canvas_btn {
bottom: 0;
left: 0;
right: 0;
height: 60px;
background-color: #333;
z-index: 1000;
}
.canvas_btn a {
float: left;
color: #fff;
width: 60px;
height: 160px;
line-height: 60px;
text-decoration: none;
text-align: center;
}
.canvas_btn .canvas_ok {
float: right;
}
.canvas_save:active {
color: #fff;
}
</style>
</head>
<body>
<input type="hidden" name="img_base64" id="img_base64" value="" />
<!-- 前后端不分离的加hidden -->
<img id="canvas_img" src="2.jpg" class="canvas_img" />
<!-- 存放需要截取的img -->
<div class="canvas_bg"></div>
<canvas id="canvas" class="canvas"></canvas>
<div id="canvas_div" class="canvas_div"></div>
<div class="canvas_btn"><a href="javascript:void(0);" class="canvas_cancel" onclick="javascript:location.href = document.referrer;">取消</a><a href="javascript:void(0);" class="canvas_ok" onclick="save_img()">使用</a></div>
<!-- 本例只支持本地图片，跨域图片暂未处理 -->
<script>
//获取手机屏幕宽高
var c_w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var c_h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var can_obj = document.querySelector("#canvas");
var img_obj = document.querySelector("#canvas_img");
var div_obj = document.querySelector("#canvas_div");
var posX = 0,
posY = 0; //相对坐标
var scale = 0; //记录在缩放动作执行前的 缩放值
var start_X1 = 0,
start_Y1 = 0,
start_X2 = 0,
start_Y2 = 0;
var start_sqrt = 0; //开始缩放比例
var sqrt = 1;
var left_x = 0,
left_y = 0; //计算 偏移量 设置画布中的X，Y轴 (加偏移量)
function load() {
//设置canvas 宽度（全屏显示），高度,上下居中显示
can_obj.width = c_w - 40 - 2;
can_obj.height = c_w - 40 - 2;
//can_obj.style.marginTop = "50%";
//can_obj.style.top = "-80px";
can_obj.style.top = (((c_h - 60 - 2) / 2) - can_obj.height/2) + "px";//canvas 上下居中
can_obj.style.left = 20+'px';
//设置图片自适应大小及图片的居中显示
//以下部分需要当img.onload后再执行
autoResizeImage(c_w, c_h, img_obj);
img_obj.style.top = (((c_h - 60 - 2) / 2) - img_obj.height/2) + "px";
//img_obj.style.left = (c_w - img_obj.width) / 2 + "px";
document.querySelector("#canvas_div").addEventListener('touchstart', touch, false);
document.querySelector("#canvas_div").addEventListener('touchmove', touch, false);
//document.querySelector("#canvas_div").addEventListener('touchend', touch, false);
var ctx_img = can_obj.getContext("2d");
var ctx_X = (can_obj.width - img_obj.width) / 2,
ctx_Y = (can_obj.height - img_obj.height) / 2;
ctx_img.drawImage(img_obj, ctx_X-20, ctx_Y, img_obj.width, img_obj.height); //初始化 canvas 加入图片
function touch(event) {
var event = event || window.event;
event.preventDefault(); //阻止浏览器或body 其他冒泡事件
var mv_x1 = event.touches[0].clientX,
mv_y1 = event.touches[0].clientY; //手指坐标
var img_left = img_obj.left,
img_top = img_obj.top; //图片坐标
if (event.touches.length == 1) { //单指操作
if (event.type == "touchstart") { //开始移动
posX = mv_x1 - img_obj.offsetLeft; //获取img相对坐标
posY = mv_y1 - img_obj.offsetTop;
} else if (event.type == "touchmove") { //移动中
var _x = mv_x1 - posX; //移动坐标
var _y = mv_y1 - posY;
img_obj.style.left = _x + "px";
img_obj.style.top = _y + "px";
ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
ctx_img.drawImage(img_obj, -20 + _x + left_x / 2, _y - parseFloat(can_obj.style.top) + left_y / 2, img_obj.width * sqrt, img_obj.height * sqrt); //画布内图片移动
}
} else if (event.touches.length == 2) { //双指操作
if (event.type == "touchstart") {
scale = img_obj.style.Transform == undefined ? 1 : parseFloat(img_obj.style.Transform.replace(/[^0-9^\.]/g, "")); //获取在手指按下瞬间的放大缩小值（scale），作用，在移动时，记录上次移动的放大缩小值
start_X1 = event.touches[0].clientX; //记录开始的坐标值,作用：在下次放大缩小后，去掉上次放大或缩小的值
start_Y1 = event.touches[0].clientY;
start_X2 = event.touches[1].clientX;
start_Y2 = event.touches[1].clientY;
start_sqrt = Math.sqrt((start_X2 - start_X1) * (start_X2 - start_X1) + (start_Y2 - start_Y1) * (start_Y2 - start_Y1)) / 200; //获取在缩放时 当前缩放的值
} else if (event.type == "touchmove") {
var mv_x2 = event.touches[1].clientX,
mv_y2 = event.touches[1].clientY;
var move_sqrt = Math.sqrt((mv_x2 - mv_x1) * (mv_x2 - mv_x1) + (mv_y2 - mv_y1) * (mv_y2 - mv_y1)) / 200; //动态获取上一次缩放值(随时变更)，在下次缩放时减去上一次的值，作用：防止累加之前的缩放
sqrt = move_sqrt - start_sqrt + scale; //求出缩放值
img_obj.style.webkitTransform = "scale(" + sqrt + ")"; //设置放大缩小
img_obj.style.Transform = "scale(" + sqrt + ")";
ctx_img.clearRect(0, 0, can_obj.width, can_obj.height); //清除画布
var dImg_left = parseFloat(img_obj.style.left.replace("px", "")),
dImg_top = parseFloat(img_obj.style.top.replace("px", ""));
var w = img_obj.width,
h = img_obj.height,
sw = w * sqrt,
sh = h * sqrt;
left_x = w - sw; //计算 偏移量 设置画布中的X，Y轴 (加偏移量) 注：canvas 原点放大（canvas中图片左上角坐标），css3 scale 中点放大
left_y = h - sh;
ctx_img.drawImage(img_obj, -20 + dImg_left + left_x / 2, dImg_top - parseFloat(can_obj.style.top.replace("px", "")) + left_y / 2, sw, sh); //画布内图片重置
}
}
}
}
window.addEventListener('load', load, false);
function save_img() {
try {
console.log('截图开始');
console.log(can_obj);
var base64 = can_obj.toDataURL('image/jpeg', 1 || 0.8);
console.log('base64:');
console.log(base64);
// 此处获取img base64 可以交互传入后台
//document.querySelector("#img_base64").value = base64;
// $.ajax({
// url: 'url',
// type: 'POST',
// data: { 'base64': base64 },
// dataType: 'JSON',
// success: function (ret) {
// if (ret.errcode != 0) {
// console.log('保存头像失败,详情1：' + ret.errmsg);
// return false;
// }
// console.log('保存头像成功1');
// }
// });
} catch (e) {
console.log(e);
//TODO handle the exception
}
}
//图片自适应
function autoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
var ratio = 1;
var w = objImg.width;
var h = objImg.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (w < maxWidth && h < maxHeight) {
return;
}
if (maxWidth == 0 && maxHeight == 0) {
ratio = 1;
} else if (maxWidth == 0) {
if (hRatio < 1) {
ratio = hRatio;
}
} else if (maxHeight == 0) {
if (wRatio < 1) {
ratio = wRatio;
}
} else if (wRatio < 1 || hRatio < 1) {
ratio = (wRatio <= hRatio ? wRatio : hRatio);
} else {
ratio = (wRatio <= hRatio ? wRatio : hRatio) - Math.floor(wRatio <= hRatio ? wRatio : hRatio);
}
if (ratio < 1) {
if (ratio < 0.5 && w < maxWidth && h < maxHeight) {
ratio = 1 - ratio;
}
w = w * ratio;
h = h * ratio;
}
objImg.height = h;
objImg.width = w;
}
</script>
</body>
</html>
网友评论