首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    基于Canvas的图片切割器

    背景 先上地址:https://kifuan.github.io/photo-cutter/ 由于某群友有切割图片放到个人资料里面的需求,所以我就顺手写了一个这样的项目。...效果 如下: 原理 来源: MDN 利用CanvasRenderingContext2D.drawImage对图片进行处理,API如下: ctx.drawImage(image, sx, sy,..., dx, dy, dWidth, dHeight) 用下面这张图就可以解释清楚: 因为我们并不需要调整这么多的参数,举个栗子,把一张300x400的从100, 200的位置截出一个100x100的图片...实现 目标 目标其实很简单,我们要把一张大图切割成下面的形式: 忽略我作画的渣水平,就当每个格子都是正方形,所以说它的宽高比应当是3:4。...策略模式的应用 因为我们有多种切割图片的策略,所以这里可以应用策略模式。

    63320

    JS实现计算最少回文切割数

    我的公众号里我会不定期的对一些常见算法做讲解,并用js语言实现出来,共读者参考~ ----------- 正文分割线 --------- 题目重现: 对一个字符串按照回文进行分割,例如ababbbabbababa...如果字符串整体是回文,则需要0次分割,最少1个字符串 实现思路: 我们的基本思路是这样:首先,找出所有的回文子串(见下面分析),然后找出所有可以对整个字符串进行回文分割的实现方案,最后我们从这些所有可行方案中找出切割术最少的方案...基本代码如下: js代码实现如下: 我们以符号"_"来分割开始和结束位置,比如从字符串的第二个字符到第5个字符是个子回文,那么上述函数返回的结果中属性'2_5'为TRUE,否则为false....我结合了js语言的特性,运用hash来进行处理。当然也可以考虑用数组实现。...最后,我们只需要再次遍历数组,找到所有切割数最少的方案即可。 所有代码 所有的代码实现如下。其中可能还有可以优化的地方,可再仔细琢磨一下。

    1.3K90

    JS 图片压缩

    前言 说起图片压缩,大家想到的或者平时用到的很多工具都可以实现,例如,客户端类的有图片压缩工具 PPDuck3, JS 实现类的有插件 compression.js ,亦或是在线处理类的 OSS 上传,...文件上传后,在访问文件时中也有图片的压缩配置选项,不过,能不能自己撸一套 JS 实现的图片压缩代码呢?...压缩思路 涉及到 JS 的图片压缩,我的想法是需要用到 Canvas 的绘图能力,通过调整图片的分辨率或者绘图质量来达到图片压缩的效果,实现思路如下: 获取上传 Input 中的图片对象 File 将图片转换成...,后续会有详细介绍 转换后的图片生成对应的新图片,然后输出 优缺点介绍 不过 Canvas 压缩的方式也有着自己的优缺点: 优点:实现简单,参数可以配置化,自定义图片的尺寸,指定区域裁剪等等。...上传存储图片如果需要对文件大小格式有要求的,可以统一压缩处理图片 前台页面想要编辑图片,可以在 Canvas 处理图片的时候,加一些其他逻辑,例如添加文字,剪裁,拼图等等操作 当然温馨提示:因部分接口有

    25.8K21

    js拖拽上传图片

    有时候,在开发中,需要遇到拖拽上传图片的需求,即从磁盘选中一张或多张图片,然后按着鼠标把图片拖动到页面上指定的区域,实现图片的上传。...1、后端上传图片的接口 我是之前用vue写一个简单的后台系统的时候,用Java的SpringMVC+MyBatis的框架写了一个简单的后台管理的一些接口,刚好有一个上传用户头像的接口,该接口是把上传后的图片存储在另外一台...Tomcat下,这里就直接使用这个接口来上传图片。...ie=edge"> Document js...里面用的formData对象来上传图片的,该对象的作用是:   1、用一些键值对来模拟一系列表单控件,即把form中所有表单元素的name与value组装成一个queryString;   2、异步上传二进制文件

    18.2K30

    Python实现图片切割拼接实验——numpy数组的脑洞玩法

    ,将两张图竖着切成若干条,并且没有打乱,随后隔条分成了四份,出现了四张跟原图一模一样的图片(等比例缩小) 目标:使用Python实现图片切割拼接实验 效果:效果如下图所示,证实这个实验是真的,只不过处理后的像素降低了...如图我们可以用plt.imread()读取一张图片的数据,返回的就是这张图片的ndarray数组。...通过对ndarray的处理实现图片操作 步骤解析: 【1】图片读取 读取一、PIL库的image import numpy as np# pip install numpy import PIL.Image...-纵轴像素, # 第二个800代表图片的像素长度-横轴像素, #3代表RGB通道数,(有些图片格式是3通道,有些图片格式是4通道) 【2】图片切割 & 数组拼接 #图像切割——横轴切 width=data.shape...,n越大,像素越小 def cut_jpg(jpg_path,n): # 读取图片 data=plt.imread(jpg_path) #图像切割_横轴切 width=data.shape

    77610

    日志切割

    那么其中的reopen,就是我们今天的主角,我们可以使用reopen来实现日志切割。...原理解析: 发送信号,其实是执行: kill -USR1 `cat /usrlocal/nginx/logs/nginx.pid` 以上两种方式都可以实现日志切割,你可以任意选择。...定期执行: 日志切割时企业中常规动作,我们不会每天去手工执行一遍命令,通常是让脚本自己执行,于是我们可以将这个动作写进任务计划,每天凌晨自动执行。 脚本: #!...-eq 0 ];then echo "$(date +%F) 日志切割成功" fi 写入任务计划: 在/var/spool/cron/root文件中添加如下代码,每天11:59分自动切割日志...: 59 23 * * * /bin/sh nginx_cut_log.sh >>/tmp/nginx_cut.log 2>&1 到这里简单的日志切割工作就完成啦。

    60300
    领券