Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >从零开始编码jQuery/javascript中的图像裁剪器和大小器(同时)?

从零开始编码jQuery/javascript中的图像裁剪器和大小器(同时)?
EN

Stack Overflow用户
提问于 2012-12-18 01:49:47
回答 1查看 1.1K关注 0票数 15

我们正在编写一个相当简单的Javascript (jQuery)图像裁剪器和大小器。基本上,就目前而言,只需要和调整大小的特性。

我一直在检查一些jQuery插件,如JCrop等,而且似乎没有插件同时执行的操作。许多裁剪器大小,但不是这两个功能在同一个“自然”图像视图在同一时间。当然,我的意思是这样的例子(右下角)对用户的视觉效果不太好:

http://jsfiddle.net/opherv/74Jep/33/

虽然我想这是同时拥有这两个特性的一种可能的方式。虽然您可以看到这个例子目前只放大了很多,但作者自己却将其限定为使用“丑陋的黑客”:

代码语言:javascript
运行
AI代码解释
复制
function changeZoom(percent){
    var minWidth=viewport.width();
    var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
    var newHeight= newWidth/orgRatio;
    var oldSize=[img.width(),img.height()];

    img.css({ width: newWidth+"px", height: newHeight+"px" });

    adjustDimensions();

    //ugly hack :(
    if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
        img.css({ left: dragcontainer.width()-img.width() +"px" });  
    }
    if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
        img.css({ top: dragcontainer.height()-img.height() +"px" });  
    } 
}

我们正在寻找的可能性是使用裁剪帧/区域(正如我们在网络上看到的)+图像上的缩放/去缩放选项(例如,图像边框上的句柄)。

因为我们只需要这两个特性,所以我们认为我们应该从头开始编写这段代码,或者几乎因为我们不想添加其他javascript文件/插件(无论如何,这些文件/插件)都会被打包到我们不需要的其他特性中(至少目前是这样)。

的问题是:用简单的句柄对图像的显示进行编码有什么特殊的困难吗?通过一个框架/区域选择(它本身也是可重放的,这样用户就可以微调他想要的图像的哪一部分)?

我们是否可以更好地将这两个特性分开呢?

非常感谢你的帮助。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-12-19 23:44:23

试过这个插件??

http://code.google.com/p/resize-crop/

它兼具作物和调整尺寸的功能。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13930239

