Tag: canvas

如何使用javascript打印方法打印canvas元素？: 如何使用javascript打印创建的canvas元素，其中包含一些内容？我的打印预览显示一个空白框而不是canvas元素中的内容？首先，我使用html2canvas创建我的canvas图像，然后我看到该图像已创建。但我无法打印包含相关图像的div。在IE中我可以在触发按钮两次时看到它。在第一次单击时，它会打开空白打印预览，在第二次单击时，它会打开相关内容。但是在chrome中它会立即打开空白内容，它无法加载第二个触发器; 页面冻结。这是我的代码; function printDiv(index) { var canvasImg = “”; var divToPrint = document.getElementById(‘hr’+index); html2canvas(divToPrint, { onrendered: function(canvas) { var canvasImg = canvas.toDataURL(“image/jpg”); $(‘#seckinCanvas’).html(”); } }); var printContent = document.getElementById(“seckinCanvas”); var windowUrl = ”; var uniqueName = new Date(); var windowName = ‘Print’ + uniqueName.getTime(); var printWindow = window.open(windowUrl, […]

Html5canvas模糊并保存: 这是困扰我的。假设我有一辆汽车的照片。我想把这张照片放在canvas上，模糊它然后保存模糊的图像。可能吗？如果有另一种模糊和保存方式，图像不一定必须在canvas中。我尝试过使用blur.js ， pixastic.js和foggy.js ，所有这些都将模糊效果添加到图像中，但它停在那里，我无法保存。我可以右键单击图像，但没有“ save image as ”链接。提前谢谢你的回答。

将上传的图像（使用Ajax）绘制到Canvas: 我使用jQuery AJAX Form插件上传图像而不刷新页面。如果我在图像标签中显示上传的图像（将src设置为上传的图像路径），则可以。但是，我无法在canvas元素上绘制上传的图像。我实际上不知道问题是什么。 if (isset($_FILES[“image”][“name”]) && !empty($_FILES[“image”][“name”])) { $filename = $_FILES[“image”][“name”]; $tmpname = $_FILES[“image”][“tmp_name”]; $location = “uploads/”; move_uploaded_file($tmpname, $location.$filename); echo $location.$filename; } else {} var canvas = document.getElementById(“canv”); var contex = canvas.getContext(“2d”); var img = new Image(); img.src = responseText; img.onload = function(){ contex.putImageData(img, 0, 0); } 当我在Ajax进程完成时调用时，上面是我的回调函数（内部）。谢谢你的任何有用的答案。更新：完整代码 $(document).ready(function(){ $(“#myform”).ajaxForm(function({success: updateSrc}){ […]

基于canvas坐标的JQuery工具提示: 我试图在canvas上绘制一个图形，每个顶点都有自己的坐标（在圆心 – 6px半径 – 代表它）。我想用鼠标在顶点上显示工具提示…当我不在顶点时隐藏此工具提示。现在工具提示显示（仅在带有鼠标的canvas上的第二次传递之后）具有正确的数据，但是当我不再处于顶点时，工具提示仍然在这里。这是canvas.addEventListener的代码（这里只是工具提示） canvas.addEventListener(‘mousemove’, function(evt) { var mX = evt.clientX; var mY = evt.clientY; mX -= canvas.offsetLeft; mY -= canvas.offsetTop; $(“canvas”).tooltip(); for (i=0; i<points.length; i++) { if (mXpoints[i].x-6) { if (mYpoints[i].y-6) { var str = getNodeRelations(evt); x1 = points[i].x-6; x2 = points[i].x+6; y1 = points[i].y-6; y2 = points[i].y+6; /*if ($(“canvas”).tooltip(“instance”) […]

HTML Canvas – 动态更改文本: 当我在输入文本字段中输入时，我正在尝试更改htmlcanvas上的文本。我可以添加文本，但是，如果我删除并再次输入，则新文本将添加到旧文本的顶部。的jsfiddle document.getElementById(‘title’).addEventListener(‘keyup’, function() { var stringTitle = document.getElementById(‘title’).value; console.log(stringTitle); ctx.fillStyle = ‘#fff’; ctx.font = ’60px sans-serif’; var text_title = stringTitle; ctx.fillText(stringTitle, 15, canvas.height / 2 + 35); });

JavaScript – Chart.js工具提示显示错误的x轴值: 我有一个包含两个不同数据集的图表，但有时它们具有相同的x，y坐标。但是当我hover共享点时，它有时会显示错误的日期。 y值是正确的，但它是未正确显示的x值。尝试在codepen上hover共享点。在下图中，您可以看到我正在徘徊{ y: 56.04, x: April 05, 2014 } ，但显示xLabel值为58.28 ，即April 15, 2012 。此外，您可以在图表中看到57.05和58.28都将April 15, 2012作为x值，但它们不在同一个y位置！代码太长，无法在stackoverflow上共享，但我创建了这个codepen，因此您可以在那里查看，分叉和编辑它。更新我更新了具有相同日期的笔和固定点。我还添加了type: ‘time’感谢@Oluwafemi Sule 。这是我编辑过的笔。但是现在，x轴上的日期很奇怪。他们不再说March 06, 2011 ，但他们说Q1 2011 。工具提示仍然存在问题。

响应式设计中使用Canvas或SVG进行图像遮罩: 我试图在网站上渲染图像，好像它们是不同的几何形状。例如，正常方形图像可以显示为六边形，圆形，五边形，八边形等。这是一个响应式网站，意味着原始图像的样式max-width: 100%; ，它们的大小取决于它们的容器元素。我首先想到的是创建几个透明的PNG“叠加图像”，其中每个所需的几何形状在透明区域中“敲出”然后使用z-index覆盖原始图像顶上的掩模。有没有更好的方法来使用canvas或SVG（甚至其他东西），并仍然允许图像和蒙版在浏览器窗口resize时均匀resize？我需要考虑哪些性能考虑因素？最终的生产代码将使用jQuery，所以如果我需要它用于任何这些方法，它将在那里。

创建HTML5canvas模式并用它们填充内容: 我与.createPattern(image,”repeat”)有.createPattern(image,”repeat”) 。 1.我可以使用.toDataURL()和.createPattern()创建的自己的模式填充正方形吗？ 2.我可以填充一个带有图案的正方形，这是当前的canvas吗？我的jsFiddle HTML JavaScript的 var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); context.strokeRect(0.5, 0.5, 10, 10); context.arc(5.5, 5.5, 3, 0, Math.PI); context.rect(3, 3, 1, 1); context.rect(7, 3, 1, 1); context.stroke(); var img = new Image(); img.src = canvas.toDataURL(); context.drawImage(img, 10, 10); // works context.beginPath(); var pattern = context.createPattern(img, “repeat”); // doesn’t work […]

从容器拖动控件并在canvas上放置/绘制它们: 我想允许用户从一个div容器拖动图标并放下并在canvas上绘制它们，保持原始图标不变。图标是在表格上动态添加的。当我拖动图标时，我也希望用光标拖动图标效果。当我使用“helper：’clone’”属性时，我得到效果但是删除的位置不正确，当我删除此属性时，原始图标被删除。我父图标的容器 10-FL-105-A20100200 10-FL-3111-A20100199 Javascript函数使图像可拖动 $(“img[id^=imgEquipIcon]”).each(function () { $(this).draggable({ containment: “#dvContainer”, scroll: false,//helper: ‘clone’, stop: function (event, ui) { var stoppos = $(this).position(); alert(stoppos.left+”,”+ stoppos.top); var img = new Image(); img.src = this.src; createEquipIcon(img, stoppos.left, stoppos.top); } }); }); function createEquipIcon(img, X, Y) { var dv = document.createElement(‘div’); $(dv).css(‘top’, Y); $(dv).css(‘left’, X); $(dv).css(‘cursor’, […]

如何消除canvas中的图像重叠（kineticjs）: 我正在使用kinetic在动力学js的帮助下开发酒店楼层的视图。但是因为我在canvas上得到了彼此重叠的图像。帮助我消除canvas中图像的重叠。这是我的代码： // get a reference to the house icon in the toolbar // hide the icon until its image has loaded var $house=$(“#house”); $house.hide(); // get the offset position of the kinetic container var $stageContainer=$(“#container”); var stageOffset=$stageContainer.offset(); var offsetX=stageOffset.left; var offsetY=stageOffset.top; // create the Kinetic.Stage and layer var stage = new Kinetic.Stage({ […]