Canvas实现自定义图片大小(Vue)
实现思路:1、把上传图片利用FileReader的方法转为一个base64字节码2、使用Image对象来把base64字节码加载为一个图片3、使用canvas把Image图片画出来,在画的时候可以实现绘制的缩放4、用canvas.toDataURL把缩放图片转换为base64,给到页面图片的src。
·
实现思路:
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>
更多推荐
已为社区贡献1条内容
所有评论(0)