| ? ?微信會(huì)話框
細(xì)心的前端們會(huì)發(fā)現(xiàn)如果你在微信里發(fā)一張和你當(dāng)前背景一樣的圖片讼育，那么微信的會(huì)給這張圖片加邊框苍碟，并且牺蹄，右邊的小三角是根據(jù)圖片的位置截取的忘伞。很多前端會(huì)用backgroud或者clip-path來畫，這樣畫出來的沒法設(shè)置小邊框。 所以需要我們“萬能”的canvas氓奈！canvas翘魄！canvas！
| ? ?JS全部代碼
我們分為兩步：首先摳出圓角和會(huì)話角的邊框舀奶，第二步根據(jù)需求壓縮處理你的圖片大小
需要的知識(shí)點(diǎn)：1：canvas畫路徑摳圖暑竟；2：用圖片填充你的摳出來的部分
最后效果是：在原圖上摳出了你要的路徑并且！還帶邊框哦育勺！
總體流程：本機(jī)選擇一張圖 在頁面上顯示為我們想要的效果：
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,可以看看結(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ì)象(畫筆)
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è)畫布烧颖，對(duì)畫布的大小根據(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ì)算的畫布的大小
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轉(zhuǎn)為二進(jìn)制的數(shù)據(jù)用于上傳
canvas.toBlob(function (blob) {
//這里填你的ajax上傳步驟
});
};
};
| ? ?以下是效果圖兩張
| ? ?步驟詳解
先來說畫這個(gè)框框：來張優(yōu)秀的步驟圖對(duì)應(yīng)每一步的代碼：
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);不論你的原圖是多少像素跳夭，都會(huì)實(shí)現(xiàn)按照w1鳖悠，h1的大小重繪，所以你右鍵下載一下對(duì)比之前原圖的大小就會(huì)發(fā)現(xiàn)Ｓ琶睢乘综！壓縮了圖片！Ｌ着稹卡辰！所以順便學(xué)習(xí)了壓縮圖片，很棒棒吧~~~
有用的話留言告訴大家~~~
ok啦~~~有什么問題留言解決
