【oss】製作模糊了半截的圖片

原理：

先把圖片製作成模糊，然後裁剪，然後把該圖轉成base64後以水印的方式負在原圖上。

步驟:

 

例子：

假設我有一張原圖http://xxx.com/aa.jpg

1我先把它等比縮放成200*200 /resize,w_200,h_200,m_pad

2然後再裁剪 /crop,g_west,h_100

3然後模糊 /blur,r_50,s_50

4調整亮度/bright,40

5最終生成的水印地址：

 http://xxx.com/aa.jpg?x-oss-process=image/resize,w_200,h_200,m_pad/crop,g_west,h_100/blur,r_50,s_50/bright,40

6然後用aa.jpg?x-oss-process=image/resize,w_200,h_200,m_pad/crop,g_west,h_100/blur,r_50,s_50/bright,40生成base64並保存到base64WaterMark變量中

注意這裏並沒有帶上前面的地址！！

7.還是原圖

http://xxx.com/aa.jpg

8.先等比縮放成200*200 /resize,w_200,h_200,m_pad

9.然後是添加上水印/watermark,image_${base64WaterMark},g_center

10最終地址：

http://xxx.com/aa.jpg?x-oss-process=image/resize,w_${size},h_${size},m_pad/watermark,image_${base64WaterMark},g_center

 

代碼實現：

var Base64 = require('js-base64').Base64; //這裏用了一個第三方的模塊去轉base64


function getBase64(str,isOss){
        var Base64Str = Base64.encode(str);
        if(isOss){
            Base64Str = Base64Str.replace(/\+/gi,'-');
            Base64Str = Base64Str.replace(/\//g,'_');
        }
        return Base64Str;
}



function loadImage(url, size=200){
        let h = size>=200?70:40;
        var index = String(url).lastIndexOf("\/");
            var picName  = String(url).substring(index + 1, url.length);
            let watermark = `${picName}?x-oss-process=image/resize,w_${size},h_${size},m_pad/crop,g_west,h_${h}/blur,r_20,s_50/bright,40`;
            let base64WaterMark = getBase64(watermark,true);
            return `${url}?x-oss-process=image/resize,w_${size},h_${size},m_pad/watermark,image_${base64WaterMark},g_center`
    }