HTML5图片canvas等比例缩放后上传

最新推荐文章于 2024-09-25 19:30:02 发布

smartsmile2012

最新推荐文章于 2024-09-25 19:30:02 发布

阅读量4.5k

点赞数

分类专栏： Asp.net & C# HTML & CSS

本文链接：https://blog.csdn.net/smartsmile2012/article/details/72301102

版权

该博客介绍了一种使用HTML5处理图片的方法，通过JavaScript实现图片等比例缩放，然后使用canvas将处理后的图片上传。在上传过程中，先使用FileReader API读取图片数据，再利用canvas进行等比例压缩，最后通过Ajax将图片数据发送到服务器进行保存。

摘要由CSDN通过智能技术生成

<html>
<head>
    <title>图片等比例缩放后上传</title>
    <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
    <script src="/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            function decodeUnicode(str) {
                return unescape(unescape(str.replace(/\\u/g, '%u')));
            }

            $("#pic").change(function () {
                var _this = $(this)[0], _file = _this.files[0], fileType = _file.type;
                console.log(_file.size);
                console.log(_file.type)
                if (/image\/\w+/.test(fileType)) {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(_file);
                    fileReader.onload = function (event) {
                        var result = event.target.result;   //返回的dataURL
                        var image = new Image();
                        image.src = result;
                        image.onload = function () {  //创建一个image对象，给canvas绘制使用
                            var cvs = document.createElement('canvas');
                            var scale = 1;
                            var tt = 1000; //只是示例，可以根据具体的要求去设定
                            if (this.width > tt || this.height > tt) {
                                if (this.width > this.height) {
                                    scale = tt / this.width;
                                } else {
                                    scale = tt / this.height;
                                }
                            }
                            cvs.width = this.width * scale;
                            cvs.height = this.height * scale;     //计算等比缩小后图片宽高
                            var ctx