| ? ?微信會(huì)話框
細(xì)心的前端們會(huì)發(fā)現(xiàn)如果你在微信里發(fā)一張和你當(dāng)前背景一樣的圖片，那么微信的會(huì)給這張圖片加邊框，并且，右邊的小三角是根據(jù)圖片的位置截取的。很多前端會(huì)用backgroud或者clip-path來(lái)畫(huà)，這樣畫(huà)出來(lái)的沒(méi)法設(shè)置小邊框。 所以需要我們“萬(wàn)能”的canvas！canvas！canvas！
| ? ?JS全部代碼
我們分為兩步：首先摳出圓角和會(huì)話角的邊框，第二步根據(jù)需求壓縮處理你的圖片大小
需要的知識(shí)點(diǎn)：1：canvas畫(huà)路徑摳圖；2：用圖片填充你的摳出來(lái)的部分
最后效果是：在原圖上摳出了你要的路徑并且！還帶邊框哦！
總體流程：本機(jī)選擇一張圖 在頁(yè)面上顯示為我們想要的效果：
HTML：粘貼不過(guò)來(lái)很心塞。。。就截圖吧
JS：
你先去試一試，然后來(lái)看講解，畢竟要是用不了，豈不是很心塞。
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,可以看看結(jié)果
img.src = e.target.result;
};
inputele.addEventListener('change', function (e) {
var file = e.target.files[0];
if(file.size>=10000000){
window.alert("圖片太大，請(qǐng)重新選擇");
return;
}
if(file.size<=0){
window.alert("圖片為0kb，請(qǐng)重新選擇")
return;
}
reader.readAsDataURL(file);
});
if(canvas.getContext){
//獲取對(duì)應(yīng)的CanvasRenderingContext2D對(duì)象(畫(huà)筆)
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("文件不是一個(gè)正確的圖片")
return;
}
img.onload = function () {
var w = this.width, h = this.height;
var width = w, height = h;
var size = 400;
//生成一個(gè)畫(huà)布，對(duì)畫(huà)布的大小根據(jù)圖片的大小計(jì)算
if (w >= h && w > size) { //寬 > 高
width = size;
height = size / w * h;
} else if (w < h && h > size) {
height = size;
width = size / h * w;
}
//計(jì)算的畫(huà)布的大小
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();
//畫(huà)完之后的畫(huà)布就是壓縮完之后的圖片 canvas ；
//縮略圖canvas轉(zhuǎn)為二進(jìn)制的數(shù)據(jù)用于上傳
canvas.toBlob(function (blob) {
//這里填你的ajax上傳步驟
});
};
};
| ? ?以下是效果圖兩張
| ? ?步驟詳解
先來(lái)說(shuō)畫(huà)這個(gè)框框：來(lái)張優(yōu)秀的步驟圖對(duì)應(yīng)每一步的代碼：
this.beginPath();
第一步畫(huà)上和上右圓角的線? ：this.moveTo(x+r, y);this.arcTo(x+w, y, x+w, y+h, r);
第二步畫(huà)右邊的小三角：ctx.lineTo(w, 13);ctx.lineTo(w1, 19);ctx.lineTo(w, 25);
第三步畫(huà)右以及右下圓角的線：this.arcTo(x+w, y+h, x,? y+h, r);
第三步畫(huà)下以及左下圓角的線：this.arcTo(x, y+h, x, y, r);
第三步畫(huà)左以及左上圓角的線：this.arcTo(x, y, x+w, y, r);
畫(huà)完了：this.closePath();
摳圖！：this.clip();
然后就摳出了自己想要的圖形，然后用你的圖片填充就ok啦。
填充之前按照我們最?lèi)?ài)的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);不論你的原圖是多少像素，都會(huì)實(shí)現(xiàn)按照w1，h1的大小重繪，所以你右鍵下載一下對(duì)比之前原圖的大小就會(huì)發(fā)現(xiàn)！！壓縮了圖片！！！所以順便學(xué)習(xí)了壓縮圖片，很棒棒吧~~~
有用的話留言告訴大家~~~
ok啦~~~有什么問(wèn)題留言解決
