canvas生成海报案例

封面图适配 等比例缩放

//canvasWidth, canvasHeight 是图片要展示的区域宽高 而非整个canvas的实际宽高
const aspectFit = (imageWidth, imageHeight, canvasWidth, canvasHeight) => {
    const imageRate = imageWidth / imageHeight;
    const canvasRate = canvasWidth / canvasHeight;
    let [dx, dy, dw, dh] = [];
    if (imageRate >= canvasRate) {
        dw = canvasWidth;
        dh = canvasWidth / imageRate;
    } else {
        dh = canvasHeight;
        dw = canvasHeight * imageRate;
    }
    dx = (canvasWidth - dw) / 2;
    dy = (canvasHeight - dh) / 2;
    return [dx, dy, dw, dh];
}

    
    
    



    

        
        
    
    生成海报
    
    
    

遇到的问题:生成的二维码跟图片内容合不到一个canvas里面,具体原因还没找到,看页面元素,二维码是一个canvas元素,并不是一个普通的图片