JS：你先去试一试，然后来看讲解，毕竟要是用不了，岂不是很心塞。var inputele = document.getElementById('inputele');var reader = new FileReader(),img = new Image();var canvas = document.getElementById('canvasImg');var ctx = canvas.getContext('2d');reader.onload = function(e) {// 文件base64,可以看看结果img.src = e.target.result;};inputele.addEventListener('change', function (e) {var file = e.target.files[0];if(file.size>=10000000){window.alert("图片太大，请重新选择");return;}if(file.size<=0){window.alert("图片为0kb，请重新选择")return;}reader.readAsDataURL(file);});if(canvas.getContext){//获取对应的CanvasRenderingContext2D对象(画笔)var ctx = canvas.getContext("2d");var w1 = '';var h1 = '';CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {if (w < 2 * r) r = w / 2;if (h < 2 * r) r = h / 2;this.beginPath();this.moveTo(x+r, y);this.arcTo(x+w, y, x+w, y+h, r);ctx.lineTo(w, 13);ctx.lineTo(w1, 19);ctx.lineTo(w, 25);this.arcTo(x+w, y+h, x, y+h, r);this.arcTo(x, y+h, x, y, r);this.arcTo(x, y, x+w, y, r);this.closePath();this.clip();ctx.drawImage(img, 0, 0,w1,h1);ctx.restore();return this;}// base64地址图片加载完毕后img.onload = function () {var w = this.width, h = this.height;var width = w, height = h;var size = 400;//生成一个画布，对画布的大小根据图片的大小计算if (w >= h && w > size) { //宽 > 高width = size;height = size / w * h;} else if (w < h && h > size) {height = size;width = size / h * w;}//计算的画布的大小w1 = width; h1 = height;ctx.canvas.width = w1; ctx.canvas.height= h1;ctx.lineWidth = 1;ctx.strokeStyle = '#F00';//用红色比较明显啦ctx.roundRect(0,0,width-5,height-1,6).stroke();//画完之后的画布就是压缩完之后的图片 canvas ；//缩略图canvas转为二进制的数据用于上传canvas.toBlob(function (blob) {//这里填你的ajax上传步骤});};};
先来说画这个框框：来张优秀的步骤图对应每一步的代码：this.beginPath();第一步画上和上右圆角的线 ：this.moveTo(x+r, y);this.arcTo(x+w, y, x+w, y+h, r);第二步画右边的小三角：ctx.lineTo(w, 13);ctx.lineTo(w1, 19);ctx.lineTo(w, 25);第三步画右以及右下圆角的线：this.arcTo(x+w, y+h, x, y+h, r);第三步画下以及左下圆角的线：this.arcTo(x, y+h, x, y, r);第三步画左以及左上圆角的线：this.arcTo(x, y, x+w, y, r);画完了：this.closePath();抠图！：this.clip();
然后就抠出了自己想要的图形，然后用你的图片填充就ok啦。填充之前按照我们最爱的UI给的尺寸等比例放大缩小if (w >= h && w > size) { //宽 > 高width = size;height = size / w * h;} else if (w < h && h > size) {height = size;width = size / h * w;}填充就用我们的canvas的API drawImage ctx.drawImage(img, 0, 0,w1,h1);
;不论你的原图是多少像素，都会实现按照w1，h1的大小重绘，所以你右键下载一下对比之前原图的大小就会发现！！压缩了图片！！！所以顺便学习了压缩图片，很棒棒吧~~~
ok啦~~~有什么问题留言解决