开发要求：
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>
