canvas图片合成

hai_xia

于 2019-06-27 18:21:24 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/hai_xia/article/details/93895404

版权

canvas图片合成问题解决二维码问题

步骤

1.背景图画图放在onload里两个onload嵌套
2.上传一张图片
3.toBaseURL->base64 再次做图片上传画布污染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        canvas{
            width: 512px;
            height: 288px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <input type="file">
    <img src="" alt="">


    <script>
        // var ele = document.querySelector('input');
        // ele.onchange = function(e){
        //     console.log('e...', e);
        //     let files = e.target.files;
        //     // 创建一个formData
        //     // let form = new FormData();
        //     // for (let i=0,len=files.length; i<len;i++){
        //     //     console.log(files[i].name);
        //     //     form.append(files[i].name, files[i]);
        //     // }
        //     // axios({
        //     //     method: 'post',
        //     //     url: 'http://123.206.55.50:11000/upload',
        //     //     data: form
        //     // }).then(body=>{
        //     //     console.log('body...', body);
        //     // }).catch(e=>{
        //     //     console.log('e..', e);
        //     // })
        //     // 创建一个fileReader       
        //     for (let i=0,len=files.length; i<len;i++){
        //         var reader = new FileReader();
        //         reader.onload = function(){
        //             console.log('result...', this.result);
        //             document.querySelector('img').src = this.result;
        //             axios({
        //                 method: 'post',
        //                 url: 'http://123.206.55.50:11000/upload_base64',
        //                 data: {base64: this.result}
        //             }).then(body=>{
        //                 console.log('body...', body);
        //             }).catch(e=>{
        //                 console.log('e..', e);
        //             })
        //         }
        //         reader.readAsDataURL(files[i]);
        //     }
        // }
        var cnavas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d');
        
        // 1.设置画布的宽高
        canvas.width = 512;
        canvas.height = 288;
        // 2.绘制背景图
        var img = new Image();
        axios({
            method: 'post',
            url: 'http://123.206.55.50:11000/tobase64',
            data: {url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562050630&di=89f94270963dbfa38de1d0eea22bb5f0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140103%2F20140103212227-1956389668.jpg'}
        }).then(body=>{
            console.log('body...', body);
            img.src = body.data.data.base64;
        }).catch(e=>{
            console.log('e..', e);
        })
        // img.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562050630&di=89f94270963dbfa38de1d0eea22bb5f0&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140103%2F20140103212227-1956389668.jpg';
        
        img.onload = function(){
            ctx.drawImage(img, 0, 0, 1280, 720, 0, 0, 512, 288);
        }
        // 3.监听图片上传
        var ele = document.querySelector('input');
        ele.onchange = function(e){
          
            let files = e.target.files;
            // 创建一个fileReader       
            for (let i=0,len=files.length; i<len;i++){
                var reader = new FileReader();
                reader.onload = function(){
                    // console.log('result...', this.result);
                    // 4.绘制上传的图片
                    var avatar = new Image();
                    avatar.src = this.result;
                    avatar.onload = function(){
                        ctx.drawImage(avatar, 0, 0, 300, 300, 385, 88, 30, 30);
                        // 5.合成一张图片
                        var result = canvas.toDataURL('jpg', 0.8);
                        console.log('result...', result);
                         
                    }
                }
                reader.readAsDataURL(files[i]);
            }
        }
    </script>
</body>
</html>

仅供参考，谢谢！