<canvas id="canvas" width="300" height="300"></canvas>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//创建img对象
var img=new Image();
img.src="./img/icon.jpg";
// 添加onload避免异步问题
img.onload = function () {
ctx.drawImage(img,0,0,200,200);
ctx.fillRect(10,10,10,10)
var dataURL = canvas.toDataURL();//转成base64
console.log(dataURL);
};
文件转base64
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="file">
<div class="base64"></div>
<script>
var file=document.getElementById("file");
file.onchange=function () {
//创建文件读取的实例
var reader=new FileReader();
//转码base64
reader.readAsDataURL(file.files[0]);
reader.onload=function(){
document.getElementsByClassName("base64")[0].innerHTML=this.result;
}
}
</script>
</body>
</html>
base64图片旋转
rotateBase64Img(src, deg , callback) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var imgW;//图片宽度
var imgH;//图片高度
var size;//canvas初始大小
if (deg% 90 != 0) { console.error("旋转角度必须是90的倍数!");
throw '旋转角度必须是90的倍数!';
}
(deg < 0) && (edg = (deg % 360) + 360) const quadrant = (deg / 90) % 4; //旋转象限 const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
var image = new Image();
image.crossOrigin = "anonymous"
image.src = src;
image.onload = function () {
imgW = image.width;
imgH = image.height;
size = imgW > imgH ? imgW : imgH;
canvas.width = size * 2;
canvas.height = size * 2;
switch (quadrant) {
case 0:
cutCoor.sx = size;
cutCoor.sy = size;
cutCoor.ex = size + imgW;
cutCoor.ey = size + imgH;
break;
case 1:
cutCoor.sx = size - imgH;
cutCoor.sy = size;
cutCoor.ex = size;
cutCoor.ey = size + imgW;
break;
case 2:
cutCoor.sx = size - imgW;
cutCoor.sy = size - imgH;
cutCoor.ex = size;
cutCoor.ey = size;
break;
case 3:
cutCoor.sx = size;
cutCoor.sy = size - imgW;
cutCoor.ex = size + imgH;
cutCoor.ey = size + imgW;
break;
}
ctx.translate(size, size);
ctx.rotate(deg * Math.PI / 180); //drawImage向画布上绘制图片
ctx.drawImage(image, 0, 0); //getImageData() 复制画布上指定矩形的像素数据
var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
if (quadrant % 2 == 0) {
canvas.width = imgW;
canvas.height = imgH;
} else {
canvas.width = imgH;
canvas.height = imgW;
}
//putImageData() 将图像数据放回画布
ctx.putImageData(imgData, 0, 0);
callback(canvas.toDataURL())
};
}
多文件上传
var data=new FormData();
//循环filelist
document.querySelector("input[type='file']").files.map(item=>{
data.append('Files',item.file)
})
