vue把elementui把上传图片格式转为png
要将上传的图片格式转为PNG,你可以使用canvas来实现。以下是一个示例代码:
// 假设上传图片的数据为blob格式,可以通过input[type="file"]获取
const file = document.querySelector('input[type="file"]').files[0];
// 创建一个图片对象
const img = new Image();
// 监听图片加载完成事件
img.onload = function() {
// 创建一个canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置canvas的宽高与图片一致
canvas.width = img.width;
canvas.height = img.height;
// 将图片绘制到canvas上
ctx.drawImage(img, 0, 0);
// 将canvas转为PNG格式的图片数据
const pngData = canvas.toDataURL('image/png');
// 将转换后的图片数据上传到服务器等操作
// ...
};
// 将blob格式的图片数据转为base64格式
const reader = new FileReader();
reader.onloadend = function() {
// 将base64格式的图片数据赋值给图片对象
img.src = reader.result;
};
reader.readAsDataURL(file);
在上面的代码中,我们首先获取上传的图片数据(假设为blob格式),然后创建一个Image对象,并将图片数据转为base64格式赋值给图片对象的src属性。接着监听图片的onload事件,当图片加载完成后,创建一个canvas元素,并将图片绘制到canvas上。最后,使用toDataURL方法将canvas转为PNG格式的图片数据。
你可以根据实际的需求将转换后的图片数据上传到服务器或进行其他操作
原文地址: https://www.cveoy.top/t/topic/ihu0 著作权归作者所有。请勿转载和采集!