|    微信会话框

细心的前端们会发现如果你在微信里发一张和你当前背景一样的图片，那么微信的会给这张图片加边框，并且，右边的小三角是根据图片的位置截取的。很多前端会用backgroud或者clip-path来画，这样画出来的没法设置小边框。 所以需要我们“万能”的canvas！canvas！canvas！

示例图1

|    JS全部代码

我们分为两步：首先抠出圆角和会话角的边框，第二步根据需求压缩处理你的图片大小

需要的知识点：1：canvas画路径抠图；2：用图片填充你的抠出来的部分

最后效果是：在原图上抠出了你要的路径并且！还带边框哦！

总体流程：本机选择一张图 在页面上显示为我们想要的效果：

HTML：粘贴不过来很心塞。。。就截图吧

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.onerror = function () {

alert("文件不是一个正确的图片")

return;

}

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上传步骤

});

};

};

|   以下是效果图两张

效果图1

效果图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();

然后就抠出了自己想要的图形，然后用你的图片填充就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啦~~~有什么问题留言解决