h5生成海报

1.安装依赖

cnpm install html2canvas --save

2核心代码如下：

<template>
    <div class="content">
        <div class="poster">
            <!-- 海报html元素 -->
            <div id="posterHtml" class="posterHtml" :style="{backgroundImage: 'url('+posterHtmlBg+')'}">
                <div class="posterTitle">{{posterContent}}</div>
                <div class="posterPrice">免费</div>
                <img class="posterImg" src="**********" />
                <div class="posterCode">
                    <div id="qrcode" ref="qrcode"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
    data() {
        return {
            posterContent: '2020年一月第一作越上线打发时间福利卡解放路卡撒旦法', // 文案内容
            showFlag: false,
            posterImg: '', // 最终生成的海报图片
            posterImgName: '宣传海报', // 最终生成的海报图片名称
            posterHtmlBg: require('@/../static/imgs/poster/bg2.png'),
            text: "https://www.baidu.com/"
        }
    },
    mounted() {
        this.createPoster()
    },
    methods: {
        // 生成海报
        createPoster() {
            const vm = this
            const domObj = document.getElementById('posterHtml')
            html2canvas(domObj, {
                useCORS: true,
                allowTaint: true,
                onclone(doc) {
                    let e = doc.querySelector('#posterHtml')
                    e.style.display = 'block'
                }
            }).then(canvas => {
                // 长按上方图片保存并分享
                vm.posterImg = canvas.toDataURL('image/png')
                vm.showFlag = true
                vm.imgDown(vm.posterImg)
            })
        },
        // 保存图片到本地
        imgDown(img) {
            var alink = document.createElement('a')
            alink.href = img
            alink.download = this.posterImgName // 图片名
            alink.click()
        }
    }
}
</script>

参考资料：https://www.jianshu.com/p/182f100404f3
参考demo：https://appnuyeok7f3506.h5.xiaoeknow.com/v2/course/alive/l_61e0da63e4b06758c780bd7e?app_id=appnuyeok7f3506&alive_mode=0&pro_id=&type=2
跨域参考资料：
https://blog.csdn.net/weixin_52022129/article/details/116695969

3.但是实际项目不可用，图片有跨域问题

从以往的开发经验认知，不论是 标签里的图片还是 CSS 背景里的图片，浏览器都是允许从任意源引入而不会做跨域限制的，但为什么现在不行了？
那就要说到同源策略（Same-origin policy, SOP）。它是一种重要的浏览器安全机制，规定了一个源（origin，也可称为域）的 HTML 文档或它加载的脚本如何能与另一个源的资源进行交互。

一个源访问另一个源的资源又称为跨域网络访问（Cross-origin network access），同源策略将跨域网络访问分为了三种场景：

1. 跨域写操作（Cross-origin writes）。常见的有表单提交、使用链接（links）访问其他域的网页等。 跨域写操作默认是被允许的。
2. 跨域资源嵌入（Cross-origin embedding）。使用 link script img iframe 等标签对其他域的资源进行引用就属于这用情况。跨域资源嵌入默认也是被允许的。
3. 跨域读操作（Cross-origin reads）。最常见的就是发起访问其他域的 Ajax 请求。跨域读操作默认情况下是不被允许的。

没错，我们是跨域读，所以你懂得……
解决方法有两种，一种是后台设置