JavaScript实现浏览器本地的图像移动、大小调整和裁剪

2024-04-09 09:20:53

本文介绍如何使用和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，欢迎初级和进阶的伙伴。

转载于:https://www.cnblogs.com/gongyue/p/7381861.html

JavaScript实现浏览器本地的图像移动、大小调整和裁剪相关推荐

创建用于图像大小调整和裁剪器保持纵横比的ASP.NET控件
目录总览图像尺寸调整算法如何在网页上使用控件? 如何从控件中获取上传的图像? 源代码参考文献总览我们在图像大小调整和裁剪方面存在长期问题.我们的问题是,如果我们在服务器端调整大小,图像质量 ...
image.resize()==＞返回此图像的大小调整后的副本
def resize(self, size, resample=BICUBIC, box=None, reducing_gap=None): """ 作用:Returns ...
调整图像大小调整图片大小
B = imresize(A,scale) B = imresize(A,[numrows numcols]) [Y,newmap] = imresize(X,map,___) ___ = imres ...
php获取图像尺寸大小的方法,Javascript从php生成的图像中获取图像大小
我发现此代码可以在 javascript上获取图像大小: function getImgSize(imgSrc) { var newImg = new Image(); newImg.src = im ...
html中获取浏览器窗口宽度,JavaScript 获取浏览器窗口的大小
简明现代魔法 -> JavaScript -> JavaScript 获取浏览器窗口的大小 JavaScript 获取浏览器窗口的大小 2010-04-16 程序演示: 获取浏览器当前窗口 ...
h5新增浏览器本地缓存localStorage
h5新增属性学习笔记(非原创) html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(se ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue 浏览器本地存储
文章目录 localstorage SessionStorage 总结 TodoList 改为本地存储 localstorage <!DOCTYPE html> <html lang ...
使用JavaScript在浏览器中进行图像分类
by Kevin Scott 凯文·斯科特(Kevin Scott) 使用JavaScript在浏览器中进行图像分类 (Image Classification in the Browser with ...
快来看啊 --- --- --- ＞＞＞＞浏览器本地存储 ~~~
1. 浏览器本地存储方式及使用场景 (1)Cookie Cookie是最早被提出来的本地存储方式,在此之前,服务端是无法判断网络中的两个请求是否是同一用户发起的,为解决这个问题,Cookie就出现了. ...

最新文章

热门文章