HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？

我想从现有的图像中采取不规则形状的部分，并使用HTML5画布将其呈现为Javascript中的新图像。因此，只有多边形边界内的数据才会被复制。我提出的方法包括：带有HTML5画布的putImageData的遮罩？

在新画布中绘制多边形。

创建使用getImageData(矩形)

应用数据到新的画布使用从原来的帆布clip

将数据复制使用putImageData

口罩它没有工作，整个矩形(例如来自边界外的来源的东西)仍然出现。 This question解释了原因： “规范说明putImageData不会受到剪辑区域的影响。”党！

我也尝试绘制形状，设置context.globalCompositeOperation = "source-in"，然后使用putImageData。同样的结果：没有应用掩膜。我怀疑是出于类似的原因。

关于如何完成此目标的任何建议？以下是我正在进行的工作的基本代码，以防不清楚我正在尝试做什么。 (不要试图太难调试它，它会从使用很多不在这里的函数的代码中清理/提取，只是试图显示逻辑)。

// coords is the polygon data for the area I want

context = $('canvas')[0].getContext("2d");

context.save();

context.beginPath();

context.moveTo(coords[0], coords[1]);

for (i = 2; i < coords.length; i += 2) {

context.lineTo(coords[i], coords[i + 1]);

}

//context.closePath();

context.clip();

$img = $('#main_image');

copy_canvas = new_canvas($img); // just creates a new canvas matching dimensions of image

copy_ctx = copy.getContext("2d");

tempImage = new Image();

tempImage.src = $img.attr("src");

copy_ctx.drawImage(tempImage,0,0,tempImage.width,tempImage.height);

// returns array x,y,x,y with t/l and b/r corners for a polygon

corners = get_corners(coords)

var data = copy_ctx.getImageData(corners[0],corners[1],corners[2],corners[3]);

//context.globalCompositeOperation = "source-in";

context.putImageData(data,0,0);

context.restore();

HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？相关推荐

html5中的图片的location,HTML5中的History和Location对象
今天发现原来HTML5对History和Location对象进行了改进,提供了几个新的API.我觉得,这用来结合Ajax来使用,弥补Ajax技术更新内容但不产生历史记录的问题,十分有用. 我很久之前就 ...
html5中切换图片怎么做,HTML5编程实战之二：用动画的形式切换图片
用动画的形式切换图片 varwidth, height;varcontext, image, functionId;vardrawLeft, drawWidth;vardrawTop, drawHei ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
html图片自动在div里放大,HTML5+CSS3实现图片的放大/缩小
原标题:HTML5+CSS3实现图片的放大/缩小最近做项目时,经常遇到需要图片缓慢放大的效果.我做的时候想到了几种方法,所以来总结一下. 1. 利用css改变图片的宽高,做出视觉上的放大. 首先,将 ...
HTML5 本地裁剪图片
最近有时间了解了下html5的各API,发现新浪微博的头像设置是使用canvas实现截图的,加之前段时间了解了下html5的File API使用File API 之FileReader实现文件上传更加 ...
HTML5 实现本地图片裁剪
HTML5 实现本地图片裁剪文章目录 HTML5 实现本地图片裁剪 1.知识点 1.HTML 结构与 CSS 样式 2.初始化 3 实现 handleFiles,获取文件,读取文件并生成 url 4 ...
html5 css3替换图片,移动Web—CSS为Retina屏幕替换更高质量的图片
特别声明:此篇文章根据Stéphanie Walter 的英文文章<The Mobile Web: CSS Image Replacement for Retina Display Device ...
php将上传的图片转为base64,html5实现把上传的图片转成base64编码在显示（代码实例）...
本章给大家介绍html5实现把上传的图片转成base64编码在显示(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来详细的看一看base64编码: 什么是bas ...
php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5)，识别html5标签： html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...

HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？

HTML5如何添加图片遮罩,带有HTML5画布的putImageData的遮罩？相关推荐

最新文章

热门文章