H5上传图片并使用canvas制作海报

开发要求：

1、用户可以从手机相册上传图片或拍照上传图片；

2、用户可以输入想要说的话，如：终于等到你；

3、将用户输入的文案及活动二维码生成一张图片供用户保存到手机，以方便发送朋友圈或好友。

功能实现：

1、使用H5的input[type="file"]标签来上传图片，并使用其原生的js代码将其转换成base64字符串的图片；

2、使用canvas将用户上传的图片和输入的代言地点及活动二维码生成一张图片;

3、记录用户生成的图片信息。

<template>
<div>
    <input ref="inputer" class="filepath" @change="changepic" type="file"><br>
    <img :src="src" ref="show" width="200">
    <canvas ref="mycanvas"></canvas>
</div>
</template>
<script>
    import logo from '@/m/images/logo.png'
    export default {
        name: 'canpic',
        data(){
            return {
                src: ''
            }
        },
        methods:{
            changepic(obj){
                console.log(obj)
                const file = this.$refs.inputer.files[0]
                var newsrc = this.getObjectURL(file);
                this.src = newsrc;
                var canvas = this.$refs.mycanvas
                var ctx = canvas.getContext('2d')
                canvas.width = 368
                canvas.heigh = 585
                var imgUrl = new Image
                var logoUrl = new Image
                var point = new Image
                imgUrl.src = newsrc
                logoUrl.src = logo
                point.src = logo
                var daiyan_text = '我要'
                // var btm = document.getElementById("bottom")
                imgUrl.onload = function () {
                    canvas.height = this.height + 50;
                    ctx.fillStyle = "#000";
                    ctx.fillRect(0, 0, 368, 585);
                    var erWeiMaY = this.height - logoUrl.height - 70;
                    var wyDyY = this.height - 57;
                    if (ctx.drawImage(imgUrl, 0, 0, 368, this.height),
                        ctx.beginPath(),
                        ctx.font = "normal 20px PingFangSC-Medium",
                        ctx.textAlign = "start",
                        ctx.textBaseline = "hanging",
                        ctx.shadowOffsetX = 0,
                        ctx.shadowOffsetY = 5,
                        ctx.shadowColor = "rgba(0, 0, 0, 0.3)",
                        ctx.shadowBlur = 5)
                    {
                        ctx.beginPath();
                        ctx.drawImage(logoUrl, 20, 15, 115, 40);
                        ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点
                        ctx.rotate(335 * Math.PI / 180);
                        var pTxt = "老师我想对您说：点击输入";
                        ctx.fillText(pTxt, 0, 160);
                        ctx.closePath();
                        // ctx.drawImage(point, 0, 0, 42, 55);
                    }


                }
            },
            getObjectURL(file) {
                var url = null ;
                // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
                if (window.createObjectURL!=undefined) { // basic
                    url = window.createObjectURL(file) ;
                } else if (window.URL!=undefined) { // mozilla(firefox)
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL!=undefined) { // webkit or chrome
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
            }
        }
    }
</script>