本文介绍如何使用和HTML5 Canvas元素来移动、调整大小和裁剪图像,这些技术适用于图片编辑器、照片分享等应用场景。

一般而言图像的剪裁会放在服务端进行,但是图片传送会消耗较多的流量。借助HTML5 Canvas绘图功能,可以在浏览器端以比较简单的方式来实现。

界面截图如下:

构建界面布局和元素

HTML页面由源图片Crop操作按钮裁剪矩形框以及图片容器(含4个角的调整小方块)组成,主体代码如下:

img[class=resize-image] 元素为本服务器图片资源,是要进行调整和裁剪的图片。注意出于安全策略,不能在浏览器中跨域操作图片,否则会出现类似下面的报错信息:

button[class=btn-crop] 是SVG矢量图标按钮。

div[class=overlay] 元素是裁剪矩形框。

此外图片容器使用JavaScript动态包装在 img[class=resize-image] 元素外部:

 javascript技术交流群:499415298,欢迎初级和进阶的伙伴。
实现大小调整的功能

大小调整通过先在Canvas上绘制一个对应大小的图像,接着通过Canvas的toDataURL方法转化为base64编码的字符串形式的图片数据。最后把该data:URL通过设置为img的src属性,附着到目标图像元素上。

实现移动功能

通过mouseup事件获取新的位置,然后通过的offset方法来完成元素偏移。

实现裁剪功能

这个主要是实现一个居中的覆盖矩形(overlay),接着通过计算背景图片和该覆盖矩形的偏移来获取图片裁剪区域的坐标,

然后再通过Canvas的drawImage和toDataURL完成裁剪图的绘制。

​最后再加上一些移动功能,如触摸事件(Touch)和手势(Gesture)检测的支持。

javascript技术交流群:499415298,欢迎初级和进阶的伙伴。

JavaScript实现浏览器本地的图像移动、大小调整和裁剪的更多相关文章

  1. 使用JavaScript开发IE浏览器本地插件实例

    使用JavaScript开发IE浏览器本地插件实例 投稿:junjie 字体:[增加 减小] 类型:转载 时间:2015-02-18我要评论 这篇文章主要介绍了使用JavaScript开发IE浏览器本 ...

  2. JavaScript浏览器本地数据存储

    浏览器本地存储主要使用的是sessionStorage和localStorage.两者都支持,sessionStorage保存的是浏览器和服务器的一次对话信息,只在一次回话中有效.当在新标签页或新窗口 ...

  3. JavaScript:浏览器的本地存储

    cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...

  4. JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串、blob对象在上传

    主题: JavaScript把项目本地的图片或者图片的绝对路径转为base64字符串.blob对象在上传. 用处: 从本地选择图片上传,如项目规定只能选择本项目文件夹下的图像上传为头像等. 主要思想: ...

  5. JavaScript判断浏览器类型及版本

    JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...

  6. 浏览器本地数据存储解决方案以及cookie的坑

    本地数据存储解决方案以及cookie的坑 问题: cookie过长导致页面打开失败 背景: 在公司的项目中有一个需求是打开多个工单即在同一个页面中打开了多个tab(iframe),但是需要在刷新时只刷 ...

  7. Nginx(五):浏览器本地缓存设置

    浏览器缓存(BrowserCaching) 浏览器缓存是为了加速浏览,浏览器在用户磁盘上,对最近请求过的文档进行存储.当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样,就可以加速页面的 ...

  8. JavaScript的DOM操作获取元素实际大小

    clientWidth 和 clientHeight 这组属性可以获取元素可视区的大小,可以得到元素内容及内边距所占据的空间大小. 返回了元素大小,但没有单位,默认单位是 px,如果你强行设置了单位, ...

  9. 用于浏览器本地存储的js插件 - jStorage

    简介 jStorage是一个跨浏览器的将key-value类型的数据存储到浏览器本地存储的js插件——jStorage支持所有主流浏览器,PC机(甚至包括是IE6)和移动终端均可用.此外,jStora ...

随机推荐

  1. Visiual Studio CLR20r3

    问题事件名称: CLR20r3     解决方法:   步骤1:开始-->所有程序-->Microsoft Visual Studio 2012-->Visual Studio To ...

  2. H5 data-*容易忽略的问题

    H5添加了data-*属性,非常方便 但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了 测试代码如下: <html> <head> <script ...

  3. Vijos 1007 绕钉子的长绳子

    背景 平面上有N个圆柱形的大钉子,半径都为R,所有钉子组成一个凸多边形. 现在你要用一条绳子把这些钉子围起来,绳子直径忽略不计. 描述 求出绳子的长度 格式 输入格式 第1行两个数:整数N(1< ...

  4. CSS三种引入方式:内联、页级、外联

    1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...

  5. XML文件的创建和解析笔记

    解析XML的四种方法 XML现在已经成为一种通用的数据交换格式,它的平台无关性,语言无关性,系统无关性,给数据集成与交互带来了极大的方便.对于XML本身的语法知识与技术细节,需要阅读相关的技术文献,这 ...

  6. C# 调用.exe文件

    process da = new process(); da.startinfo.filename = @""D:\BM0002\BM0002.exe";  //要调用的 ...

  7. Protobuf动态解析在Java中的应用 包含例子程序

    最近在做ProtoBuf相关的项目,其中用到了动态解析,网上看了下相关资料和博文都比较少,自己来写一个记录一下学习过程.   Protocol Buffers是结构化数据格式标准,提供序列化和反序列方 ...

  8. Java并发编程笔记——技术点汇总

    目录 · 线程安全 · 线程安全的实现方法 · 互斥同步 · 非阻塞同步 · 无同步 · volatile关键字 · 线程间通信 · Object.wait()方法 · Object.notify() ...

  9. 第一章:火狐浏览器 : 环境配置: FireFox 版本38 + jdk 7 + selenium 2.53.6 + selenum-version 2.48.2

    配置一套完整的 selenium + Java + Firefox38  环境: 1. 火狐浏览器的版本 : 38 2. JDK 安装 1.7 版本的 3. 安装 Python 的版本是 2.7 4. ...

  10. Hibernate 实体关联关系映射----总结

    在我看来,Hibernate提供这些映射关系,常用就是一对一和多对一,并且在能不用连接表的时候尽量不要用连接表.多对多会用到,如果用到了,应该首先考虑底层数据库设计是否合理.   在实际开发中,在Hi ...