Tag: canvas

在鼠标hover上从canvas获取像素颜色: 是否有可能获得鼠标下的RGB值像素？有没有一个完整的例子？以下是我到目前为止： <script> function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'Your URL'; img.onload = function(){ ctx.drawImage(img,0,0); }; canvas.onmousemove = function(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } var c = ctx.getImageData(mouseX, […]

canvas.toDataURL（）SecurityError: 所以我使用谷歌地图，我得到的图片，所以它看起来像这样 <img id="staticMap" src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600×300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false"> 我需要保存它。我发现这个： function getBase64FromImageUrl(URL) { var img = new Image(); img.src = URL; img.onload = function() { var canvas = document.createElement("canvas"); canvas.width = this.width; canvas.height = this.height; var ctx = canvas.getContext("2d"); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL("image/png"); alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, "")); }; } 但是我得到这个问题： Uncaught SecurityError：无法执行“HTMLCanvasElement”上的“toDataURL”：受污染的canvas可能无法导出。我寻找修复。我在这里find了一个示例如何使用CORS，但我仍然不能将这两个代码绑在一起，使其工作。也许我做错了，有一个更简单的方法来做到这一点？我试图保存这张照片，以便我可以将数据传输到我的服务器。 […]

调整HTML5canvas以适应窗口: 如何自动缩放HTML5 <canvas>元素以适应页面？例如，我可以通过将height和width属性设置为100％来缩放<div> ，但是<canvas>不会缩放，是不是？

一个<canvas>元素的最大尺寸: 我正在使用高度为600到1000像素，宽度为几十或几十万像素的canvas元素。但是，在一定数量的像素（显然未知）之后，canvas不再显示用JS绘制的形状。有谁知道是否有限制？谢谢。编辑：在Chrome 12和Firefox 4中都进行了testing。

如何添加一个简单的onClick事件处理程序到canvas元素？: 我是一位经验丰富的Java程序员，但是大约十年来我首次查看了一些JavaScript / HTML5的东西。我完全沉迷于最简单的事情。作为一个例子，我只是想画一些东西，并添加一个事件处理程序。我确信我在做一些愚蠢的事情，但我已经搜遍了，没有什么build议（例如，这个问题的答案：添加onclick属性inputJavaScript ）的作品。我正在使用Firefox 10.0.1。我的代码如下。你会看到几个注释行，每个行的结尾是什么（或什么不）发生的描述。这里有什么正确的语法？我要疯了！ <html> <body> <canvas id="myCanvas" width="300" height="150"/> <script language="JavaScript"> var elem = document.getElementById('myCanvas'); // elem.onClick = alert("hello world"); – displays alert without clicking // elem.onClick = alert('hello world'); – displays alert without clicking // elem.onClick = "alert('hello world!')"; – does nothing, even […]

CanvasContext2D drawImage（）问题: 我试图在获取dataURL()之前在canvas上绘制图像，但返回的数据是空的。当我在控制台中检查时，我看到string中有很多A ：（ "data:image/png;base64,iVBO..some random chars… bQhfoAAAAAAAAAA… a lot of A …AAAASUVORK5CYII=" ）当我尝试将canvas追加到文档中时，也没有绘制任何内容，而且在控制台中没有任何错误。这里有什么问题？这是我的代码： var img = new Image(); img.src = "http://somerandomWebsite/picture.png"; var canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; var context = canvas.getContext('2d'); context.drawImage(img, 0,0); // this doesn't seem to work var dataURL = canvas.toDataURL(); // this will give me […]

我如何获得鼠标点击一个canvas元素的坐标？: 将点击事件处理程序添加到canvas元素中最简单的方法是什么？canvas元素将返回点击的x和y坐标（相对于canvas元素）？不需要传统的浏览器兼容性，Safari，Opera和Firefox都可以。

在HTML5canvas中调整图片大小: 我试图在客户端使用JavaScript和一个canvas元素创build缩略图，但是当我缩小图像时，它看起来很糟糕。它看起来好像在Photoshop中缩小了，重新采样设置为“最近邻居”，而不是双立方。我知道它可能让这看起来是正确的，因为这个网站可以做到这一点很好，使用canvas。我已经尝试使用与“[Source]”链接中显示的相同的代码，但它看起来仍然很糟糕。有什么我想念，一些设置需要设置或什么？编辑：我正在尝试调整一个JPG格式。我已经尝试在链接的网站和Photoshop中调整相同的JPG，缩小尺寸时看起来很好。这是相关的代码： reader.onloadend = function(e) { var img = new Image(); var ctx = canvas.getContext("2d"); var canvasCopy = document.createElement("canvas"); var copyContext = canvasCopy.getContext("2d"); img.onload = function() { var ratio = 1; if(img.width > maxWidth) ratio = maxWidth / img.width; else if(img.height > maxHeight) ratio = maxHeight / img.height; […]

使用CSS时canvas拉伸，但使用“宽度”/“高度”属性正常: 我有2个canvas，一个使用HTML属性的width和height来设置它的尺寸，另一个使用CSS： <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1显示它应该，但不compteur2。内容在300×300的canvas上使用JavaScript绘制。为什么有显示差异？