<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 0;
margin: 0;
/*background: black;*/
}
div#a {
1105px;
height: 500px;
margin: 0 auto;
border: 0px solid;
}
/*#canvas{*/
/*background: white;*/
/*margin: 100px 0 0 300px;*/
/*}*/
</style>
</head>
<body>
<div id="a">
<canvas id="canvas" width="1105" height="500" style="border: solid 1px #000"></canvas>
</div>
<div id="down">
<center>
<button οnclick="restuya()">清除</button>
<button οnclick="saveTu()" id="btn">保存</button>
</center>
</div>
<img id="imgId" src="" alt="" width="300px" height="300px">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>
<script>
var img = document.getElementById('imgId');
document.getElementById("btn").disabled = true;
var canvas = document.getElementById('canvas');// 获取 canvas 对象
var ctx = canvas.getContext('2d');// 获取绘图环境
var last = null;
var filedata = null;// 文件对象
ctx.strokeStyle = "pink";
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,1105,500);
canvas.onmousedown = function () {// 鼠标按下
canvas.onmousemove = move;// 在鼠标按下后触发鼠标移动事件
document.getElementById("btn").disabled = false;
};
canvas.onmouseup = function () {// 鼠标抬起取消鼠标移动的事件
canvas.onmousemove = null;
last = null;
};
canvas.onmouseout = function () {// 鼠标移出画布时 移动事件也要取消。
canvas.onmousemove = null;
last = null;
};
function move(e) {// 鼠标移动函数
// console.log(e.offsetX);
if (last != null) {
ctx.beginPath();
ctx.moveTo(last[0], last[1]);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
// 第一次触发这个函数，只做一件事，把当前 鼠标的 x , y 的位置记录下来
// 做下一次 线段的 起始点。
last = [e.offsetX, e.offsetY];
}
// 重新在画
function restuya() {
document.getElementById("btn").disabled = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "pink";
ctx.fillStyle = '#FFF';
ctx.fillRect(0,0,1105,500);
drawImg(filedata);
}
// 绘制图片
function drawImg(filedata) {
var readFile = new FileReader();
readFile.readAsDataURL(filedata);
// 图片读取成功
readFile.onload = function () {
var Img = new Image();
Img.src = this.result;
Img.onload = function () {
// 根据 图片的 宽高 来 设置canvas 宽和高
canvas.width = Img.width;
canvas.height = Img.height;
ctx.drawImage(Img, 0, 0);
}
}
}
function saveTu() {
var saveImage = canvas.toDataURL('images/jpg'); // base64
// var b64 = saveImage.substring(22); // 二进制
fn(saveImage);
img.src = saveImage;
}
//上传图片
function fn(b64) {
function toBlob(urlData, fileType) {
var bytes = window.atob(urlData),
n = bytes.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bytes.charCodeAt(n);
}
return new Blob([u8arr], {type: fileType});
}
// 图像数据 (e.g. data:image/png;base64,iVBOR...yssDuN70DiAAAAABJRU5ErkJggg==)
var dataUrl = b64;
var base64 = dataUrl.split(',')[1];
var fileType = dataUrl.split(';')[0].split(':')[1];
// base64转blob
var blob = toBlob(base64, fileType);
// blob转arrayBuffer
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (event) {
// 配置
var client = new OSS.Wrapper({ // 这个地方配置上传阿里云的 参数配置
region: '', // oss-cn-bei1
accessKeyId: '', // LTAIsxEObGVQyWAj2
accessKeySecret: '', // 1U84lkUWtU1cmXe4jUsdUYuog3p1PB3
bucket: '', // zypartner-test4
root_dir: '' // clinicQualificationImg5
});
// 文件名
var date = new Date();
var time = '' + date.getFullYear();
var storeAs = 'Uploads/file/' + time + '/' + date.getTime() + '.' + blob.type.split('/')[1];
// arrayBuffer转Buffer
var buffer = new OSS.Buffer(event.target.result);
// 上传
client.put(storeAs, buffer).then(function (result) {
console.log(result);
console.log(result.url);
$.ajax({
url: "http://192.168.18.82:8080/zyExcel/test/test",
dataType: "json", //返回格式为json
async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: {pic: result.url},
type: 'post',
beforeSend: function () {
//请求前的处理
},
success: function (req) {
console.log(req);
//请求成功时处理
},
complete: function () {
//请求完成的处理
},
error: function () {
console.log("接口出错了");
//请求出错处理
}
});
/* e.g. result = {
name: "Uploads/file/20171125/1511601396119.png",
res: {status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …},
url: "http://bucket.oss-cn-shenzhen.aliyuncs.com/Uploads/file/20171125/1511601396119.png"
} */
}).catch(function (err) {
console.log(err);
});
}
}
</script>
</html>