剪切上传图片源码

图像批量增强之翻转、缩放、旋转、剪裁(附python源码) 本文主要介绍了几种图像增强的办法,包括图像的翻转,缩放,旋转和剪裁,重点在对代码的调用以此来达到自己的目的,相信读到这里的朋友们应该可以熟练的使用本文所介绍的几个函数以及它们的参数咱们调整变为适合你们自己的。当然代码并不能够解决所有关于图片的问题,有好想法的兄弟们也欢迎在评论区交流。 阅读详情


在交友类网站经常见到以上这种制作上传头像的效果,在网上找了个js剪切效果,现加上上传完善了一下。

整体源码下载

 

客户端js不能操作文件,所以只能先上传图片再在服务器端剪切。

1、上传图片

2、js剪切图片(其实只是选取要剪切的部分)

3、服务器端剪切

     (1)在页面的cs文件中剪切。须放几个隐藏控件以便回传js选取的坐标。

其中剪切图片源码:


using System;
using System.Collections.Generic;
using System.Text;
using System.Drawing;

public class Cut
{
    
/// <summary>
    
/// 裁剪图片
    
/// </summary>
    
/// <param name="sourceImg">原图片路径</param>
    
/// <param name="desImg">裁剪图片路径</param>
    
/// <param name="left">X</param>
    
/// <param name="top">Y</param>
    
/// <param name="width">宽</param>
    
/// <param name="height">高</param>
    public static void CutImage(string sourceImg, string desImg, int left, int top, int width, int height)
    {
        System.Drawing.Image img 
= System.Drawing.Bitmap.FromFile(sourceImg);
        System.Drawing.Image imgToSave 
= new System.Drawing.Bitmap(width, height);
        System.Drawing.Graphics g 
= System.Drawing.Graphics.FromImage(imgToSave);
        RectangleF sourceRect 
= new RectangleF(left, top, width, height);
        RectangleF destinationRect 
= new RectangleF(0, 0, width, height);

        g.DrawImage(img,
                    destinationRect,
                    sourceRect,
                    GraphicsUnit.Pixel
                    );
        g.Save();
        imgToSave.Save(desImg, System.Drawing.Imaging.ImageFormat.Jpeg);
        g.Dispose();
        imgToSave.Dispose();
        img.Dispose();
    }


}

 

     (2)在ashx中剪切,可回传文件流。用参数传递坐标。



using System;
using System.Web;
using System.Drawing;
using System.IO;

public class ImgCropper_WebHandler : IHttpHandler
{
    
public void ProcessRequest(HttpContext context)
    {
        
string Pic = Convert.ToString(context.Request["p"]);
        
int PointX = Convert.ToInt32(context.Request["x"]);
        
int PointY = Convert.ToInt32(context.Request["y"]);
        
int CutWidth = Convert.ToInt32(context.Request["w"]);
        
int CutHeight = Convert.ToInt32(context.Request["h"]);
        
int PicWidth = Convert.ToInt32(context.Request["pw"]);
        
int PicHeight = Convert.ToInt32(context.Request["ph"]);

        context.Response.ContentType 
= "image/jpeg";
        ResetImg(context, System.Web.HttpContext.Current.Server.MapPath(Pic), PicWidth, PicHeight, PointX, PointY, CutWidth, CutHeight).WriteTo(context.Response.OutputStream);
    }

    
public MemoryStream ResetImg(HttpContext context, string ImgFile, int PicWidth, int PicHeight, int PointX, int PointY, int CutWidth, int CutHeight)
    {
        Image imgPhoto 
= Image.FromFile(ImgFile);
        Bitmap bmPhoto 
= new Bitmap(CutWidth, CutHeight, System.Drawing.Imaging.PixelFormat.Format24bppRgb);

        Graphics gbmPhoto 
= Graphics.FromImage(bmPhoto);
        gbmPhoto.DrawImage(imgPhoto, 
new Rectangle(0, 0, CutWidth, CutHeight), PointX * imgPhoto.Width / PicWidth, PointY * imgPhoto.Height / PicHeight, CutWidth * imgPhoto.Width / PicWidth, CutHeight * imgPhoto.Height / PicHeight, GraphicsUnit.Pixel);

        
//保存图片到服务器
        bmPhoto.Save(context.Server.MapPath("upload/") + Guid.NewGuid() + ".jpg", System.Drawing.Imaging.ImageFormat.Jpeg);

        
//生成文件流回传
        MemoryStream ms2 = new MemoryStream();
        bmPhoto.Save(ms2, System.Drawing.Imaging.ImageFormat.Jpeg);

        imgPhoto.Dispose();
        gbmPhoto.Dispose();
        bmPhoto.Dispose();

        
return ms2;
    }


    
public bool IsReusable
    {
        
get
        {
            
return false;
        }
    }
}
源码下载
html5手机端图片上传裁剪代码.zip html5手机端图片上传裁剪代码是一款实用的手机移动端图片裁剪插件,支持缩放。 立即下载

