使用canvas进行图片裁剪简单功能

时间:2023-12-19 12:34:50

1.html部分

使用一个input[type="file"]进行图片上传;

canvas进行图片的裁剪展示

<div>
<input type="file" id="imgFile">
</div>
<div id="demoBox" style="width: 300px;height: 300px;position: absolute;left: 300px;top: 0;overflow:hidden;border: 1px solid #ccc">
<img id="demoImg" alt="">
<div style="width: 150px;height: 150px;border: 1px solid #4fb8e3;background:rgba(255,255,255,.5);position: absolute;left: 0;top: 0;z-index: 1000;cursor:move" id="chooseBox"></div>
</div>
<div style="position: absolute;left: 700px;top: 0">
<canvas id="myCan" width="150" height="150"></canvas>
<button id="cut">裁剪文件</button>
<button id="btn">后台返回获取裁剪后的文件</button>
<img id="returnImg" alt="">
</div>

2.js部分

a.使用file文件的files属性,获取上传图片的基本属性;

b. new FileReader() 对象,使用其属性e.target.result将图片地址转为base64,赋给img标签上;

c. 创建一个裁剪选区,用以选择需要裁剪的部位,同事使用mousedown,mousemove,mouseup事件进行选框的拖拽;

d. 使用canvas中的drawImage()方法进行图片的裁剪,展示到canvass画布上;

e.用户在使用裁剪时候,可多次裁剪,因此需要每次裁剪之后利用clearRect()方法,进行画布的清除

// 图片裁剪

    window.onload = function () {

        // 上传图片
var canvas = document.getElementById('myCan');
var imgFile = $('#imgFile');
var demoImg = $('#demoImg');
var ctx = canvas.getContext('2d');
imgFile.change(function () {
var file = imgFile[0].files[0];
console.log(file);
var reader = new FileReader();
reader.onload = function (e) {
console.log(e);
demoImg.attr('src', e.target.result);
};
reader.readAsDataURL(file);
}); // 位移选裁框
var dragDiv = $('#chooseBox');
dragDiv.mousedown(function (e) {
var oleft = $(this).position().left;
var otop = $(this).position().top;
var X = e.pageX - oleft;
var Y = e.pageY - otop;
$(document).mousemove(function (e) {
var left = e.pageX - X;
var top = e.pageY - Y;
if (left <= 0) {
left = 0;
}
else if (left >= ($('#demoBox').outerWidth(true) - dragDiv.outerWidth(true))) {
left = ($('#demoBox').outerWidth(true) - dragDiv.outerWidth(true));
} if (top <= 0) {
top = 0;
}
else if (top >= ($('#demoBox').outerHeight(true) - dragDiv.outerHeight(true))) {
top = ($('#demoBox').outerHeight(true) - dragDiv.outerHeight(true));
} dragDiv.css({
left: left,
top: top
}); });
});
$(document).mouseup(function () {
$(this).unbind('mousemove');
}); // 裁剪
function cut() {
var sx = dragDiv.position().left;
var sy = dragDiv.position().top;
var img = document.getElementById('demoImg');
ctx.drawImage(img, sx, sy, 150, 150, 0, 0, 150, 150);
} $('#cut').click(function () {
ctx.clearRect(0, 0, 150, 150);
cut();
}); };