微信⼩程序 图⽚导出

问题

微信⼩程序 图⽚导出

答案

这是⼀种常⻅的引流⽅式，⼀般同时会在图⽚中附加⼀个⼩程序⼆维码。

基本原理

借助 canvas 元素，将需要导出的样式⾸先在 canvas 画布上绘制出来 （ api 基本和h5 保持⼀致，但有轻微差异，使⽤时注意即可

借助微信提供的 canvasToTempFilePath 导出图⽚，最后再使⽤saveImageToPhotosAlbum （需要授权）保存图⽚到本地

如何优雅实现

绘制出需要的样式这⼀步是省略不掉的。但是我们可以封装⼀个绘制库，包含常⻅图形的绘制，例如矩形，圆⻆矩形，圆， 扇形， 三⻆形， ⽂字，图⽚减少绘制代码，只需要提炼出样式信息，便可以轻松的绘制，最后导出图⽚存⼊相册。笔者觉得以下这种⽅式绘制更为优雅清晰⼀些，其实也可以使⽤加⼊⼀个type参数来指定绘制类型，传⼊的⼀个是样式数组，实现绘制。

结合上⼀步的实现，如果对于同⼀类型的卡⽚有多次导出需求的场景，也可以使⽤⾃定义组件的⽅式，封装同⼀类型的卡⽚为⼀个通⽤组件，在需要导出图⽚功能的地⽅，引⼊该组件即可。

class CanvasKit {
    constructor() {
    }
    drawImg(option = {}) {
        ...
        return this
    }
    drawRect(option = {}) {
        return this
    }
    drawText(option = {}) {
        ...
        return this
    }
    static exportImg(option = {}) {
        ...
    }
}
let drawer = new CanvasKit('canvasId').drawImg(styleObj1).drawText(styleOb
drawer.exportImg()

注意事项

⼩程序中⽆法绘制⽹络图⽚到 canvas 上，需要通过 downLoadFile 先下载图⽚ 到本地临时⽂件才可以绘制

通常需要绘制⼆维码到导出的图⽚上，有⼀种⽅式导出⼆维码时，需要携带的参数 必须做编码，⽽且有具体的⻓度（ 32 可⻅字符）限制，可以借助服务端⽣成 短 链接 的⽅式来解决

更多面试题

如果你想了解更多的前端面试题，可以查看本站的WEB前端面试题 ,这里基本包涵了市场上的所有前端方面的面试题，也有一些大公司的面试图，可以让你面试更加顺利。

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！