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
};
-
本文向大家介绍使用JavaScript+canvas实现图片裁剪，包括了使用JavaScript+canvas实现图片裁剪的使用技巧和注意事项，需要的朋友参考一下 canvas是一个可以让我们使用脚本绘图的标签，它提供了一系列完整的属性和方法。我们可以借此来实现图形绘制，图像处理甚至实现简单的动画和游戏制作。 canvas标签只有两个属性：width和height，用来设定画布的宽和高，如果没有通
-
本文向大家介绍裁剪画布/导出具有一定宽度和高度的HTML5画布，包括了裁剪画布/导出具有一定宽度和高度的HTML5画布的使用技巧和注意事项，需要的朋友参考一下 为此，创建一个临时画布以在当前画布上进行绘制。之后，在临时画布上使用toDataUrl()方法-
-
https://developer.mozilla.org/en/Canvas_tutorial/Transformations http://en.wikipedia.org/wiki/Spirograph 移植一个HTML5画布图像到QML画布非常简单。在成百上千的例子中，我们选择了一个来移植。 螺旋图形（Spiro Graph） 我们使用一个来自Mozila项目的螺旋图形例子来作为我们的基础
-
我们现在知道调用drawImage方法的第一种方式，即将完整尺寸的图像绘制到画布上，但超过画布边界的部分被剪掉了。 为了解决这个问题，需要调整图像大小或者控制图像的裁剪。通过drawImage方法的最后两种调用方式都能够完成这两个任务。 第一种调用可以调整图像大小，第二种可以同时调整和裁剪图像。drawlmage的所有调用方式的唯一区别是所使用参数的个数和类型不同。 调整图像大小 调整图像大小与绘
-
我试图在从图库中选择图像后使用intent来裁剪图像。以下是我的代码片段 在这里，我使用PICK_IMAGE_REQUEST意图句柄调用上面的代码段 由于我在裁剪后使用了相同的意图，即PICK_IMAGE_REQUEST，可能会出现什么问题
-
本文向大家介绍html5-canvas “ context.drawImage”是否不在画布上显示图像？，包括了html5-canvas “ context.drawImage”是否不在画布上显示图像？的使用技巧和注意事项，需要的朋友参考一下 示例 使用尝试在画布上绘制图像对象之前，请确保已将其完全加载context.drawImage。否则，图像将无声显示。 在JavaScript中，图像不会立