HTML5 CANVAS: 如何从服务器保存和重新打开图片
我用html5-canvas绘制一些东西.然后,我想保存它,当页面再次加载时,我想加载我保存回画布的图像.我成功地将数据保存到服务器中的文件中,但是由于某种原因,这是一个奇怪的文件,无法通过ANT软件打开,当然不是我的画布.我将其保存为png base64,但我尝试了其他不起作用的事物. JavaScript代码: function save(){ //saves the canvas into a string as a base64 png image. jsvalue is sent to the server by an html form var b_canvas = document.getElementById("a"); var b_context = b_canvas.getContext("2d"); var img = b_canvas.toDataURL("image/png"); doc
0 2023-06-02
编程技术问答社区
在php循环中写入javascript数组
我的PHP循环正在呼应地理位置值.我该如何将这些值写入JavaScript数组,然后我可以使用它们来绘制HTML5画布上的绘制点? php循环如下 geo != false) { echo " | From ("; echo $phrase->geo->coordinates[0]; echo ","; echo $phrase->geo->coordinates[1]; echo ")"; } else { echo " | No Location Dat
0 2023-06-01
编程技术问答社区
如何用电子邮件发送HTML5画布图像
首先,我尝试使用Pear的Mail_mime进行操作,但是我无法从共享主机提供商和CPanel加载课程. 接下来,我从 . 显然,问题是,我缺少什么. 我在编码字符串中阅读有关转换 +符号的某个地方,但我不确定吗? 主要问题是如何通过电子邮件发送帆布图像,我对此没有完全的了解.我遵循了一些帖子,我认为我需要在Serveride上创建一个临时图像文件,以便能够将其连接到带有邮件功能的构建的电子邮件中.因为0个字节实际编写,因此首先解决该问题似乎是合乎逻辑的,而邮件问题将解决自身. 从下面的评论中,似乎首先创建图像不是必要的,但是我必须在有可行的解决方案之前进行更多研究. 另外,如果有人有另一个解决方案或PHP类以发送邮件正文的图像 与附件相反 我用ajax 发送此消息 var canvas = document.getElementById('doodle'); function serialize(canvas) { return canvas.toD
0 2023-06-01
编程技术问答社区
认证facebook canvas应用程序返回code=。
我的Facebook Canvas应用程序目前正在开发中有问题一个> 我的画布URL是http://localhost:8080/fbcanvas/ 在Facebook上,URL设置为http://apps.facebook.com/app_name/ 问题是,在用户批准我的应用程序后,我将代码作为$_GET['code']变量. 在Facebook文档中,它没有说出有关获得$_GET['code']的任何内容,它只是说signed_request 这是我从Facebook示例中使用的代码. require_once($_SERVER['DOCUMENT_ROOT'] . '/classes/Page.php'); require($_SERVER['DOCUMENT_ROOT'] . '/core/config.fb.php'); $canvas_page = 'http://apps.facebook.com/khawamusic/'; $au
0 2023-06-01
编程技术问答社区
在HTML表格中提交Canvas数据
如何在php codeigniter表单中提交Canvas内容? 我的表格上的输入之一是Canvas用于绘图或网络摄像头照片. 我创建了一个标签并将其值设置为base64内容: myPictureInput.value = canvas.toDataURL(); 但是,当用户提交表单时,从中读取的后值被截断为64kb. 是否有一种最佳方法与表单数据一起发布或提交图像? 解决方案 如这个答案,您应该分别发送帆布在完成回调的内部提交功能. var dataURL = canvas.toDataURL(); $(function() { $(form).submit(function(e) { e.preventDefault(); $.ajax({ type: "POST",
0 2023-05-31
编程技术问答社区
将画布图像保存到服务器
我正在尝试将画布映像保存到服务器.我可以保存该文件,但总是0字节.我的代码怎么了? function test(){ var canvas = document.getElementById("cvs"); var dataURL = canvas.toDataURL(); $.ajax({ type: "POST", url: "upload.php", data: { imgBase64: dataURL } }).done(function(o) { console.log('saved'); }); } php:
0 2023-05-31
编程技术问答社区
HTML5画布的填充文本和字体|面孔
一直在围绕Stackoverflow和Google上寻找解决此问题的方法,但解决方案的运气很幸运. 发生的事情是我的字体字体在正确的时间没有加载.我正在进行的是我有一个HTML5画布和JavaScript,其中我正在绘制一些简单的圆圈,其中包含填充文本.现在圈子被绘制了,但文本本身是错误的字体. 我假设原因是因为字体是最后加载的,它只是选择默认字体. 现在我的问题是...有没有办法可以延迟绘制的画布对象直到字体加载?这样,字体就可以准备使用,并将正确的字体分配给画布对象. 我应该指出,我有一个index.php文件,其中包括我的其他php文件,其中javascript和canvas实际上正在绘制. 解决方案 使用此技巧并将onerror事件绑定到Image元素. . 演示在这里: http://jsfiddle.net.net/g6lyk/ - 在最新的Chrome上工作. var canvas = document.getElementById
0 2023-05-30
编程技术问答社区
Facebook画布应用 "redirect_uri "在授权和认证后脱离iframe
我正在升级我现有的FB应用程序,并且绝对要尝试获得一个简单的PHP iFrame Canvas应用程序来授权和身份验证(以及使用SSL).从来没有看过这么多示例... 这是我陷入困境的地方:用户授权应用程序并在应用程序验证用户(我可以使用令牌确定的情况下做出图形请求),redirect_uri发生了,整个页面都会刷新,留下Facebook然后,我向我展示了我的" canvas url"页面(带有我的服务器域)的内容,而不是在Facebook上. 我目前有一个粗略的两个步骤... 这是我的代码在第一页上的样子(index.php):
0 2023-05-30
编程技术问答社区
使用ajax和php上传画布上下文为图片
我有一个画布,我想使用Ajax和PHP上传画布上下文.我希望最终输出是存储在服务器上的图像.我已经使用表单上传了图像上传.但是现在我想让画布上下文将其转换为映像并上传到服务器! 那么,我该怎么做?任何建议,algos或解决方案都将受到赞赏! 解决方案 >这篇博客文章恰当地描述了使用Ajax查询将帆布保存到服务器上的方法,我想这应该适合您. 基本上,您将需要一个var canvasData = testCanvas.toDataURL("image/png");在JavaScript中检索画布的内容.这将是一个 base64 编码字符串,类似这样:data:image/png;base64,fooooooooooobaaaaaaaaaaar==. 以下代码将确保Ajax查询将内容发送到HTML: var ajax = new XMLHttpRequest(); ajax.open("POST",'testSave.php',false); ajax.setR
2 2023-05-27
编程技术问答社区
将Div内容或画布保存为图像
我已经阅读了一些类似的问题和答案,但是没有一个完全解决我的问题. 这是我的场景: 我有类似于Tinymce(虽然是家庭酿造版本)的编辑器的内容.它允许用户输入一些文本,以及一个或两个图像等.我有代码将项目带入其中,并将它们实时渲染为较小的DIV(本质上是缩略图). 这是我想做的 最终,用户可能想在其他地方使用其"页面",因此我想让他们进入屏幕,查看每个页面的缩略图,然后选择一个. 这是问题 显然,我只能使用相同的缩略图代码来渲染每个页面缩略图.但是,它可能是带宽密集的(每个页面都有几张图像,更不用说计算必须多次执行 - 我们在预览页面上谈论的是40至50个缩略图). > 所以,我想尝试采用缩略图div,并以某种方式在编辑器中保存页面时以某种方式创建PNG或JPG我的PHP脚本将图像保存到服务器. 我的第一个想法是,也许画布可以做到这一点,但是有一个问题,即首先将文本和图像转换到画布上,这可能是或可能是不可能的. 这样就这样了.我对任何和所有选项都感兴
0 2023-05-26
编程技术问答社区
试图使用输入类型文本传递超过524288字节的ToDataURL
我正在尝试使用画布的数据图创建图像(使用JavaScript).当用户列出提交时,该值将发送到输入类型的文本标签(例如),但是,显然在Chrome上,该文本的长度为524,288个字符. 我将其发送到输入标签,因为我需要在php中获取值(作为$ _post ['dataurltext'];),以便我可以创建图像并将其上传到我的Web服务器. 关于如何绕过这一长度的任何想法? 我应该使用评论框吗? 感谢您的任何帮助,将不胜感激. 解决方案 尝试发送canvas为Blob at javascript;使用fopen() php://input作为参数,以读取Blob,stream_copy_to_stream或file_get_contents(),file_put_contents()在php 上处理文件 请参阅 HTMLCanvasElement.toBlob() if (!HTMLCanvasElement.pro
0 2023-05-26
编程技术问答社区
Fabric.js 将画布(或对象组)夹在多边形中
我在织物上绘制了一个帆布.js我正在添加一组矩形,我想限制这些矩形的边缘作为一个组,以不走出某个区域. 想象一下制作条纹T恤,通过使用一系列矩形来制作条纹,我需要保持它们的形状. 我认为最好将整个画布夹在T恤的形状上,因此我添加到的任何东西都保留在T恤中,但我被卡住了.到目前为止,我只是剪辑到基本圆圈和矩形. 谢谢 解决方案 您只能在canvas.clipTo内部呈现形状:) 我刚刚在 kitchensink 中加载了随机的SVG形状. var shape = canvas.item(0); canvas.remove(shape); canvas.clipTo = function(ctx) { shape.render(ctx); }; 在 如您所见,整个画布现在都被SVG形状夹住. 其他解决方案 您也可以尝试此操作: var clipPoly = new fabric.Polygon([ { x: 180, y: 1
0 2023-05-26
编程技术问答社区
用高质量的图像导出画布的最佳做法是什么?
我需要您的帮助. 我解释了我的情况:我正在使用Fabric.js库将形状,文本等放置在我的应用程序中. 我的帆布尺寸具有1000x1000像素(约26.45x26.45厘米). 我有一个图像上传脚本仅用于高质量上传图像,例如300 dpi. 基本上我要做的就是以下内容: - 绘制画布(上传图像,放置文本等……); - 调整大小乘以比例因子的画布,以便在末端具有300dpi的图像; - 将画布保存在png格式中; - 使用php/ajax和Imagick,将画布与300 dpi质量放置,以JPG格式节省. 问题是:当我保存画布时,上传图像的质量将颁布,因为我调整了帆布的大小为72 dpi(我保存在png中的那一刻). 我认为一个可能的解决方案是:上传图像时,将位置保存在X和Y位置和大小的数组中,并将其替换为JPG中的图像.如果这是最好的方法,则可以使用Imagick库或php进行制作? 我想知道您对此的看法. 谢谢. 解决方案 在处理图像时,DPI根本
0 2023-05-26
编程技术问答社区
使用Ajax和PHP $_FILES从Canvas元素中发送图片
我需要能够将图像和某些表单字段从客户端帆布元素发送到php脚本,最终以$ _post和$ _FILES的形式发送.当我这样发送时: var img = canvas.toDataURL("image/png"); ... ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str); var request_body = boundary + '\n' + 'Content-Disposition: form-data; name="formfield"' + '\n' + '\n' + formfield + '\n' + '\n' + boundary + '\n' + 'Content-Disposition: form-data; name="async-upload"; filename=
0 2023-05-26
编程技术问答社区