Tag: html5 canvas

应用css后保存canvas/图像: 我有一个带有图像的简单canvas（图片500×333）：然后我使用CSS在canvas/图像上应用一个简单的水平翻转，完美地工作 .flipH { -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); filter: FlipH; } 我现在正试图将图像保存在canvas上，并显示其翻转状态，但它只保存了原始图像，这就是我正在尝试的内容： $(document).on(“click”, “#applyFlip”, function() { // save var canvas = document.getElementById(“capEdit”); var dataUrl = canvas.toDataURL(); $.ajax({ type: “POST”, url: ‘/ajax/saveFlip.php’, dataType: ‘text’, data: { base64data : dataUrl, imgName : imgName } }); }); 问题：这应该有用吗？如果是这样，为什么不呢？如果它甚至不能像这样工作，有没有办法实现这些结果？ […]

在canvas上调整照片大小而不会丢失宽高比: 大家好，感谢您提前提供的任何帮助。我正在写一个phonegap应用程序，无法在不丢失方面或错误裁剪图像的情况下缩小照片。在下面的函数中，“imageData”是相机拍摄的64位照片。我可以将图像绘制到我页面上的canvas上，但如果图片是在横向拍摄的，那么它就会被打碎。如果我不通过使用缩放function或drawimagefunction缩放它，那么我只获得照片的顶角。一个例子：我拍了一张照片，onPhotoDataSuccess函数中的图像宽度显示为1296px宽，968px高。但我在iPhone上的canvas是272像素宽（肖像模式）。我在网上尝试了很多不同的缩放方法，这似乎是最接近的。我究竟做错了什么？ function onPhotoDataSuccess(imageData) { var myImage = new Image(); var thecanvas = document.getElementById(“queImg”); var ctx = thecanvas.getContext(“2d”); myImage.onload = function() { thecanvas.setAttribute(‘width’, ‘100%’); thecanvas.setAttribute(‘height’, ‘auto’); ctx.scale((myImage.width * 0.15), (myImage.height * 0.15)); ctx.drawImage(myImage, 0, 0); } myImage.src = “data:image/jpeg;base64,” + imageData; }

在html5canvas上拖动和调整图像大小: 我正在构建一个HTML5canvas图像编辑器。将图像上传到canvas后，我需要Dragg并在canvas上resize。我设法上传了一张图片并将其拖放到canvas上。但我需要在canvas上调整它的大小。提前致谢。 var Img = new Image(); Img.src = file; Img.onload = function () { context.drawImage(Img, 50, 0, 200, 200); } mouseMove = function (event){ if (down) { context.clearRect(0,0,800,500); context.translate(0, -50); context.drawImage(Img, (event.clientX – offsetX), (event.clientY – offsetY), 200, 200); context.translate(0, 50); } } mouseUp = function () { down = false; […]

如何使用jQuery / CSS3创建“滑入式画廊面板”？: 通常我知道如何开始，有一些教程甚至经验，但在这一点上，我甚至不知道如何调用它。也许只是告诉我如何正确定义这可能是我的问题的解决方案（ – >基于名称，我可以正确搜索）。让我们给你一个我刚刚制作的快速模型。我正在寻找1：你怎么称呼它，尤其是2：我将如何创造这样的？我想创建面板，一些堆叠在彼此之上，并且通过单击每个面板上的“下一个”按钮，您可以将该面板向左移动（或向右（向后））以移动到下一个贴砖。假设每个面板都是一个项目组合项目（垂直堆叠），并且在每个面板（项目组合项目）中，您可以在下一个和后面水平滑动，以便在每个图块上解释项目的一部分。每个图块的布局由具有完整背景图像的图块（ background-size:cover ）和半个宽度图块文本框组成。当然，盒子的文本应该用HTML编写，而不是通过使用Photoshop“刻录”到图像中，以用于响应原因。我假设这可以用CSS3和jQuery创建。唯一的问题是：我的所有Google搜索都没有结果，或者导致了Off-canvas导航菜单，这是我不想要的。要回答这个问题，要么：1。定义如何调用/我可以在谷歌搜索这个2.将我链接到一个好的教程/插件3.写出代码，如果它会那么简单。谢谢大家伙！

我可以在canvas元素中绘制一个表吗？: 是否有任何方法（插件，工作解决方案等）将HTML table绘制到元素中？我有一个格式丰富的html表（使用CSS ），我想使用jQuery将其保存为图像（PNG，SVG或GIF）。 ……或者如果有任何最简单的方法，我正在听它。

如何通过在背景canvas中绘制线条来连接两个HTML元素？: 可能更多的是数学问题，但在这里…… 我想要做的是两个HTML元素通过背景canvas上的动画线连接这是一个小提琴，简化了我想做的事情。 http://jsfiddle.net/loupax/zUqXn/ 这些线实际上在那里，但它们在canvas之外，如果使用元素检查器，则可以在canvas中看到绘制线的坐标。有人可以帮我解决我做错了什么，线条被拉出来了吗？这是线条被绘制但不合适的certificate。（用固定尺寸替换流体平台和帆布尺寸） http://jsfiddle.net/loupax/zUqXn/8/ 编辑看起来我正在尝试做的是流体布局不可能。经过很多麻烦后我发现Canvas元素是它自己的平面，没有安全的方法来匹配锚点坐标和canvas坐标，没有固定的大小

如何使用javascript或Jquery使用文件系统或操作？: 我想使用Javascript或jQuery for Cross Browser进行一些文件操作，如： File create File write File read Update Remove/delete 有可能做上面的事情吗？如果可能的话，从哪里可以得到这个想法？请建议我。在任何一端（客户端/服务器）怎么办？我问这只是为了知道！

阻止requestAnimationFrame一直运行: 我想知道如何通过requestAnimationFrame调用animate函数，只有当它真的需要它时。目前， animate被调用，这会产生开销，我猜。我已经在我的animate函数内部尝试比较targetRadius和初始radius并且一旦它们相同就返回false。不幸的是，这根本不起作用。有人可以解释我如何解决这个问题吗？的jsfiddle HTML： … … JS： // Options var maxImageWidth = 250, maxImageHeight = 196; var canvas = $(‘#ddayCanvas’), canvasWidth = canvas.width(), canvasHeight = canvas.height(), sectorColor = $(‘.product-box’).css(‘background-color’), context = canvas[0].getContext(‘2d’), imageSrc = canvas.data(‘image’), imageObj = new Image(), imageWidth, imageHeight, mouseover = false; imageObj.onload = function() { imageWidth = this.width; […]

在html页面中的2个元素之间绘制线条: 我需要在html页面上的2个元素之间画线结果应该是这样的： http ： //img2.timg.co.il/forums/1_173873919.JPG 我想知道最好的办法是什么使用canvas和html5 使用背景图像。由ajax动态制作图像我想知道什么是最好的方式，如果网上有一个简单的演示谢谢

如何在html5canvas中制作可点击的点？: 我正在玩一个简单的 HTML5canvas绘制线教程。因为它基于jQuery，所以很容易为绘图添加很多效果。如何在点击/hover（mouseenter / mouseleave）时使点可点击/可悬空以添加jquery效果？这些点是由 c.fillStyle = ‘#333’; for(var i = 0; i < data.values.length; i ++) { c.beginPath(); c.arc(getXPixel(i), getYPixel(data.values[i].Y), 4, 0, Math.PI * 2, true); c.fill(); } 如何添加jquery选择器？基本上，我想在点击或hover时显示点坐标。