【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`
    }