VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 前端生成分享海报兼容H5和小程序

### 移动端分享海报生成

最近做项目需求是生成商品分享海报,并且保存到手机中要兼容H5和小程序<br>

与后端同学沟通后,海报在前端生成最省性能和有较好的交互体验,先看做好的效果

 

​          

前端框架使用的是uni-app方便打包成H5和小程序

实现方案是拿到后端返回的数据后,利用canvas画布把各个数据拼在一起并且生成一张图片

主要的参数有:背景图、商品图、二维码、价格、原价、标题

 

首先拿到产品图和二维码之后需要把它们下载下来用uni-app的api就可以

先写一个下载方法并且在 template 定义画布组件

<template>

<canvas class="canvas" canvas-id="myCanvas" v-if="canvasStatus"></canvas>

</template>

onReady(){

  this.downloadFileImg('','pic');

  this.downloadFileImg('','code');

},

methods:{

  downloadFileImg(url,name){

    let self = this

    uni.downloadFile({

      url: url,

      successfunction(res{

        self[name] = res.tempFilePath;

      },

      failfunction(erros{

        console.log(error)

      }

    });

  }

}

这样图片就暂时保存到本地临时文件了

 uni.downloadFile  需要注意的是

在各个小程序平台运行时,网络相关的 API 在使用前需要配置域名白名单。在h5上是跨域的,用户需要处理好跨域问题。

下来编写canvas生成图片的方法

/**

    * 获取分享海报

    * @param array imgArr 海报素材 0 背景图 1商品图 2二维码

    * @param string store_name 素材文字

    * @param string price 价格

    * @param string ot_price 原始价格

    * @param function successFn 回调函数

*/

PosterCanvasfunction(imgArr, store_name, price, ot_price, successFn{

    let that = this;

    uni.showLoading({

        title'海报生成中',

        masktrue

    });

    const ctx = uni.createCanvasContext('myCanvas');

    ctx.clearRect(0000);



    /**

    * 只能获取合法域名下的图片信息,本地调试无法获取

    * 

    */

    ctx.fillStyle = '#fff';

    ctx.fillRect(007501150);

    uni.getImageInfo({

        src: imgArr[0],

        successfunction(res{

            const WIDTH = res.width;

            const HEIGHT = res.height;

            ctx.drawImage(imgArr[1], 00, WIDTH, WIDTH);

            ctx.save();

            let r = 110;

            let d = r * 2;

            let cx = 480;

            let cy = 790;

            ctx.arc(cx + r, cy + r, r, 02 * Math.PI);

            // ctx.clip();

            ctx.drawImage(imgArr[2], cx, cy, d, d);

            ctx.restore();

            const CONTENT_ROW_LENGTH = 20;

            let [contentLeng, contentArray, contentRows] = that.textByteLength(store_name, CONTENT_ROW_LENGTH);

            if (contentRows > 2) {

                contentRows = 2;

                let textArray = contentArray.slice(02);

                textArray[textArray.length - 1] += '……';

                contentArray = textArray;

            }

            ctx.setTextAlign('left');

            ctx.setFontSize(36);

            ctx.setFillStyle('#000');

            // let contentHh = 36 * 1.5;

            let contentHh = 36;

            for (let m = 0; m < contentArray.length; m++) {

                if (m) {

                    ctx.fillText(contentArray[m], 501000 + contentHh * m + 181100);

                } else {

                    ctx.fillText(contentArray[m], 501000 + contentHh * m, 1100);

                }

            }

            ctx.setTextAlign('left')

            ctx.setFontSize(72);

            ctx.setFillStyle('#DA4F2A');

            ctx.fillText('¥' + price, 40820 + contentHh);



            ctx.setTextAlign('left')

            ctx.setFontSize(36);

            ctx.setFillStyle('#999');

            ctx.fillText('¥' + ot_price, 50876 + contentHh);

            var underline = function(ctx, text, x, y, size, color, thickness, offset{

                var width = ctx.measureText(text).width;

                switch (ctx.textAlign) {

                    case "center":

                        x -= (width / 2);

                        break;

                    case "right":

                        x -= width;

                        break;

                }



                y += size + offset;

                ctx.beginPath();

                ctx.strokeStyle = color;

                ctx.lineWidth = thickness;

                ctx.moveTo(x, y);

                ctx.lineTo(x + width, y);

                ctx.stroke();

            }

            underline(ctx, '¥' + ot_price, 5586536'#999'20)

            ctx.setTextAlign('left')

            ctx.setFontSize(28);

            ctx.setFillStyle('#999');

            ctx.fillText('长按或扫描查看'4901030 + contentHh);

            ctx.draw(truefunction() {

                uni.canvasToTempFilePath({

                    canvasId'myCanvas',

                    fileType'png',

                    destWidth: WIDTH,

                    destHeight: HEIGHT,

                    successfunction(res{

                        uni.hideLoading();

                        successFn && successFn(res.tempFilePath);

                    }

                })

            });

        },

        failfunction(err{

            uni.hideLoading();

            that.Tips({

                title'无法获取图片信息'

            });

        }

    })

},

首先创建一个canvas 画布

获取背景图图片信息拿到宽和高再绘制商品图片并保存

接下来绘制二维码并把坐标放好并保存

在处理文字换行问题并设置大小颜色和对其方式

在相对应的设置价格和原价的颜色和大小还有坐标

由于价格还有条横线,我在网上又搜下了横线的做法直接看方法就行

最后生成图片信息并且使用uni.canvasToTempFilePath 方法把当前画布指定区域的内容导出生成指定大小的图片,并返回文件路径。

这样我们就得到一个.png的临时文件现在就剩最后一步把文件渲染到组件里了,从回调函数就可以回去到

此方法用的比方比较多我把它写到公共方法里面并且绑定到vue原型上面方便我们后面使用

现在编写方法调用

handelCanvas(){

    let imgArr = ['背景图路径',this.pic,this.code]

    this.$util.PosterCanvas(imgArr,'标题','价格','原价',function(tempFilePath){

        console.log(tempFilePath)

    })

}

这样就拿到生成好的图片的是一个临时文件 现在把他放到页面中展示就ok了

保存图片功能H5可以长按保存图片这里只用处理小程序的就行

首先检测授权拿到授权后调用uni-app的api就可以了

savePosterPath: function() {

    let that = this;

    uni.getSetting({

        success(res) {

            if (!res.authSetting['scope.writePhotosAlbum']) {

                uni.authorize({

                    scope'scope.writePhotosAlbum',

                    success() {

                        uni.saveImageToPhotosAlbum({

                            filePath'canvas生成的临时图片',

                            successfunction(res{

                                ....成功了

                            },

                            failfunction(res{

                                ....失败了

                            }

                        });

                    }

                });

            } else {

                uni.saveImageToPhotosAlbum({

                    filePath'canvas生成的临时图片',

                    successfunction(res{

                        ....成功了

                    },

                    failfunction(res{

                        ....失败了

                    }

                });

            }

        }

    });

},

这样前端生成海报就大功告成了,你学废了吗?

最后打一波广告:

CRMEB商城一个免费开源项目

移动端使用uni-app框架目前已经适配公众号、小程序、app(暂未发布)

管理后台使用vue+iview框架

开源不易,希望各位关注下,说不定你会有意外收获!

地址:http://github.crmeb.net/u/qiang

出处:https://www.cnblogs.com/qianghaha/p/14546577.html

 


相关教程