资讯专栏INFORMATION COLUMN

[填坑手册]小程序Canvas生成海报(一)---完整流程

shleyZ / 2296人阅读

摘要:海报生成示例最近智酷君在做小程序生成海报的项目中遇到一些棘手的问题,在网上查阅了各种资料,也踩扁了各种坑,智酷君希望把这些填坑经验整理一下分享出来,避免后来的兄弟重复掉坑。


海报生成示例

最近智酷君在做[小程序]canvas生成海报的项目中遇到一些棘手的问题,在网上查阅了各种资料,也踩扁了各种坑,智酷君希望把这些“填坑”经验整理一下分享出来,避免后来的兄弟重复“掉坑”。


原型图

这是一个大致的原型图,下面来看下如何制作这个海报,以及整体的思路。


海报生成流程

### [代码片段]Canvas生成海报实战demo

demo的微信路径:https://developers.weixin.qq....

demo的ID:Q74OU3m57c9x

如果你装了IDE工具,可以直接访问上面的demo路径

通过代码片段将demo的ID输入进去也可添加:

下面分享下主要的代码内容和“填坑现场”
一、添加字体

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/font.html

canvasContext.font = value //示例
ctx.font = `normal bold 20px sans-serif`//设置字体大小,默认10
ctx.setTextAlign("left");
ctx.setTextBaseline("top");
ctx.fillText("《智酷方程式》专注研究和分享前端技术", 50, 15, 250)//绘制文本

符合 CSS font 语法的 DOMString 字符串,至少需要提供字体大小和字体族名。默认值为 10px sans-serif

文字过长在canvas下换行问题处理(最多两行,超过“...”代替)
ctx.setTextAlign("left");
ctx.setFillStyle("#000");//文字颜色:默认黑色
ctx.font = `normal bold 18px sans-serif`//设置字体大小,默认10
let canvasTitleArray = canvasTitle.split("");
let firstTitle = ""; //第一行字
let secondTitle = ""; //第二行字
for (let i = 0; i < canvasTitleArray.length; i++) {
    let element = canvasTitleArray[i];
    let firstWidth = ctx.measureText(firstTitle).width;
    //console.log(ctx.measureText(firstTitle).width);
    if (firstWidth > 260) {
        let secondWidth = ctx.measureText(secondTitle).width;
        //第二行字数超过,变为...
        if (secondWidth > 260) {
            secondTitle += "...";
            break;
        } else {
            secondTitle += element;
        }
    } else {
        firstTitle += element;
    }
}
//第一行文字
ctx.fillText(firstTitle, 20, 278, 280)//绘制文本
//第二行问题
if (secondTitle) {
    ctx.fillText(secondTitle, 20, 300, 280)//绘制文本
}

通过 ctx.measureText 这个方法可以判断文字的宽度,然后进行切割。
(一行字允许宽度为280时,判断需要写小点,比如260)

二、获取临时地址并设置图片
let mainImg = "https://demo.com/url.jpg";
wx.getImageInfo({
    src: mainImg,//服务器返回的图片地址
    success: function (res) {
        //处理图片纵横比例过大或者过小的问题!!!
        let h = res.height;
        let w = res.width;
        let setHeight = 280, //默认源图截取的区域
            setWidth = 220; //默认源图截取的区域
        if (w / h > 1.5) {
            setHeight = h;
            setWidth = parseInt(280 / 220 * h);
        } else if (w / h < 1) {
            setWidth = w;
            setHeight = parseInt(220 / 280 * w);
        } else {
            setHeight = h;
            setWidth = w;
        };
        console.log(setWidth, setHeight)
        ctx.drawImage(res.path, 0, 0, setWidth, setHeight, 20, 50, 280, 220);
        ctx.draw(true);
    },
    fail: function (res) {
        //失败回调
    }
});

在开发过程中如果封面图无法按照约定的比例(280x220)给到:
那么我们就需要处理默认封面图过大或者过小的问题,大致思路是:代码中通过比较纵横比(280/220=1.27)正比例放大或者缩小原图,然后从左上切割,竟可能保证过高的图是宽度100%,过宽的图是高度100%。
在canvas中draw图片,必须是一个(相对)本地路径,我们可以通过将图片保存在本地后生成的临时路径
微信官方提供两个API:
wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)。都需先配置download域名才能生效。

三、裁切“圆形”头像画图
ctx.save();  //保存画图板
ctx.beginPath()//开始创建一个路径
ctx.arc(35, 25, 15, 0, 2 * Math.PI, false)//画一个圆形裁剪区域
ctx.clip()//裁剪
ctx.closePath();
ctx.drawImage(headImageLocal, 20, 10, 30, 30);
ctx.draw(true);
ctx.restore()//恢复之前保存的绘图上下文

使用图形上下文的不带参数的clip()方法来实现Canvas的图像裁剪功能。该方法使用路径来对Canvas话不设置一个裁剪区域。因此,必须先创建好路径。创建完整后,调用clip()方法来设置裁剪区域。
需要注意的是裁剪是对画布进行的,裁切后的画布不能恢复到原来的大小,也就是说画布是越切越小的,要想保证最后仍然能在canvas最初定义的大小下绘图需要注意save()和restore()。画布是先裁切完了再进行绘图。并不一定非要是图片,路径也可以放进去~

小程序 canvas 裁切BUG
ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, 320, 500);  //第一个填充矩形
wx.downloadFile({
    url: headUri,
    success(res) {
        ctx.beginPath()
        ctx.arc(50, 50, 25, 0, 2 * Math.PI)
        ctx.clip()
        ctx.drawImage(res.tempFilePath, 25, 25); //第二个填充图片
        ctx.draw()
        ctx.restore()
        ctx.setFillStyle("#fff");
        ctx.fillRect(0, 0, 320, 500);
        ctx.draw(true)
        ctx.restore()
    }
})

