处理图片上传并利用canvas压缩且转化为base64，

最新推荐文章于 2024-05-20 10:13:35 发布

爱编程，不秃头

最新推荐文章于 2024-05-20 10:13:35 发布

阅读量546

点赞数

文章标签： javascript css css3 vue

本文链接：https://blog.csdn.net/tutou_cute/article/details/122553533

版权

这篇文章处理图片上传 并利用canvas压缩  且转化为base64，
技术：vue3 + native ui库

// /* 图片压缩方法-canvas压缩--工具 */
function compressUpload(image, file, num) {
	const canvas = document.createElement("canvas");
	const ctx = canvas.getContext("2d");
	// const initSize = image.src.length
	const { width } = image;
	const { height } = image;
	canvas.width = width;
	canvas.height = height;
	ctx.fillRect(0, 0, canvas.width, canvas.height);
	ctx.drawImage(image, 0, 0, width, height);
	// 进行最小压缩0.1
	const compressData = canvas.toDataURL(file.type || "image/jpeg", num);
	return compressData;
}

// 我用的native-ui库  不过获取的文件参数都差不多
// html
 <n-upload @before-upload="photoBtn" :show-file-list="false">
   <n-button type="primary" class="photoBtn">拍照</n-button>
 </n-upload>
 
 // 拍照上传
const photoBtn = ({ file }) => {
  const isLt2M = file.file.size / 1024 / 10