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

最新推荐文章于 2024-03-15 14:40:55 发布

转载最新推荐文章于 2024-03-15 14:40:55 发布 · 631 阅读

文章标签：

#javascript #base64 #图片 #canvas #2d

web 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用HTML5的Canvas和JavaScript实现头像的上传、显示及旋转功能。支持从文件中选择图片，并能将图片转换为Base64格式进行显示与旋转操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>