HTML5实现图片上传2
2017-10-30 本文已影响0人
羊烊羴
<!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">
<style>
#canvas {
background-color: skyblue;
}
</style>
<title>Document</title>
</head>
<body>
<input type="file" value="file" multiple id="imgFile">
<img src="" alt="">
<canvas width="600" height="600" id="canvas"></canvas>
</body>
</html>
<script src="./jquery.js"></script>
<script>
/*
* canvas.getContext('2d')
* 返回一个用于在canvas画布上绘图的环境对象
* 当前唯一的合法值是2d，指定二维绘图并返回一个环境对象(canvas目前不支持3d绘图)
* 该对象导出一个二维绘图的API
* */
var ctx = document.querySelector("#canvas").getContext('2d')
var url = "";
$('input[type=file]').change(function () {
console.log(this.files)
var file = this.files[0];
var reader = new FileReader();
// 读取图片转化为base64格式输出
reader.readAsDataURL(file);
reader.onload = function () {
url = reader.result;
/*
注意在使用canvas时不要使用JQuery，$对象上没有canvas的方法
使用$获取元素然后传入canvas方法中会报错
var imgObj=document.querySelector("img")
ctx.drawImage(imgObj, 0, 0, 90, 90)
* */
var img = new Image();
// 在某些浏览器中如果图片没有加载完成，使用drawImage会报错
// 所以我们最好确保图片加载完成再使用该方法，所以使用onload
img.onload = function () {
/**
* ctx.drawImage()
* ctx.drawImage(image, dx, dy, dWidth, dHeight);
* 传入4个参数
* image 图像对象，表示要绘制到画布中的对象
* dx 目标对象在画布上距离x轴的位置
* dy 目标对象在画布上距离y轴的位置
* dWidth 在画布上绘制的目标对象的宽度，如果不设置，在绘制图片时宽度不会改变
* dHeight 在画布上绘制的目标对象的高度，如果不设置，在绘制图片时高度不会改变
* 以上4个是我们将图片绘制到画布时的基本参数，后两个是可选参数
* 接下来我们来看一下如何canvas对图像进行裁剪
* ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
* dx, dy, dWidth, dHeight这4个参数作用不变
*
* sx sy 用来指定我们要裁剪图片的那部分的起始位置
* sWidth sHeight 用来指定我们要裁剪图片从起始位置开始的宽度和高度
* 图片被裁剪完成后会放入到我们通过dx, dy, dWidth, dHeight设置的画布中
* 可以想象成从原图中取出一个矩形区域然后放到画布上的目标区域中
* 如果觉的canvas的理解方式不好理解，我们可以将其抽象为我们常见的div+backgroundImg
* 将canvas整体理解为body
* 在设置8个参数的情况下
* dx, dy, dWidth, dHeight用来设置div大小，位置
* sx, sy, sWidth, sHeight用来设置背景图片和div的关系
* 具体可以使用这段代码配合下面的图片来使用
*/
ctx.drawImage(img, 332, 660, 280, 422, 0, 0, 280, 422)
// - - 随手按MDN上画了个折线
ctx.beginPath()
ctx.moveTo(30, 96)
ctx.lineTo(70, 66)
ctx.lineTo(103, 76)
ctx.lineTo(170, 15);
ctx.stroke();
}
img.src = url
};
});
/*
* 我们要获取canvas中的信息，用toDataURL就可以转换成DataURL，然后可以取出其中的base64信息
* base64的格式为data:image/png;base64,*******
* 逗号之前都是一些说明性的文字
* 如果我们只需要之后的文字
* data=data.split(",")[1]
* 接下来将图片上传到服务器即可
* */
var data=document.querySelector("#canvas").toDataURL();
/*
* 虽然这里没有用到，但是还是说一下
* 在HTML5中，新增加了两个用来判断图片宽度和高度的属性
* naturalWidth，naturalHeight
* 这两个属性会返回图片的真实的宽度和高度
* 也就是说我们获取到的是图片原始的宽度和高度，而不是我们在引入页面后设置的高度
* 之前我们使用.width和.height获得的都是设置之后的宽高
* */
</script>
21643957_1370325500325.jpg
