您的位置：首页 > 其它

图片转base64 及旋转及文件选择框读取图片

2015-12-22 18:44 211 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>html5+canvas+js头像缩放裁剪，支持微信（不支持拍照）</title>

<style>*,html,body{padding:0px;margin:0px;}</style>

<script src="jquery-2.0.3.min.js" ></script>

<script src="layer.m.js"></script>

</head>

<body style="height:700px">

<input type="file" id="selectImageFile" accept="image/*" capture="camera" />

<div>

<button>旋转</button>

</div>

<canvas id="canvas"></canvas>

<script>

$(function(){

$('#selectImageFile').change(function(event){

var file = event.target.files[0];

if(!/image\/\w+/.test(file.type)){

alert("请确保文件为图像类型");

return false;

}

if(window.FileReader) {

var reader = new FileReader();

reader.onloadstart = function(e){

console.log("start")

}

reader.onloadend = function(e) {

var source_img = new Image();

source_img.src = e.target.result;

source_img.onload = function(){

var imgData=getBase64(source_img);

// var imgData=rotate(source_img,90);

$("body").append('<img id="test" width="100" height="100" src="'+imgData+'" />')

}

};

reader.readAsDataURL(file);

}

});

$("button").click(function(){

var $img=$("#test");

var data=$("#test").attr("src")

var newData=rotate($img[0],degree*90)

$("img").length?$("img").remove():"";

$("body").append('<img id="test" width="100" height="100" src="'+newData+'" />')

})

//参数可以是dom节点或者是new Image()对象

function rotate(img){

var canvas=document.createElement('canvas');

canvas.width=img.width;

canvas.height=img.height;

var con=canvas.getContext('2d');

con.mozImageSmoothingEnabled = true;

con.webkitImageSmoothingEnabled = true;

con.msImageSmoothingEnabled = true;

con.imageSmoothingEnabled = true;

//移动画笔位置到画布中心点

con.translate(canvas.width / 2, canvas.height / 2);

//旋转90度 PI=180

con.rotate(Math.PI / 2);

//画图的坐标点要跟着con平移后的位置默认为 0 ，0

con.drawImage(img,canvas.width / -2,canvas.height/-2,canvas.width,canvas.height);

// con.drawImage(img,0,0,canvas.width,canvas.height);

var base64=canvas.toDataURL('image/png',1);

return base64;

}

function getBase64(img){

var canvas=document.createElement('canvas');

canvas.width=img.width;

canvas.height=img.height;

var con=canvas.getContext('2d');

con.clearRect(0,0,canvas.width,canvas.height);

con.drawImage(img,0,0,canvas.width,canvas.height);

var base64=canvas.toDataURL('image/png',1);

return base64;

}

});

</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

图片转base64 及 旋转 及 文件选择框读取图片

图片转base64 及旋转及文件选择框读取图片