HTML5动画----canvas基础8（图片操作与图片压缩）

最新推荐文章于 2024-05-17 12:05:42 发布

wenmin1987

最新推荐文章于 2024-05-17 12:05:42 发布

阅读量830

点赞数

分类专栏： HTML5动画文章标签：图片操作图片压缩

本文链接：https://blog.csdn.net/wenmin1987/article/details/108046378

版权

HTML5动画专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端JS利用canvas的drawImage()对图片进行压缩：

https://blog.csdn.net/qq_43043859/article/details/90600563

[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)：

https://blog.csdn.net/weixin_34177064/article/details/85944037

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
   </head>
   <body>
<input id="file" type="file">
<img id="ceshi">
<img id="ceshi1">
<script>
//JS代码：
var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

// base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 400, maxHeight = 400;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if ((originWidth > maxWidth) || (originHeight > maxHeight)) {
if ((originWidth/originHeight)>(maxWidth / maxHeight)) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}

// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
//本地预览
var type = 'image/jpeg';
//第一种：将canvas元素中的图像转变为DataURL
var dataurl = canvas.toDataURL(type);
$("#ceshi1").attr("src",dataurl);

//第二种
//抽取DataURL中的数据部分，从Base64格式转换为二进制格式
var bin = atob(dataurl.split(',')[1]);
//创建空的Uint8Array
var buffer = new Uint8Array(bin.length);
//将图像数据逐字节放入Uint8Array中
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
//利用Uint8Array创建Blob对象
var blob = new Blob([buffer.buffer], {type: type});
var url = window.URL.createObjectURL(blob);
$("#ceshi").attr("src",url);


// canvas转为blob并上传
canvas.toBlob(function (blob) {
// 图片ajax上传
var xhr = new XMLHttpRequest();
// 文件上传成功
xhr.onreadystatechange = function() {
if (xhr.status == 200) {
// xhr.responseText就是返回的数据
}
};
// 开始上传
xhr.open("POST", 'upload.php', true);
xhr.send(blob);
}, file.type || 'image/png');
};

// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);

}
});
</script>

<script>
    //这段代码是后台返回的bin（二进制流）前端展示
    let xhr = new XMLHttpRequest()
let fileName = 'file.docx' // 文件名称
xhr.open('GET', Api, true)
xhr.responseType = 'arraybuffer'
xhr.setRequestHeader(token, 'xxxxx') // 请求头中的验证信息等（如果有）
xhr.onload = function() {
if (this.status === 200) {
let type = xhr.getResponseHeader('Content-Type')
//把后台返回的二进制流this.response,转成Blob对象
let blob = new Blob([this.response], {type: type})
if (typeof window.navigator.msSaveBlob !== 'undefined') {
/*
* IE workaround for "HTML7007: One or more blob URLs were revoked by closing
* the blob for which they were created. These URLs will no longer resolve as
* the data backing the URL has been freed."
*/
window.navigator.msSaveBlob(blob, fileName)
} else {
let URL = window.URL || window.webkitURL
let objectUrl = URL.createObjectURL(blob)
if (fileName) {
var a = document.createElement('a')
// safari doesn't support this yet
if (typeof a.download === 'undefined') {
window.location = objectUrl
} else {
a.href = objectUrl
a.download = fileName
document.body.appendChild(a)
a.click()
a.remove()
}
} else {
window.location = objectUrl
}
}
}
}
xhr.send()
</script>

   </body>
</html>

wenmin1987

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5动画----canvas基础8（图片操作与图片压缩）

前端JS利用canvas的drawImage()对图片进行压缩：https://blog.csdn.net/qq_43043859/article/details/90600563[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)：https://blog.csdn.net/weixin_34177064/article/details/85944037...
复制链接

扫一扫

专栏目录