Canvas实现自定义图片大小（Vue）

实现思路：

         1、把上传图片利用FileReader的方法转为一个base64字节码

         2、使用Image对象来把base64字节码加载为一个图片

         3、使用canvas把Image图片画出来，在画的时候可以实现绘制的缩放

         4、用canvas.toDataURL把缩放图片转换为base64,给到页面图片的src

---

实现代码

HTML代码

<template>
    <img :src="imageData" alt="" @click="changePhoto">
</template>

 逻辑代码

<script>
      export default {
        data(){
            return{
                imageData: ''
               }
         },
        methods:{
          //自定义修改图片的大小
           changePhoto() {
                let _this = this
                let input = document.createElement('input')
                input.setAttribute('type', 'file')
                input.setAttribute('accept', 'image/*')
                input.onchange = function() {
                    //上传一个文件
                    let file = this.files[0]
                    //得到一个FileReader实例
                    let fr = new FileReader()
                    //把刚刚上传的图片转换为base64，转换后的fr，里面有个result，代表得到的base
                    fr.readAsDataURL(file)
                    fr.onload = function() {
                        let img = new Image()
                        //把刚刚的base64给实例化的img
                        img.src = this.result
                        //执行加载完成的函数
                        img.onload = function() {
                            //创建一个canvas
                            let canvas = document.createElement('canvas')
                            //设置大小（伸展或缩小尺寸）
                            canvas.width = 64
                            canvas.height = 64
                            //设置画笔
                            let ctx = canvas.getContext('2d')
                            // drawImage使用方法：https://www.runoob.com/jsref/met-canvas-drawimage.html
                            //参数：规定要使用的图像、画布或视频,开始的xy位置，可裁剪的xy，在画布放置的xy，要使用的xy(伸展或缩小图像)
                            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height)
                            //把改变尺寸的图片设置为一个base64
                            let newResult = canvas.toDataURL()
                            //设置给页面显示的图片
                            _this.imageData=newResult
                        }
                    }
                }
                input.click()
            },
            },
     }
</script>

 样式代码

<style>
    img{
        width: 64px;
        height: 64px;
        background: red;
    }
</style>