canvas html 动态,canvas.html
.demo-wrapper {
width: 300px;
height: 300px;
position: absolute;
left: 300px;
top: 0;
display: inline-block
}
#chooseBox {
width: 150px;
height: 150px;
border: 1px solid #4fb8e3;
position: absolute;
left: 0;
top: 0;
z-index: 1000
}
.cut-pic {
position: absolute;
left: 400px;
top: 400px;
}
裁剪文件
后臺(tái)返回獲取裁剪后的文件
window.onload = function () {
var can = document.getElementById("myCan");
var btn = document.getElementById("btn");
var returnImg = document.getElementById("returnImg");
var ctx = can.getContext("2d");
$('#imgFile').change(function () {
var file = $('#imgFile')[0].files[0];
var reader = new FileReader();
reader.onload = function (e) {
$('#demoImg').attr('src', e.target.result);
};
reader.readAsDataURL(file);
});
$('#chooseBox').mousedown(function (e) {
var originX = e.offsetX;
var originY = e.offsetY;
let width = $("#demoImg").width() - 150;
window.onmousemove = function (e) {
$('#chooseBox').css({
position: 'absolute',
left: e.clientX - originX - 300 + 'px',
top: e.clientY - originY + 'px'
});
if ($('#chooseBox').position().left <= 0) {
$('#chooseBox').css({
left: 0
});
}
if ($('#chooseBox').position().left >= width) {
$('#chooseBox').css({
left: width + 'px'
});
}
if ($('#chooseBox').position().top <= 0) {
$('#chooseBox').css({
top: 0
});
}
if ($('#chooseBox').position().top >= width) {
$('#chooseBox').css({
top: width + 'px'
});
}
$('#chooseBox').mouseout(function () {
window.onmousemove = null;
return
})
};
window.onmouseup = function () {
window.onmousemove = null;
return
}
});
$('#cut').click(function () {
var newX = $('#chooseBox').position().left * 3.45;
var newY = $('#chooseBox').position().top * 2.6;
var img = document.getElementById("demoImg");
ctx.drawImage(img, newX, newY, 150 * 3.45, 150 * 2.6, 0, 0, 150, 150);
console.log(can.toDataURL('image/jpeg'));
});
// btn.onclick = function () {
// var data = can.toDataURL();
// data = data.split(',')[1];
// data = window.atob(data);
// var ia = new Uint8Array(data.length);
// for (var i = 0; i < data.length; i++) {
// ia[i] = data.charCodeAt(i);
// }
// var blob = new Blob([ia], { type: "image/png", endings: 'transparent' });
// var fd = new FormData();
// console.log(blob);
// fd.append('avatarFile', blob, 'image.png');
// var httprequest = new XMLHttpRequest();
// httprequest.open('POST', '/guest/avatar', true);
// httprequest.send(fd);
// httprequest.onreadystatechange = function () {
// if (httprequest.status == 200 && httprequest.readyState == 4) {
// console.log(httprequest.responseText);
// $('#returnImg').attr('src', '/images/' + JSON.parse(httprequest.responseText).json);
// }
// };
// };
}
一鍵復(fù)制
編輯
Web IDE
原始數(shù)據(jù)
按行查看
歷史
總結(jié)
以上是生活随笔為你收集整理的canvas html 动态,canvas.html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： html下拉菜单jq怎么设置,jquer
- 下一篇： 计算机房消防知识培训,通信机房消防知识培