圖片轉base64 及 旋轉 及 文件選擇框讀取圖片
<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>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.