smartcrop.js 内容感知图像裁剪
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img {
width: 600px;
height: 400px;
box-sizing: border-box;
border: 10px solid #f48;
}
</style>
</head>
<body>
<img class="img" src="./b.jpg" alt="">
<hr>
<canvas style="background-color: #000;"></canvas>
<script src="https://cdn.bootcss.com/smartcrop/2.0.3/smartcrop.js"></script>
<script>
let l = console.log;
let image = document.querySelector('.img')
var c = document.querySelector('canvas')
var ctx = c.getContext('2d');
image['onload'] = function () {
smartcrop.crop(image, {
minScale: 1.0,
width: 100,
height: 100,
debug: true
}).then(function (res) {
l(res);
l(res.topCrop);
c.width = res.topCrop.width;
c.height = res.topCrop.height;
ctx.drawImage(image, res.topCrop.x, res.topCrop.y, c.width, c.height, 0, 0, c.width, c.height);
});
}
</script>
</body>
</html>
smartcrop.js 内容感知图像裁剪的更多相关文章
- smartcrop.js智能图片裁剪库
今天将为大家介绍一款近期github上很不错的开源库 – smartcrop.js.它是一款图片处理的智能裁剪库.在很多项目开发中,经常会遇见上传图片的场景,它可能是用户照片信息,也可能是商品图片等. ...
- 使用js加载图像和setDataXML()加载数据
使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...
- 【开源】canvas图像裁剪、压缩、旋转
前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求. 考虑到已有各轮子的契合度都不高,于是自己重新造了一个轮子. 关于图像裁剪.压缩 在HTML5时代,canvas的功能已经非常强大了,可 ...
- canvas图像裁剪、压缩、旋转
转载于:http://www.cnblogs.com/dailc/p/7843204.html 前言 前段时间遇到了一个移动端对图像进行裁剪.压缩.旋转的需求.考虑到已有各轮子的契合度都不高,于是自己 ...
- jQuery Jcrop 图像裁剪
jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...
- 基于layui+cropper.js实现上传图片的裁剪功能
最近因项目需求,需要在上传图片的时候先对图片裁剪,然后在上传,所以就有了本文的出现. 开始正文之前,要提一下这个图片的裁剪:图片的裁剪,有前端裁剪,也可以后端裁剪 前端的裁剪我知道的可以分为这么两种: ...
- 结构感知图像修复:ICCV2019论文解析
结构感知图像修复:ICCV2019论文解析 StructureFlow: Image Inpainting via Structure-aware Appearance Flow 论文链接: http ...
- PHP图像裁剪为任意大小的图像,图像不变形,不留下空白
<?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...
- HTML canvas图像裁剪
canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...
随机推荐
- pycharm调整代码长度分割线
1.File -> Settings -> Code Style -> Right margin (columns) 的值为80,大功告成. 2.具体设置的数值可以根据个人电脑 ...
- zip压缩解压
zip在linux中使用相对不太频繁,但是在window中使用频繁! zip参数 -q //不显示指令的执行过程,静默执行-r //递归处理文件-T //检测zip文件是否可用-u //更新文件,根据 ...
- Mocks Aren't Stubs
Mocks Aren't Stubs The term 'Mock Objects' has become a popular one to describe special case objects ...
- 苹果产品时间发布表统计(iPhone、iPad),以及32位和64位机的说明
之前因为某些原因,需要对apple家族的手机和pad产品做一个上市时间排序,以及分析分别是哪种CPU机型 总结如下: iPad家族: 1.iPad - 2010.1.27发布 2.iPad 2 ...
- cas 资源
http://blog.sina.com.cn/s/blog_6fda308501012tk2.html http://www.blogjava.net/xmatthew/archive/2008/0 ...
- 基于Centos搭建 Mono 开发环境
系统要求: CentOS 7.2 64 位操作系统 安装 Mono 安装前的准备 yum install yum-utils 执行命令添加安装包仓库 rpm --import "http:/ ...
- C#:注册组件 (cmd)
public class ComRegistor { public static string classID = "CLSID\\{479A1AAC-C148-40BB-9868-A977 ...
- cocos2d-x中的坑
1. 设置opacity=0, 子结点不受到影响. FadeOut 也不起作用. 查看代码可以找到一个 cascadeOpacityEnabled 的参数, 默认是关闭的. 打开就可以了. 2. Ta ...
- Cortex-A15架构解析:它为什么这么强(转)
今年的新手机趋势无异是全面向四核靠拢,不过同样是四核,在实际的性能上其实是千差万别.例如针对入门级主流市场的四核手机普遍采用的都是Cortex-A7以及 Cortex-A9 级别的CPU内核,这类内核 ...
- 【30集iCore3_ADP出厂源代码(ARM部分)讲解视频】30-5 底层驱动之旋转编码器
源视频包下载地址:链接:http://pan.baidu.com/s/1mhENI9i密码:mf1x 银杏科技优酷视频发布区:http://i.youku.com/gingko8