canvas裁剪圖片,純前端

.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;

}

裁剪文件

后臺返回獲取裁剪后的文件

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);

// }

// };

// };

}

一鍵復制

編輯

Web IDE

原始數據

按行查看

歷史

總結

以上是生活随笔為你收集整理的canvas html 动态,canvas.html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。