html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像

示例

本示例显示了一个简单的图像裁剪功能，该功能获取图像和裁剪坐标并返回裁剪后的图像。

function cropImage(image, croppingCoords) {

var cc = croppingCoords;

var workCan = document.createElement("canvas"); // 创建一个画布

workCan.width= Math.floor(cc.width); // 将画布分辨率设置为裁剪的图像尺寸

workCan.height= Math.floor(cc.height);

var ctx = workCan.getContext("2d"); // 获取2D渲染界面

ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // 绘制图像偏移以将其正确放置在裁剪区域上

image.src= workCan.toDataURL(); // 将图像源设置为画布作为数据URL

return image;

}

使用

var image = new Image();

image.src = "image URL"; // 加载图像

image.onload = function () { // 加载时

cropImage(

this, {

x :this.width/ 4, // 作物保持中心

y :this.height/ 4,

width :this.width/ 2,

height :this.height/ 2,

});

document.body.appendChild(this); // 将图像添加到DOM

};

html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像相关推荐

html 图片剪裁压缩,HTML5 canvas实现图片拉伸、压缩与裁剪
前言: 我们在网页中经常会用到图片展示,通常情况下会给一个固定的宽高来显示这个图片,然而从服务器端上传的图片大小是不确定的,如果直接按默认填充这个框有时候就会特别丑orz.作为一个完(wai)美(ma ...
html5连续播放图片,HTML5效果：canvas处理连续帧图片
html5 canvas处理连续帧图片,下面的代码基于IE8以上 Canvas Demo var canvas = null;//初始化参数 var img = null; var ctx = nul ...
html5怎么给图片添加背景透明,javascript – 透明图像背景html5画布
使用该图像以及Mac上最新的Firefox和Chrome测试版中的以下代码,对我来说效果很好. (除了图像本身有一些白色不透明像素,你可以通过在深色背景上打开,例如在Firefox中看到.) var ...
浅谈：canvas绘制图片，canvas转换图片灰度值。
主要使用的是canvas的属性,不懂的可以w3c了解一下使用方法,其中转化需要灰度计算公式,网上也有很多的方法,主要根据业务需求. 直接上代码,不明白的滴滴我 qq裙:182415907:@群主: 记 ...
[笔记]音视频学习之SDL篇《五》裁剪图片成子图片（裁剪精灵表）
第五节:裁剪精灵表文章目录目的初始化创建窗口载入图片确认裁剪坐标确认裁剪显示坐标确认裁剪大小的圆为100*100 按下1,2,3,4显示不同裁剪图片总结 ApplySurface S ...
html5+山东地区图片,html5 canvas山东省地图分布颜色标记
特效描述:html5 canvas 山东省地图分布颜色标记.鼠标经过每个城市时,颜色改变. 代码结构 1. 引入JS 2. HTML代码 option = { title: { text : '山东 ...
html5自动旋转图片,HTML5画布旋转图片
你可以使用canvas'context.translate& context.rotate来旋转你的图像这里有一个函数来绘制旋转了指定度数的图像: function drawRotated( ...
html5 sqlite存储图片,HTML5之Sqlite
一.关于HTML5与web本地数据库 SQLite 能很好的支持关系型数据库所具备的一些基本特征,比如标准SQL语法.事物.数据表与索引等,而且占用资源较少,可在移动设备上轻松使用. HTML5中添加 ...
html5离线存储图片,HTML5教程离线存储技术详解
本篇教程探讨了HTML5教程离线存储技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 随着Web App的发展,越来越多的移动端App使用HTML5 ...
python裁剪图片并保存_python – 如何从图像中剪切轮廓并将其保存到新文件中
大家好,这是我的第一个问题所以请保持温和.我有一个计算机视觉领域的项目,我是新的,我会很感激一些帮助.我有一个pcb的图像,我的(首先)任务是从背景中切断电路板并将其保存到新文件. 如果结果只是没有灰 ...

html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像

html5 canvas裁剪图片,html5-canvas 使用画布裁剪图像相关推荐

最新文章

热门文章