Vue中用canvas实现二维码和图片合成海报

时间: 2019-06-10阅读: 651标签: 海报

在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载,简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报


1. 设置相应比例

一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用canvas生成,在此不多赘述

import posterBgImg from '../public/images/poster_bg.png';// 海报底图
import qrcodeImg from '../public/images/qrcode.png';// 二维码
export default{
    name: 'qrcode-in-poster',
    data(){
        return {
            posterBgImg,
            qrcodeImg,
            posterSize: 930/650,// 海报高宽比例
            qrCodeSize: {// 二维码与海报对应比例 =》 用于设置二维码在海报中的位置
                width: 270/650,
                height: 270/930,
                left: 190/650,
                top: 448/650
            },
            poster: '',// 合成图片
        }
    }
};


2. 获取屏幕宽度

限定移动端最大宽度为 480px

computed: {
    screenWidth(){
        let w = document.body.clientWidt || document.documentElement.clientWidth || 375;
        return w > 480 ? 480 : w ;
    }
};


3. 组合图片

methods: {
    combinedPoster(_url){
        let that = this,
            qrcode = this.qrcodeImg; // 二维码地址
    
        console.log("open draw: ", _url, qrcode)
        let base64 = '',
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext("2d"),
            _w = this.screenWidth * 2, // 图片宽度: 由于手机屏幕时retina屏,都会多倍渲染,在此只设置2倍,如果直接设置等于手机屏幕,会导致生成的图片分辨率不够而模糊
            _h = this.posterSize * _w, // 图片高度
            _qr_w = this.qrCodeSize.width * _w, // 二维码宽 = 比例 * 宽度
            _qr_h = this.qrCodeSize.height * _h, // 二维码高 = 比例 * 高度
            _qr_t = this.qrCodeSize.top * _w, // 二维码顶部距离 = 比例 * 宽度
            _qr_l = this.qrCodeSize.left * _w; // 二维码左侧距离 = 比例 * 宽度
        // 设置canvas宽高    
        canvas.width = _w; 
        canvas.height = _h;
        ctx.rect(0, 0, _w, _h);
        ctx.fillStyle = '#fff'; // 填充颜色
        ctx.fill();
        // 迭代生成: 第一层(底图)+ 第二层(二维码)
        // file:文件,size:[顶部距离,左侧距离,宽度,高度]
        let _list = [ 
            {
                file: _url,
                size: [0, 0, _w, _h]
            }, {
                file: qrcode,
                size: [_qr_l, _qr_t, _qr_w, _qr_h]
            }
        ];
        // 开始绘画
        let drawing = (_index) => {
            // 判断当前索引 =》 是否已绘制完毕
            if (_index < _list.length) {
                // 等图片预加载后画图
                let img = new Image(),
                    timeStamp = new Date().getTime();
                // 防止跨域
                img.setAttribute('crossOrigin', 'anonymous')
                // 链接加上时间戳
                img.src = _list[_index].file + '?' + timeStamp
                img.onload = function() {
                    // 画图
                    ctx.drawImage(img, ..._list[_index].size)
                    // 递归_list
                    drawing(_index + 1)
                }
            } else {
                // 生成图片
                base64 = canvas.toDataURL("image/png")
                if (base64) {
                    // 赋值相应海报上
                    this.$set(that, 'poster', base64)
                }
            }
        }
        drawing(0)
    }
};
mounted(){
    // 需要合成海报的图片
    this.draw(this.posterBgImg)
}


4. 下载

点击下载合成图片

methods: {
    handleDownload(){
        if(this.poster){
            let a = document.createElement("a");
            a.setAttribute("download", "海报下载-"+(new Date().getTime()));
            a.href = this.poster
            a.click()
        }else{
            console.log("海报不存在,请重新生成!")
        }
    }
}

tips:不适用于微信浏览器,只能提示用户长按保存。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3626

小程序生成海报:通过 json 配置方式轻松制作一张海报图

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈

小程序如何在不同设备上自适应生成海报

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667;

小程序如何生成海报分享朋友圈

项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。

H5海报制作实践

展示的时候使用html、css,这样用户看到的展示、编辑页面适配起来容易。最后生成图片的时候使用canvas,这个canvas是隐藏的,用户不可见,这样还有一个优点,最终生成的海报大小是固定的,跟手机屏幕大小无关。

FabricJs:动态海报营销方案

Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。Fabric.js可以做很多事情,如下:

小程序海报最佳实现思路,可视化编辑直接生成代码使用

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈

小程序海报生成工具,可视化编辑直接生成代码使用

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广