复制
相关文章
jQuery 图像裁剪插件Jcrop
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。 Jcrop是一款免费的软件,采用MIT License发布。
静默虚空
2018/01/05
1.8K0
jQuery 图像裁剪插件Jcrop
[记]使用jQuery Jcrop 图像裁剪无法更换图片的坑
​ 因为公司需求,需要完成一个显示屏定制的业务,用户自主上传图片然后在线裁剪的功能,我选择了jQuery Jcrop这个插件。 先看看怎么使用 使用方法 载入 CSS 文件 <link rel="stylesheet" href="jquery.Jcrop.css"> 载入 JavaScript 文件 <script src="jquery.js"></script> <script src="jquery.Jcrop.js"></script> 给 IMG 标签加上 ID <img id="e
游魂
2018/06/08
1.7K0
[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画
之前在 这篇文章 里,我介绍了如何使用UIElement.Clip裁剪UIElement的内容,使用代码如下:
dino.c
2019/12/12
7960
[UWP]使用CompositionGeometricClip裁剪复杂图形及进行动画
使用Python对视频任意矩形区域进行裁剪
功能描述: 裁剪视频任意矩形区域。 参考代码: 运行方式,切换到cmd执行程序:
Python小屋屋主
2020/04/01
1.1K0
Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存
前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcrop 后端: Django, Pillow
zhaoolee
2018/04/19
1.5K0
Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存
使用libyuv对YUV数据进行缩放,旋转,镜像,裁剪等操作
在Android做过自定义Camera的朋友应该都知道,我们可以通过public void onPreviewFrame(byte[] data, Camera camera)回调中获取摄像头采集到的每一帧的数据,但是这个byte[] data的数据格式YUV的,并不能直接给我们进行使用,那么该通过什么样的方法对这个YUV数据进行处理呢?
音视频开发进阶
2020/07/15
4.9K0
使用libyuv对YUV数据进行缩放,旋转,镜像,裁剪等操作
nodejs图片裁剪、水印(使用images)
/** * Created by chaozhou on 2015/9/21. */ var images = require("images"); /** * 缩放图像 * @param
用户1141560
2017/12/26
2.3K0
ThinkPHP-图片上传和裁剪
图片上传是指将本地计算机中的图片传输到服务器上。在 ThinkPHP 中,我们可以使用 PHP 自带的 $_FILES 变量来实现图片上传。具体步骤如下:
堕落飞鸟
2023/05/03
1.2K0
项目资源太紧张了,如何根据map信息进行功能裁剪和优化?
前阵子开源了一个基于TencentOS tiny物联网操作系统的危险气体探测仪项目,截止目前在Gitee上斩获了24个Star以及8个Fork,该项目也成功被Gitee官方推荐为优质开源项目。
杨源鑫
2020/11/25
6210
项目资源太紧张了,如何根据map信息进行功能裁剪和优化?
Android图片裁剪之自由裁剪
  客户的需求都是非常怪的。我有时候在给客户做项目的时候就想骂客户是sb。可是请你相信我,等你有需求,自己变成客户的时候,给你做项目的哥哥肯定也会骂你是sb。
全栈程序员站长
2022/07/12
2.6K0
Android图片裁剪之自由裁剪
全志Tina Linux 系统裁剪 boot0裁剪 uboot裁剪 内核裁剪 文件系统裁剪 C库裁剪 文件系统压缩
嵌入式产品往往为了压缩成本而使用较小的flash存储器,因此可能需要对系统进行裁剪来减少对flash的占用。系统经过裁剪过后,通常也会提升启动速度以及减少内存占用。 本文介绍TinaLinux中系统裁剪的方法,为有裁剪需求的使用者提供参考。
韦东山
2022/12/28
8.8K0
小型电裁剪刀_手动裁剪
由于简书经常打不开,或者打开慢,不靠谱,还是把文章迁移到CSDN吧。 简书链接:https://www.jianshu.com/p/8c6508cab763 有时候想对摄像头采集的视频流进行区域裁剪,可以使用libyuv这个库,原理就是先把NV12转换为i420,对i420做裁剪,然后再把i420转换为NV12,NV12再转换为CVPixelBufferRef,CVPixelBufferRef再转换为CMSampleBufferRef。
全栈程序员站长
2022/11/08
1.5K0
java开发_jcrop_网页截图工具(插件)
===========================================
Hongten
2018/09/13
1.3K0
java开发_jcrop_网页截图工具(插件)
CropBox实现功能相对较少,操作更简单
流的前端jQuery 图像裁剪插件有Jcrop和CropBox,前者是将原图和需要裁剪的参数(裁剪的各点坐标,旋转角度等)传到后台,然后由后台完成实际的裁剪和后续操作。 CropBox实现功能相对较少,但操作更简单,它的原理是: 将裁减后的图片通过base64编码,然后转化为blob格式发送到服务器,服务器完成解码即可,官网介绍可以看github上的说明和Demo 核心js函数只有两个: getDataURL 将裁剪后的图片简单以base64编码后的结果,用于实时预览,当然也可以将它直接传到服务器,然后解码为png格式 getBlob 上传图片为Blob格式
用户1503405
2021/10/07
4630
使用KNN进行分类和回归
一般情况下k-Nearest Neighbor (KNN)都是用来解决分类的问题,其实KNN是一种可以应用于数据分类和预测的简单算法,本文中我们将它与简单的线性回归进行比较。
deephub
2022/11/11
1K0
使用KNN进行分类和回归
JAVA通过BufferedImage进行图片的绘制,缩放,裁剪,水印等操作
最近开发当中,通过JAVA对图片进行了很多的操作,之前很少接触这方面的知识,特此记录下来
海加尔金鹰
2020/06/08
13.2K0
Basemap系列教程:使用 shapefiles 文件裁剪栅格
此例使用了STRM的海拔数据。只要了解一下网站设置,很容易使用 ,当然也可以直接下载数据[注1-2]。
bugsuse
2020/04/20
1.8K1
图像裁剪
PNG (460, 460) RGB {'srgb': 0, 'gamma': 0.45455, 'dpi': (96, 96)} None
裴来凡
2022/05/29
1.7K0
图像裁剪
点击加载更多

相似问题

Carrierwave和Jcrop和Devise,Jcrop不裁剪

11

使用Jcrop和Imagemagick裁剪图像

21

使用jcrop和java裁剪图像

20

使用JCrop裁剪多张图片

11

JCrop裁剪的宽度和高度

12
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文