Tag: canvas

canvas.toDataURL会产生纯黑色图像吗？: 我有一个canvas元素，里面有一些涂鸦。我使用以下内容将canvas转换为jpeg： var data = canvas.toDataURL( “image/jpeg”, 0.5 ); var img = new Image(); img.src = data; $( “body” ).append( img ); 然而，而不是我的涂鸦，我得到一个坚实的黑色jpeg。谁能告诉我我做错了什么？谢谢！

使用cropper js将canvas转换为blob: 我使用cropper.js创建了一个用于裁剪图像的应用程序。应用程序正在运行并且图像正在裁剪，之后我尝试将裁剪后的图像作为blob发送到服务器端进行存储，根据cropper.js文档，我们可以使用canvas.toDataURL获取数据URL，或使用canvas.toBlob获取blob并使用FormData将其上载到服务器。当我尝试使用canvas.toDataURL（）时，我得到了base64字符串，但实际上我需要将文件作为blob发送，所以我尝试使用canvas.toBlob（）但是我得到了Uncaught TypeError: canvas.toBlob is not a function chrome中Uncaught TypeError: canvas.toBlob is not a function和TypeError: Not enough arguments to HTMLCanvasElement.toBlob. 在Firefox中任何人都可以告诉我一些解决方案我的代码是这样的 var canvas = $image.cropper(“getCroppedCanvas”, undefined); var formData = new FormData(); formData.append(‘mainImage’, $(“#inputImage”)[0].files[0]); formData.append(‘croppedImage’, canvas.toBlob());

尝试使用输入类型文本传递超过524288字节的ToDataURL: 我正在尝试使用Canvas的DataURL（使用JavaScript）创建图像。当用户点击提交时，该值将被发送到输入类型文本标记（例如，），但是，显然在Chrome上，文本在长度为524,288个字符时会被截断。我将它发送到输入标签，因为我需要在PHP中获取值（作为$ _POST [‘dataurltext’];），以便我可以创建一个图像并将其上传到我的Web服务器。关于如何绕过这个长度的任何想法？我应该使用评论框吗？感谢您的帮助，我们将不胜感激。

如何使用JQuery在2个元素之间绘制一条线并刷新该线？: 我正在使用JQuery-UI draggables和droppables将元素克隆到div上。使用JQuery在页面上的元素之间绘制线条的最佳方法是什么。刷新页面线条的最佳方法是什么？我将在页面上有多行，只想更新特定行而不是刷新每一行。

在弯曲的路径中移动div（就像过去在Flash中的补间一样）？: 我想构建一个类似的函数 fromHeretoThere(x1,y1,x2,y2){ //…. } 这样我就可以将或图像从HTML页面上的一个点移动到曲线中的另一个点。这只能使用Canvas吗？ HTML5？任何插件/脚本哟建议？

我的所有浏览器都没有发送原始标题: 我正在尝试将图像加载到canvas元素中，然后将数据拉出到toDataURL（）中。我的网站运行Ruby on Rails 2.3 我的照片来自aws s3。我有设置cors： * GET HEAD 3000 * 我有一个canvas元素：好的，所以有些背景。我最初尝试使用这样的代码，其中drawing_image只是图像的URL。 var outlineImage = new Image(); outlineImage.crossOrigin = ”; outlineImage.src = drawing_image; outlineImage.onload = function() { var canvas = document.getElementById(‘explain_canvas’); var context = canvas.getContext(“2d”); context.drawImage(outlineImage, 10, 10, 600, 150); } 但那不是发送原始标题。所以我以为我会通过jquery尝试ajax调用 var outlineImage = new Image(); $(outlineImage).attr(‘crossOrigin’, ”); $.ajax({ […]

将图像从用户计算机添加到canvas: 我正在开发一个允许用户创建动态幻灯片的Web应用程序。目前，无论如何将图像从计算机用户添加到canvas，我都遇到了问题。我正在使用输入按钮从计算机获取文件，它吸引了将图像添加到canvas的function。到目前为止，我已经尝试了不同的方法将图像添加到canvas以及这一个：动态添加图像到canvas 但是这里显示的代码在我的情况下不起作用，因为它只是将图像绘制到canvas中，但它不允许它可拖动和可resize，就像Fabricsjs的Kitchensink.js演示一样。我也尝试将图像转换为Base64并使用LoadJSON将其转换回来，但我遇到了这个错误： Uncaught TypeError: Cannot read property ‘length’ of undefined fabric.js:2089 enlivenObjects fabric.js:2089 fabric.util.object.extend._enlivenObjects fabric.js:9025 fabric.util.object.extend.loadFromJSON fabric.js:8953 sub Sub指的是我调用的函数来添加图像。我也试过这段代码： document.getElementById(‘imgLoader’).onchange = function handleImage(e){ var reader = new FileReader(); reader.onload = function(event){ var img = new fabric.Image(); img.onload = function(){ img.set({ left : 250, top : 250, angle : 20, […]

将本地mjpgvideo流式传输到htmlcanvas: 我正在尝试将mjpgvideo的直播流写入htmlcanvas。以下内容： http ： //camelive.info/有一个带有mjpegvideo的公共网络摄像头列表，但它们似乎是用框架元素编写标签，而我无法了解它是如何在小提琴中工作的。理想的解决方案是在小提琴的htmlcanvas上播放任何实时mjpg（理想情况下是链接？）。任何有用的资源都很受欢迎，我想这样做而不包括外部库（允许jquery）编辑：相关：如何从HTML中的MJPEG流创建快照编辑：我也有一个像示例一样的本地mjpg。解决方案可以使用本地流

HTML5响应式canvas：调整浏览器canvas大小消失: 我希望使用百分比大小制作响应式canvas，一旦用户调整canvas大小相对resize。我能够通过使用下面的代码来缩放canvas，但唯一的问题是当缩放窗口大小鼠标绘图消失时。 body{margin:0px;padding:0px;background:#a9a9a9;} #main{ display:block; width:80%; padding:50px 10%; height:300px; } canvas{display:block;background:#fff;} var c = document.getElementById(‘paint’); var ctx = c.getContext(‘2d’); var x = null; var y; c.onmousedown = function(e){ x = e.pageX – c.offsetLeft; y = e.pageY – c.offsetTop; ctx.beginPath(); ctx.moveTo(x,y); } c.onmouseup = function(e){ x=null; } c.onmousemove = function(e){ if(x==null) return; x = e.pageX – […]

在div中获取鼠标位置？: 可能重复：鼠标相对于div的位置在canvas中使用javascript获取鼠标位置如何在具有固定大小但具有自动边距的canvas中获取鼠标的位置？我不能使其位置固定，不能只使用页面上的常规鼠标位置。这段代码很完美： mouseX = e.pageX – div.offsetLeft; mouseY = e.pageY – div.offsetTop;