前端vue实现图片压缩并且将其转换为jpg格式图片;前端转换图片格式;前端使用js转换图片格式;前端使用canvas将png格式图片转成jpg格式
需求中可能有时需要将png图片转成jpg图片或者格式互转,前端使用js和canvas转换图片的格式;原理: 是使用FileReader来把文件读入内存,并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src;然后通过canvas.toDataURL(t
·
需求中可能有时需要将png图片转成jpg图片或者格式互转,前端使用js和canvas转换图片的格式;
原理: 是使用FileReader来把文件读入内存,并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src;然后通过canvas.toDataURL(type)输出相应格式的图片;
以下代码可直接复制:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="file" id="inputimg">
<select id="myselect">
<option value="1">jpeg格式</option>
<option value="2">webp格式</option>
<option value="3">png格式</option>
</select>
<button id="start">开始转换</button>
<p>预览:</p>
<img id="imgShow" src="" alt="">
</body>
<script>
/*事件*/
document.getElementById('start').addEventListener('click', function () {
getImg(function (image) {
console.log(2);
var can = imgToCanvas(image)
imgshow = document.getElementById("imgShow");
imgshow.setAttribute('src', canvasToImg(can));
});
});
// 把image 转换为 canvas对象
function imgToCanvas(image) {
console.log(3);
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
canvas.getContext("2d").drawImage(image, 0, 0);
return canvas;
}
//canvas转换为image
function canvasToImg(canvas) {
console.log(4);
var array = ["image/jpeg", "image/webp", "image/png"]
type = document.getElementById('myselect').value - 1;
console.log(canvas);
var src = canvas.toDataURL(array[type]);
// console.log(src);
return src;
}
//获取图片信息
function getImg(fn) {
var imgFile = new FileReader();
console.log(1, imgFile);
try {
// 使用FileReader来把文件读入内存,并且读取文件中的数据。 readAsDataURL方法可以在浏览器主线程中异步访问文件系统,读取文件中的数据,且读取后 result 为 DataURL, DataURL 可直接 赋值给 img.src
imgFile.readAsDataURL(document.getElementById('inputimg').files[0]);
console.log(imgFile);
imgFile.onload = function (e) {
console.log(e);
var image = new Image();
image.src = e.target.result; //base64数据
image.onload = function () {
fn(image);
}
}
} catch (e) {
console.log("请上传图片!" + e);
}
}
</script>
</html>
更多推荐
已为社区贡献14条内容
所有评论(0)