首页 > 代码库 > 使用canvas进行图片裁剪简单功能
使用canvas进行图片裁剪简单功能
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(); }); };
使用canvas进行图片裁剪简单功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。