clip裁切这个功能,如果有超过一张图片/背景叠加,则裁切效果失效。
错误参考:http://html51.com/info-38753-1/

四、将canvas导出成虚拟地址
wx.canvasToTempFilePath({
    fileType: "jpg",
    canvasId: "customCanvas",
    success: (res) => {
        console.log(res.tempFilePath) //为canvas的虚拟地址
    }
})

res:
{
    errMsg: "canvasToTempFilePath:ok", 
    tempFilePath: "http://tmp/wx02935bb29080a7b4.o6zAJswFAuZuKQ5NZfPr….cGnD1a02PlVC0b3284be3a41d08986c2477579a5fd8e.jpg"
}

这里需要把canvas里面的内容,导出成一个临时地址才能保存在相册,比如:
http://tmp/wx02935bb29080a7b4...

五、询问并获取访问手机本地相册权限
wx.getSetting({
    success(res) {
        console.log(res)
        if (!res.authSetting["scope.writePhotosAlbum"]) { //判断权限
            wx.authorize({ //获取权限
                scope: "scope.writePhotosAlbum",
                success() {
                    console.log("授权成功")
                    //转化路径

                    self.saveImg();
                }
            })
        } else {
            self.saveImg();
        }
    }
})

判断是否有访问相册的权限,如果没有,则请求权限。

六、保存到用户手机本地相册
wx.saveImageToPhotosAlbum({
    filePath: res.tempFilePath,
    success: function (data) {
        wx.showToast({
            title: "保存到系统相册成功",
            icon: "success",
            duration: 2000
        })
    },
    fail: function (err) {
        console.log(err);
        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
            console.log("当初用户拒绝,再次发起授权")
            wx.openSetting({
                success(settingdata) {
                    console.log(settingdata)
                    if (settingdata.authSetting["scope.writePhotosAlbum"]) {
                        console.log("获取权限成功,给出再次点击图片保存到相册的提示。")
                    } else {
                        console.log("获取权限失败,给出不给权限就无法正常使用的提示")
                    }
                }
            })
        } else {
            wx.showToast({
                title: "保存失败",
                icon: "none"
            });
        }
    },
    complete(res) {
        console.log(res);
    }
})

保存到本地需要一定的时间,需要加一个loading的状态。

七、关于组件中引用canvas
let ctx = wx.createCanvasContext("posterCanvas",this); //需要加this

在components中canvas无法选中的问题:
在components自定义组件下,当前组件实例的this,表示在这个自定义组件下查找拥有 canvas-id 的 ,如果省略则不在任何自定义组件内查找。

如果有什么疑问或者纠错可以在下面给智酷君留言。

如果智酷君的分享能够帮助到你,或者想持续获得最新的全栈攻略

可以在segmentfault关注我,或在VX搜索“ Geek_Club ”或者“ 智酷方程式

扫描关注公众号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109772.html

相关文章

  • [填坑手册]程序目录结构和component组件使用心得

    摘要:组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。事件用于子组件向父组件传递数据,可以传递任意数据。官方文档往期回顾填坑手册小程序生成海报一拆弹时刻小程序生成海报二 showImg(https://user-gold-cdn.xitu.io/2019/6/19/16b6e94bcde767a1?w=1069&h=652&f=jpeg&s=120912); 小程序目录结构...

    myshell 评论0 收藏0
  • [打怪升级]程序评论回复和发帖功能实战(二)

    摘要:发帖的功能只要理清思路,其实并不复杂,利用机器做内容审查是关键,直接关系到小程序的整体安全。内容检查重点由于内容安全对于小程序运营至关重要,稍有不慎就容易导致小程序被封,所以在这块的校验除了常规人工检查外,我们还可以用到微信的内容安全。 showImg(https://segmentfault.com/img/remote/1460000019955210?w=658&h=440); ...

    ThinkSNS 评论0 收藏0
  • [打怪升级]程序评论回复和发贴功能实战(

    摘要:往期回顾打怪升级小程序评论回复和发贴功能实战二填坑手册小程序生成海报一拆弹时刻小程序生成海报二填坑手册小程序目录结构和组件使用心得 showImg(https://segmentfault.com/img/remote/1460000019733090?w=818&h=516); 在学习成长的过程中,常常会遇到一些自己从未接触的事物,这就好比是打怪升级,每次打倒一只怪,都会获得经验,让...

    YJNldm 评论0 收藏0
  • [拆弹时刻]程序canvas生成海报(二)---优化方案

    摘要:注意如果用户一开始没有微信授权,生成海报时又必须要用户头像不能使用默认的话,那就只能老老实实走之前的流程了。组件名称终端类型微信版本触发方法关于的调用方法相册权限需要你提供保存相册权限获取相册权限成功,给出再次点击图片保存到相册的提示。 showImg(https://segmentfault.com/img/bVbs5V8?w=343&h=517);海报生成示例 海报生成速度缓慢...

    LittleLiByte 评论0 收藏0
  • 20181012微信程序填坑手册

    摘要:全屏蒙版弹窗遮不住的层级还是很高的,当出现全屏蒙版弹窗时,是无法盖住的,可以调用微信的,不过需要注意兼容低版本在类设置的颜色并没有变化。 从6月份开始到现在,写小程序将近4个月了开发时给自己埋了不少坑~给大家分享下我的填坑经验~~ 开发部分 1.小程序的组件修改不能触发页面刷新?需要在父级文件上保存下才会触发(使用wepy开发) 2.接口请求出现的问题?记得勾选调试开发工具上 不校验...

    刘玉平 评论0 收藏0

发表评论

0条评论

shleyZ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<