Javascript & Typescript学习总结

原创已于 2022-07-10 01:06:23 修改 · 146 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #ajax

于 2022-07-10 01:05:42 首次发布

这篇博客介绍了JavaScript在网页开发中的重要性，作为HTML和CSS的补充，用于控制网页交互。文中通过示例展示了如何使用JavaScript处理文件读取，特别是图片的预览和处理，包括使用FileReader API读取文件，转换为URL，以及在canvas上进行图像裁剪和调整大小的操作。

JavaScript 学习总结

为什么学习 JavaScript?

JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
本教程是关于 JavaScript 及介绍 JavaScript 如何与 HTML 和 CSS 一起工作。
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript示例：

 <script>
        //获取上传按钮
        var input1 = document.getElementById("upload");
        if (typeof FileReader === 'undefined') {
            //result.innerHTML = "抱歉，你的浏览器不支持 FileReader"; 
            input1.setAttribute('disabled', 'disabled');
        } else {
            input1.addEventListener('change', readFile, false);
            /*input1.addEventListener('change',function (e){
     	console.log(this.files);//上传的文件列表
     },false); */
        }

        function readFile() {
            var file = this.files[0]; //获取上传文件列表中第一个文件
            if (!/image\/\w+/.test(file.type)) {
                //图片文件的type值为image/png或image/jpg
                alert("文件必须为图片！");
                return false;
            }
            // console.log(file);
            var reader = new FileReader(); //实例一个文件对象
            reader.readAsDataURL(file); //把上传的文件转换成url
            //当文件读取成功便可以调取上传的接口
            reader.onload = function(e) {
                // console.log(this.result);//文件路径
                // console.log(e.target.result);//文件路径
                /*var data = e.target.result.split(',');
		var tp = (file.type == 'image/png')? 'png': 'jpg';
		var imgUrl = data[1];//图片的url，去掉(data:image/png;base64,)
		//需要上传到服务器的在这里可以进行ajax请求
		// console.log(imgUrl);
		// 创建一个 Image 对象 
		var image = new Image();
		// 创建一个 Image 对象 
		// image.src = imgUrl;
		image.src = e.target.result;
		image.onload = function(){
			document.body.appendChild(image);
		}*/
                var image = new Image();
                // 设置src属性 
                image.src = e.target.result;
                var max = 200;
                // 绑定load事件处理器，加载完成后执行，避免同步问题
                image.onload = function() {
                    // 获取 canvas DOM 对象 
                    var canvas = document.getElementById("cvs");
                    // 如果高度超标 宽度等比例缩放 *= 
                    /*if(image.height > max) {
				image.width *= max / image.height; 
				image.height = max;
			} */
                    // 获取 canvas的 2d 环境对象, 
                    var ctx = canvas.getContext("2d");
                    // canvas清屏 
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    // 重置canvas宽高
                    /*canvas.width = image.width;
			canvas.height = image.height;
			if (canvas.width>max) {canvas.width = max;}*/
                    // 将图像绘制到canvas上
                    // ctx.drawImage(image, 0, 0, image.width, image.height);
                    ctx.drawImage(image, 0, 0, 200, 200);
                    // 注意，此时image没有加入到dom之中
                };
            }
        };
    </script>