canvas压缩图片上传加水印canvas压缩图片上传加水印..............................

示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input type="file" id="file">
    <!-- <img :src="imgUrl" class="img" /> -->
    <script>
        //创建canvas对象
        var canvas = document.createElement('canvas');
        //绑定canvas上下文
        var ctx = canvas.getContext('2d');
        // 设置canvas的宽和高
        canvas.width = 300;
        canvas.height = 300;
        // 得到file
        var oFile = document.getElementById('file');
        // 添加监听事件
        oFile.addEventListener('change', function (event) {
            // FileReader图片预览
            var reader = new FileReader();
            reader.readAsDataURL(event.target.files[0]);
            // 读文件成功的回调
            reader.onload = function(e) {
                var img = new Image();
                // e.target.result就是图片的base64地址信息
                img.src = e.target.result;
                img.onload = function(){
                    // 核心JS就这个
                    ctx.drawImage(img,0,0,300,300);
                    // 添加水印
                    ctx.font = '20px Arial';
                    ctx.rotate(-0.3);
                    ctx.fillStyle = 'red';
                    ctx.fillText('这是水印,这是水印', canvas.width * 0.1, canvas.height * 0.3);
                    // canvas 上树
                    document.documentElement.appendChild(canvas);
                }
            };
        });
    </script>
</body>
</html>