如何使用HTML5 Canvas元素来裁剪图像
本文介绍如何使用JavaScript和HTML5 Canvas元素来移动、调整大小和裁剪图像,这些技术适用于图片编辑器、照片分享等应用场景。借助HTML5 Canvas绘图功能,可以在浏览器端以比较简单的方式来实现图像预处理以减少文件上传流量。
代码和在线演示地址:http://wow.techbrood.com/fiddle/2580,可以先操作下,有个整体印象。
构建界面布局和元素
HTML页面由源图片、Crop操作按钮、裁剪矩形框以及图片容器(含4个角的调整小方块)组成,主体代码如下:
<div class="component"> <div class="overlay"> <div class="overlay-inner"> </div> </div> <img class="resize-p_w_picpath" src="/assets/beauty.jpg" alt="p_w_picpath for resizing"> <button class="btn-crop js-crop">Crop<img class="icon-crop" src="/assets/crop.svg"> </button>
</div>
img[class=resize-p_w_picpath] 元素为本服务器图片资源,是要进行调整和裁剪的图片。注意出于安全策略,不能在浏览器中跨域操作图片,否则会出现类似下面的报错信息:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
button[class=btn-crop] 是SVG矢量图标按钮。
div[class=overlay] 元素是裁剪矩形框。
此外图片容器使用JavaScript动态包装在 img[class=resize-p_w_picpath] 元素外部:
// Wrap the p_w_picpath with the container and add resize handles $('.resize-p_w_picpath').wrap('<div class="resize-container"></div>') .before('<span class="resize-handle resize-handle-nw"></span>') .before('<span class="resize-handle resize-handle-ne"></span>') .after('<span class="resize-handle resize-handle-se"></span>') .after('<span class="resize-handle resize-handle-sw"></span>');
实现大小调整的功能
大小调整通过先在Canvas上绘制一个对应大小的图像,接着通过Canvas的toDataURL方法转化为base64编码的字符串形式的图片数据。
最后把该data:URL通过设置为img的src属性,附着到目标图像元素上。
resizeImage = function(width, height){ resize_canvas.width = width; resize_canvas.height = height; resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height); $('.resize-p_w_picpath').attr('src', resize_canvas.toDataURL("p_w_picpath/png")); };
实现移动功能
通过mouseup事件获取新的位置,然后通过jQuery的offset方法来完成元素偏移。
moving = function(e){ var mouse={}; e.preventDefault(); e.stopPropagation(); mouse.x = (e.clientX || e.pageX) + $(window).scrollLeft(); mouse.y = (e.clientY || e.pageY) + $(window).scrollTop(); $container.offset({ 'left': mouse.x - ( event_state.mouse_x - event_state.container_left ), 'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) }); };
实现裁剪功能
这个主要是实现一个居中的覆盖矩形(overlay),接着通过计算背景图片和该覆盖矩形的偏移来获取图片裁剪区域的坐标,
然后再通过Canvas的drawImage和toDataURL完成裁剪图的绘制。
crop = function(){ var crop_canvas, left = $('.overlay').offset().left - $container.offset().left, top = $('.overlay').offset().top - $container.offset().top, width = $('.overlay').width(), height = $('.overlay').height(); crop_canvas = document.createElement('canvas'); crop_canvas.width = width; crop_canvas.height = height; crop_canvas.getContext('2d').drawImage(p_w_picpath_target, left, top, width, height, 0, 0, width, height); window.open(crop_canvas.toDataURL("p_w_picpath/png")); }
最后再加上一些移动功能,如触摸事件(Touch)和手势(Gesture)检测的支持。
转载于:https://blog.51cto.com/12192003/1863725
如何使用HTML5 Canvas元素来裁剪图像相关推荐
- html5canvas绘图空白,html5 canvas toDataURL返回空白图像
我使用以下代码绘制画布并使用toDataUrl将其保存为png图像.html5 canvas toDataURL返回空白图像 body { margin: 0px; padding: 0px; } # ...
- html5 canvas精美花纹背景图像插件
这是一款可以在指定容器中生成精美网页背景花纹图像的js插件.该花纹背景插件使用js来生成html5 canvas,并在其中绘制各种花纹图像.背景花纹图像可以是静态的,也可以制作成动态花纹. 在线演示: ...
- html5 canvas 自定义画图裁剪图片
html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...
- html弄出油画效果,使用HTML5 Canvas实现仿PS图像油画滤镜特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas = document.getElementById("canvas" ...
- html正方形裁剪成圆形,HTML5 Canvas 被圆形裁剪的马赛克
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var w, h, cnt = 0, dir = 1, rd = 0, deg2rads = Math.PI ...
- html5画图论文结束语,基于HTML5 Canvas画图软件的设计与实现.doc
摘要:在最近十年里,HTML5在Web开发标准完成了巨大的飞跃,和以前的版本相比,HTML5不但用来表示Web的内容,而且还把Web带入一个更高的平台.HTML5为我们带来很多新的特性,其中一个最重要 ...
- firefox html5 canvas,html5 Canvas
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以 ...
- html5 Canvas 绘制基本图形 从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形 从绘制直线 到 路径 Jack Lee 的 CSDN 博客 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...
- HTML5 Canvas | w3cschool菜鸟教程
HTML5 Canvas <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.. 在画布上(Canvas)画一个红色矩形,梯度矩形,彩色矩形,和一些彩色的文字. ...
最新文章
- java大作业私人管家系统_操作系统概念(Operating System Concepts)第十版期中大作业...
- mysql 存储过程 显示控制_mysql存储过程之控制语句篇
- adb shell读取返回值_shell学习笔记03(函数amp;shell工具amp;面试题)
- linux内核与用户空间的九种通信机制
- mysql5.6.28安装_mysql5.6.28源码安装
- Cocos2d-x win7 + vs2010 配置图文详解(转)
- flink source和sink
- php增删改查怎么封装,php增删改查封装方法
- 《全唐诗》与《全宋词》
- sqlplus 命令导入数据文件
- K线形态识别—双K线之卖出型双日K线组合
- 一个喷嚏就能传播病毒?关于病毒,还有多少是你不知道的?
- Sap BussinessObjects DesignStudio-infoChart缺陷改进
- Win7搜索之体验!
- 使用C#快速创建KML文件或读取其功能
- redis下载(windows版)
- 火山引擎 RTC 自研音频编码器 NICO 实践之路
- RSA加密解密算法的java实现
- 【C++】读取 .csv / .xlsx 文件中的指定数据(非常实用)
- 数字时代,医疗健康企业如何通过数字营销创造用户价值
热门文章
- 【tensorflow】OP_REQUIRES failed at variable_ops.cc:104 Already exists: Resource
- LeetCode 161. One Edit Distance--Python,Java,C++解法
- js和html以及css的区别,html、css、js中的区别与关系
- Specification使用in
- 解决Ubuntu安装依赖问题
- 头条Android面试题,史上最全的Android面试题集锦(五)
- Tomcat双向Https验证搭建,亲自实现与主流浏览器、Android/iOS移动客户端超安全通信
- 2020身高体重标准表儿童_2020年儿童标准身高体重表发布,对比看看,你家孩子达标了吗?...
- Selenium如何通过location和size定位元素坐标?
- Python测试框架pytest(05)fixture - error和failed、fixture实例化、多个fixture