您当前的位置:网站首页>JS>了解JavaScript智能切图脚本 找JS教程就上ki4.cc (>^ω^<),智能切图脚本

了解JavaScript智能切图脚本 找JS教程就上ki4.cc (>^ω^<),智能切图脚本

2020年06月18日 投稿作者: 围观人数:23

JavaScript事件委托的技术原理 找JS教程就上ki4.cc (>^ω^<)

如今的JavaScript技术界里最火热的一项技术应该是‘事件委托(event delegation)’了。使用事件委托技术能让你避免对特定的每个节点添加事件监听器;相反,事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。

图片可以让页面更有吸引力,尤其是处理的恰当的时候,但问题是,图片的处理是个麻烦事情,它的创建和裁剪对于一个普通人来说是个困难的任务,尤其是那些自己上传图片的用户,比如头像图片,logo图片,有可能是各式各样的图片格式,大小不一的图片尺寸。

最近发现了一个有趣的浏览器端智能处理图片的JavaScript脚本,smartcrop.js,它能智能的分析图片的内容,识别出图片的主体内容和人像、人脸,我可以用它轻松的将一个图片裁剪成合适大小,让人物、人脸或图景主体等最重要的部分突出,裁剪掉多余的部分。

观看演示

下面是一个样本,使用了两张Lady GaGa的照片,经过使用smartcrop.js处理后,使得两张图片非常适合做头像照片,图片中的头像放到了正中。

用JavaScript获取图片的真实尺寸大小的方法详解 找JS教程就上ki4.cc (>^ω^<)

我们需要每个图片的自己的尺寸,我们可以在服务端编辑时声明图片的原始尺寸,而一种更灵活的方式是通过在页面上放一段js来动态的获取图片的原始大小尺寸,动态改变图片的显示大小。

观看演示

这个js工具脚本的调用方法十分的简单,只需要几行代码就能生效。

SmartCrop.crop(image, {width: 100, height: 100}, function(result){console.log(result);});
// {topCrop: {x: 300, y: 200, height: 200, width: 200}}

详细的介绍请查看它的官方文档,也可以下载它的源代码理解它的工作原理。

推荐教程:《javascript基础教程》

以上就是了解JavaScript智能切图脚本的详细内容,更多请关注ki4导航其它相关文章!

使用async属性异步加载执行JavaScript的方法 找JS教程就上ki4.cc (>^ω^<)

我们以前一直在使用placeholders,但以前必须要用JavaScript实现而HTML5里给JavaScript标记提供的async属性,使JavaScript能异步加载执行,本文将详细介绍该功能。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.