相关推荐

cropper.js 裁剪图片并上传代码实例

Cropper也是一款图片裁剪jQuery插件,stars数量1k+,是杭州的前端工程师Fengyuan Chen所写的,功能也相当丰富,裁剪时还可以对原图进行旋转。 cropper.js,main.js,cropper.css,main.css

vue 实现剪裁图片并上传服务器

效果图 预览链接点击预览 需求 [x] 预览:根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪:移动裁剪框右侧预览区域可实时预览 [x] 上传&清空:点击确认上传裁剪图片,点击取消按钮清空图像 [ ] 裁剪框可调节大小 实现步骤 methods:funName() - 对应源码中methods中的funName方法 data:dataName -...

突维 1024

Tesseral 建立地震模型

0. 前言 本节内容主要是总结如何使用 Tesseral 工具建立模型。 1. 模型建立步骤 设置模型的宽度和深度 此处默认都为1000,之后点击“确定” 建立地层 绘制新的地层 右键点击“New polygon” 绘制地层,设置第二个层的名字和纵波速度 绘制第三层,第三层覆盖在前一个层上 第四层如上,第四层如果是最后一层,绘制该层时,要将深度1000包围。 设置观测系统 设置炮点 设置子波为雷克子波,频率设置为30 检波点设置 运行模型 设置好如上选择后,

weixin_41857483的博客 6539

php裁图之后变成横向的,PHP图像裁剪缩略裁切类源码及使用方法

