Web端本地用canvas裁剪图片相关问题
借用的是Jcrop插件(依托jquery)来获得要裁剪图片的左上角坐标,高,宽,再用canvas重绘之后通过append添加到dom的方法。
1,在body里设置一张图片
<img class="my" id="element_id" src="./view.jpg">
2,设置要获得坐标的隐藏域input
<input type='hidden' id='x' name='x'/>//左上角x <input type='hidden' id='x2' name='x2'/>//右下角x <input type='hidden' id='y' name='y'/>左上角y <input type='hidden' id='y2' name='y2'/>//右下角y <input type='hidden' id='w' name='w'/>宽 <input type='hidden' id='h' name='h'/>高
备注:用canvas画的话可以省略右下角的坐标,也就是右下角x右下角y这两个参数。
3,引入jquery,Jcrop插件
<script src="./jquery.min.js"></script> <script src="./jquery.Jcrop.js"></script>
4,调用Jcrop执行函数
$('#element_id').Jcrop({ allowSelect: true, //允许新选框 allowMove: true, //允许选框移动 allowResize: true, //允许选框缩放 aspectRatio: 16 / 9,//图片的宽高比 setSelect: [0, 0, 100, 100],//起始的坐标和高宽 onSelect: drawHandleImg,//要执行的函数 });
备注:element_id为对应的图片dom元素的id。
//执行函数 function drawHandleImg(coords) { console.log(coords.w) var url = "./view.jpg";//这是站内的一张图片资源,采用的相对路径 var img = new Image(); img.src = url; var canvas = $('<canvas width="' + coords.w + '" height="' + coords.h + '"></canvas>')[0]; var ctx = canvas.getContext('2d'); ctx.drawImage(img, coords.x, coords.y, coords.w, coords.h, 0, 0, coords.w, coords.h);//重绘 $(document.body).append(canvas);//添加到文档中可以查看效果 }
以上代码只能实现在本地浏览器内显示要裁剪后的图片的样子,那么如何读取文件之后再裁剪呢,因为JavaScript不能直接操作文件,因此需要通过input的File API来处理,代码如下:
$('input[type=file]').change(function(){ var file=this.files[0]; var reader=new FileReader(); reader.onload=function(){ // 通过 reader.result 来访问生成的 DataURL var url=reader.result; console.log(url) }; reader.readAsDataURL(file); });
备注:生成的url地址的格式是base64的。
这时候再通过canvas裁剪重绘图片。我们要获取 canvas 中图片的信息,因为用canvas重新绘制的图片是img,要重新转换成base64格式的,这时候要通过canvas的API, toDataURL 转换成base64 , 然后取出信息,再用 window.atob 转换成由二进制字符串,因为是字符串的关系,直接给 Blob的话还是会出错。所以又要用 Uint8Array 转换一下。
var data=canvas.toDataURL(); data=data.split(',')[1]; data=window.atob(data); var uaArray= new Uint8Array(data.length); for (var i = 0; i < data.length; i++) { uaArray [i] = data.charCodeAt(i);//返回指定位置的字符的 Unicode 编码 }; // canvas.toDataURL 返回的默认格式就是 image/png var blob=new Blob([uaArray], {type:"image/png"});
这时候将blob数据发送至后台,后台可以将Blob格式的数据转换成image保存就可以了。
后记:生成base64格式的还有一种方法是通过canvas的API,toDataURL来实现,代码如下:
//实现将项目的图片转化成base64 function convertImgToBase64(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); var img = new Image; img.src = url; img.crossOrigin = 'Anonymous'; img.onload = function () { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); canvas = null; };