最近在做网页拖拽验证码的开源项目,需要在服务端生成图片对应的可移动的色块,但是网上的资源都是做缩略图,对整个图片进行缩放的,所以自己动手,完成了对图片进行裁剪小块的工具namespace App\Libs;/*** 2016-01-07 15:54:58* Lixiaoyu** mode 1 : 强制裁剪,生成图片严格按照需要,不足放大,超过裁剪,图片始终铺满* mode 2 : 和1类似,但不足...

weixin_39847099的博客 228

ESP32 驱动 SYN6288 语音合成:Arduino IDE 下实现中文数字混合文本的智能播报

本文详细介绍了如何在Arduino IDE环境下使用ESP32驱动SYN6288语音合成模块,实现中文数字混合文本的智能播报。通过硬件选型、开发环境搭建、编码转换原理、命令帧构造及串口通信实战等步骤,帮助开发者快速掌握语音播报技术。文章还提供了混合文本处理技巧和常见问题排查方法,适合智能硬件开发者参考。

weixin_42553471的博客 448

告别臃肿VS!仅用Visual Studio 2022 Build Tools为Qt 5.12.12配置MSVC2017开发环境

本文详细介绍了如何仅使用Visual Studio 2022 Build Tools为Qt 5.12.12配置MSVC2017开发环境,避免安装臃肿的完整VS。通过精准选择组件、配置Qt Creator编译器和优化Kit设置,实现高效、精简的Windows平台Qt开发环境搭建,特别适合追求性能和资源优化的开发者。

weixin_30340617的博客 350

php图片制作源码,php进行图片裁剪及生成缩略图程序源代码

我们经常会遇到对图像进行裁剪动作,下面这段代码就是裁剪的源码处理方法是:1.当原图的宽或高任一比规定的尺寸小,只进行等比缩略处理,2.当原图的宽与高都比规定尺寸大,先进行等比缩略处理,然后算出居中位置进行裁剪/** $o_photo 原图路径* $d_photo 处理后图片路径* $width 定义宽* $height 定义高* ...

weixin_39521520的博客 314

微信DAT图片恢复全攻略:从文件路径到批量解密(附最新工具下载)

本文详细介绍了微信DAT图片恢复的全过程,从文件路径定位到批量解密操作,帮助用户高效恢复加密存储的图片。文章涵盖新旧版本微信的存储结构差异,推荐使用专业解密工具进行批量转换,并提供了提升恢复成功率的实用技巧和常见问题解决方案。

weixin_29325007的博客 455

uniapp uview裁剪组件源码修改(u-avatar-cropper),裁出可自定义固定大小图片

【代码】uniapp uview裁剪组件源码修改,裁出固定大小图片。

m0_49083276的博客 1992

一文介绍Linux EAS

EAS只在系统负载不重时,即系统中每个CPU的利用率都低于其算力的80%时才被启用,而且选出的最节能CPU只有比线程当前运行的CPU节约能量大于6%时,线程才会迁移到该CPU运行。因此EAS为线程选择最节约能量的CPU来运行的前提条件是很苛刻的,针对重载场景(比如游戏),EAS的功能应该很少被使用起来,针对重载场景的功耗优化,这里可能是一个值得尝试的点。算力(capacity)是CPU调度中的一个基础概念,它反映的是一个CPU的计算能力,是个规格化的值,可以通过读取Android手机的文件节点。

youzhangjing_的博客 1234

如何利用DeepSeek自动生成PLC程序?

在工业自动化领域,PLC是核心控制设备,其编程效率和质量直接影响生产线的运行效果。 然而,传统PLC编程依赖工程师手动编写代码,不仅耗时耗力,还容易出错。通过自动生成PLC程序,DeepSeek不仅大幅提升了编程效率,还优化了代码质量。 那么DeepSeek到底能否自动生成PLC程序呢? 有位电气工程师就尝试让DeepSeek设计一套五层电梯控制系统的PLC程序,下面就让我们看看吧。 技术原理:DeepSeek如何实现自动编程DeepSeek利用自然语言处理技术,将工程师输入的文本指令转换为PLC代码。例

Qinmingyue13的博客 6178

扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

扩展element-ui el-upload组件,实现复制粘贴上传图片文件,带图片预览功能

qq790455894的博客 5825

ONNX Runtime C# YOLO全链路压测:从300ms到22ms的15个底层优化技巧

摘要:本文分享了工业质检场景下C#调用YOLOv8s ONNX模型的性能优化实战经验。原始单帧推理耗时300ms无法满足产线需求,通过全链路分析定位瓶颈(预处理85ms、推理180ms、后处理30ms)。重点优化措施包括:使用OpenCVSharp CUDA加速预处理(85ms→12ms),开启ONNX Runtime ALL级别图优化,选用TensorRT执行提供程序(180ms→22ms),以及优化内存管理和线程调度。最终实现单帧总耗时22ms±2ms,GPU利用率提升至85%,完整满足产线120块板/

2601_94871597的博客 402

Ueditor更改上传路径及自动删除不需要的图片

Ueditor更改上传路径及自动删除不需要的图片 最近项目需要用到富文本编辑,但是Ueditor默认图片保存在项目路径下,而且图片上传成功后不能获取到上传图片的路径(可能是本人未发现),这样就不好定位上传的图片做后期的删除操作,查阅资料拿了很多大神的代码成功后总结一下。 步骤如下 下载相应源码 更改源码,更改上传路径 做后端删除处理 直接在项目创建相应的包并用自己的代码覆盖即可。 confi...

qq_38454673的博客 1700

康耐视visionpro-CogBlobTool工具详细说明

康耐视visionpro-CogBlobTool工具详细说明

视觉人机器视觉的博客 1726

迈瑞BS系列全自动生化分析仪LIS协议接口手册(内含HL7和ASTM)

迈瑞BS系列全自动生化分析仪LIS协议接口手册,内含HL7和ASTM)

分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

2016-08-05更新: 下方的代码是比较OLD的了,是通过js进行图片的剪切 旋转 再生成,效率较低。 后来又整合了一个利用native.js本地接口的压缩代码 ,链接在这 。页面中有详细的说明,需要的童鞋们可以参考以下。 源码地址 https://github.com/phillyx/MUIDemos/tree/dce9283ea3e0726ccff0e8ef5b25f...

weixin_30469895的博客 180

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

让你的电脑也识得二维码图片(二)

让你的电脑也识得二维码图片(二)继续主要问题获取图片新的思路实现右键最后 继续 之前写了一份能够让电脑识别二维码图片的脚本,详细参见《让你的电脑也识得二维码图片(一)》 虽然已经可以做到比较方便的识别电脑上的二维码,但是还是需要将二维码图片下载到本地,然后才能识别,这就比较麻烦,正所谓没有最懒只有更懒,懒是人类进步的源泉。我便想能不能不用下载到本地就可以识别,并且让出现在所有场景下的二维码均可识别。 尝试了一些思路,都比较复杂,不易实现。 主要问题 获取图片 要实现不下载就识别,如何获取到图片是一个问题,

h2763246823的博客 1502

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Word图片上传控件+整合富文本

让富文本编辑器支持复制doc中多张图片直接粘贴上传 Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难,因为Ueditor本身不支持,粘贴后直接就是空白,这里面一定有原因。 好,开始尝试UMeditor,Chrome只能获得本地路径,无...

Mr_Zang666的博客 350

php带截切图片上传_php+croppic.js实现剪切上传图片功能

最近需要实现裁剪图片上传,想起之前公司用到的一个插件,却不知道叫什么名字了。在网上找了有些时间,最终找到了这个网站。因为官网文档全部都是英文,所以看起来有些吃力,可以大概看懂80%,但是缺少详细的案例说明,所以真正配置起来还是非常懵逼。如果完全按照官网文档的步骤,大概就是这样的下载安装官网提供两种下载方式,第一种类似于SDK的whole website,另外一种 简洁版croppic。前者提供了完...

weixin_39924198的博客 167

jquery 上传图片自由截取

为了使用户能自定义个人头像,需要提供一个对上传图片的截图功能,当前很多网站特别是SNS类网站都提供这样的功能,非常实用。本文主要是利用jQuery的imgAreaSelect插件实现。 首先引入三个文件: <script src="<%:Url.Content("~/UI/Scripts/jquery-1.8.2.min.js") %>"></script&...

weixin_30757793的博客 137

HTML如何剪切图片,HTML5技术实现剪切+上传图片的功能

html 第一步,我们先画一个表头现在再描绘主体部分Step1: Please select image fileStep2: Please select a crop regionFile sizeTypeImage dimensionWHCSS.bheader {background-color: #DDDDDD;border-radius: 10px 10px 0 ...

weixin_32033241的博客 841

vue 实现ps图片编辑_Vue项目图片剪切上传——vue-cropper的使用

选择图片ref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="opti...

weixin_39816024的博客 449

js图片上传预览(这是还没有上传到服务器的时候进行的图片预览代码)

方法1:<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; chars

pyman hall 1024

php图片上传剪切,PHP 图片上传及 剪切 代码

define ("MAX_SIZE","400");$errors=0;if($_SERVER["REQUEST_METHOD"] == "POST"){$image =$_FILES["file"]["name"];$uploadedfile = $_FILES['file']['tmp_name'];if ($image){$filename = stripslashes($_FILES['f...

weixin_39599654的博客 141

android——拍照,相册图片剪切其实就这么简单

接触android这么久了。还没有真正的浩浩看看android拍照,相册图片剪切到底是怎么回事,每次都是从别人的代码一扣,就过来了。其实,谷歌提供的API已经很强大。只需要用的好,就那么几句就可以搞定神秘的拍照和剪切图片。废话不多少,直接看源码 package com.example.testcamera; import java.io.Fi...

weixin_34104341的博客 118
上一篇: asp.net 截屏 截取web页面 源代码
下一篇: VS2008 vs2010中JQUERY智能提醒
GoodShot
博客等级 码龄22年 968粉丝 281原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值