试图使用输入类型文本传递超过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
8 2024-01-11
编程技术问答社区
window.open() 在chrome中打开一个空白屏幕
我在Firefox中检查了相同的代码,并且可以很好地工作.实际上,这几周前在Chrome工作,但是现在我只是在空白屏幕上. 代码如下: 单击按钮上的函数触发. function saving() { var saveURL = canvas.toDataURL(); window.open(saveURL, "_blank", "location=0, menubar=0"); } 解决方案 虽然不再可以在Chrome中执行此操作,但是有解决方法,例如打开空白文档并写信给它. var win = window.open(); win.document.write(""); 其他解决方案 这是因为铬的最新变化: https://developers.google . 出于安全原因,您无法直接打开数据URL. 相反,请使用@savoo 在其他答案中或使用
6 2023-12-05
编程技术问答社区
threejs canvas todataurl是空白的
好吧,我知道canvas.todataurl()将以png格式产生图像.但是,当我尝试从 http://threejs.org/examples/#webgl_lines_sphere .我只看到Chrome上的黑色图像.复制步骤 - 1)打开开发控制台,然后选择帆布元素. 2)canvas = $0 3)context = canvas.getContext('webgl', {preserveDrawingBuffer: true}) 4)img = canvas.toDataUrl() 5)document.write('') 图像是空白的. 但是,我在link http://threejs.s.s.org/examples/#canvas_geometry_cube .请执行以下步骤复制. 1)打开开发控制台,然后选择帆布元素. 2)canvas = $0 3)context = canvas.getContext('2d
24 2023-11-30
编程技术问答社区
Canvas toDataURL()返回空白图片
我正在使用 glfx.js 编辑我的图像,但是当我尝试获取该图像数据时使用toDataURL()函数,我获得了一个空白图像(宽度与原始图像相同). 奇怪的是,在Chrome中脚本完美. 我想提及的是,图像是在canvas中使用on Load Event加载的: img.onload = function(){ try { canvas = fx.canvas(); } catch (e) { alert(e); return; } // convert the image to a texture texture = canvas.texture(img);
14 2023-11-30
编程技术问答社区
无法获得AJAX'的帖子值(纯Javascript)。
我知道这个问题在这个论坛上得到了回答(无法在php php web serivce 中获得值,但是问题和答案都使用了jQuery,在我的情况下,我无法使用它(无论为什么)... 因此,我有一个JavaScript文件,该文件旨在制作帆布的"屏幕捕获"(使用" todataurl()"函数),并使用AJAX将其发送到PHP文件.由于要发送的数据确实很长,因此我无法使用" GET"方法(Ajax返回414错误:" URL太长"),因此我需要使用" post". 我已经在 Plain JavaScript 上遵循了一些示例(这绝对不容易找到,因为每个人都使用jQuery!:P),我的代码看起来像这样: var dataURL = me.video.getScreenCanvas().toDataURL(); var req = false; try{ req = new XMLHttpRequest(); } catch (e){ // IE try{ req =
28 2023-06-11
编程技术问答社区
使用canvas.toDataURL时,如何设置crossOrigin属性?
因此,我正在尝试为我构建的OpenLayers 3应用程序创建打印地图功能.我知道他们的示例我遇到了令人恐惧的帆布问题.我已经阅读了整个互联网,遇到了人们首先要正确设置COR的人(完成并完成),还可以做: var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 上面描述了在这里 . 我的问题是,我以前从未真正使用过todataurl(),我不确定如何确保创建的图像在将其撞到: 之前正确设置了crossorigin属性. Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 有什么想法吗? 我已经看过 this .我的问题是他们如何将其纳入有效的函数
32 2023-05-11
编程技术问答社区
Fabric.js操纵图像对象的像素来改变颜色
我想获取织物图像的数据.图像对象可以循环遍历每个像素,如果给定的颜色为另一种给定的颜色,则将其颜色更改.但是我不想获得整个画布的数据,只有该特定对象的数据.这样的东西 - changeColor = (object, targetColor, replacementColor) => { data = object.getData(); for(var i = 0, n = data.length; i
50 2023-04-20
编程技术问答社区
用img.crossOrigin = "Anonymous "在画布上绘制图像不工作
在客户端独立的JS应用程序中,我正在尝试制作它,以便我可以在画布上调用todataurl(),我绘制了我绘制的一些图像,该图像由URL指定.即,我可以输入文本框中的URL到我想在画布上绘制的任何图像(托管在imgur上),单击一个"绘制"按钮,然后在画布上绘制.最终用户应该能够保存其最终渲染作为单个图像,为此,我正在使用todataurl(). 无论如何,直到他们实际修复了令人讨厌的"操作是不安全"错误(gee,您将告诉最终用户他们可以使用自己的数据可以做什么?将图像添加到DOM中,并将其Crossorigin属性设置为" Anonyous",然后将其绘制到画布上. 这是我的代码的完整工作简化版本(但实际上还有更多功能): #canvas {border:10px solid green;background-color:black;} #imgbox {border:2px solid bl
18 2023-04-07
编程技术问答社区
html2canvas Chart.js图表未被呈现
我正在尝试导出包含图表的DIV.所有元素都非常恰当地显示,但是,Chart.js帆布只是没有渲染. 我在图表中的onanimationcomplete选项的回调中调用我的导出函数,因此在图表完全构建之前不能发生导出. 这是我的HTML2Canvas和下载功能的外观: download() { this.dl.download = this.fileName; this.dl.click(); } loadDataUrl($node) { this.hideUnwantedElements(); html2canvas($node, { background: '#ffffff', scale: 4, proxy: 'proxy-for-cors-images', onrendered: (canvas) => { this.showE
52 2023-03-10
编程技术问答社区
导出jpeg时Chrome toDataUrl质量参数不生效
使用canvas.toDataURL('image/jpeg', 1)在Chrome中,图像丢失了一点,但是在Firefox中,可以,几乎无损,甚至使用默认质量值0.92.似乎无法通过设置Chrome中的质量来工作. 解决方案 是已知的ISU 由于如何处理色度子采样. Chrome的做法与Firefox和Safari不同.后者在1.0设置时使用4:4:4 虽然当前的铬没有.但是,似乎最新的金丝雀(版本33)与其他金丝雀一样. 无论如何,直到它解决了,不幸的是,您和我无法做到的……
34 2023-03-06
编程技术问答社区
从HTML5画布中重构原始的16位Raw像素数据
如果16位单个通道(灰度)原始像素数据无误地编码为图像格式(例如,png,webp,jpeg-x000或jpeg-xr),并将图像呈现为html5画布,则有任何方法从画布中检索原始的16位原始像素数据? 解决方案 no. 当绘制帆布时,图像被未压缩,所有像素数据均已预先绘制并转换为24位数据 + 8位alpha通道(RGBA). 在此过程中,由于各种舍入错误,图像也会丢失所有内容,甚至对于相同的颜色深度原始图像,请参见帆布指纹.) 因此,即使是无损格式也在画布上松散. 如果您需要原始数据,则需要自己编写解析器并将图像文件直接视为arraybuffer.
26 2023-03-06
编程技术问答社区
合并多幅画布并下载为图片
我正在尝试将两个HTML画布合并为一个画布,然后将其作为图像下载.我的代码如下: function downloadCanvas() { var bottleCanvas = document.getElementById('bottleCanvas'); var designCanvas = document.getElementById('editorCanvas'); var bottleContext = bottleCanvas.getContext('2d'); bottleContext.drawImage(designCanvas, 69, 50); var dataURL = bottleCanvas.toDataURL("image/png"); var link = document.createElement('a'); link.download = "bottle-design.png";
18 2023-03-06
编程技术问答社区
用CanvasRenderingContext2D过滤器保存画布
我在使用CanvasRenderingContext2D.Filter保存照片的问题上存在问题.当我连接到视频并尝试在没有任何过滤器的情况下拍摄镜头时,它可以正常节省.但是,将一些过滤器添加到画布后,它将其保存为HTM文件或返回以前的照片,而无需过滤器.很奇怪的是,在单击它手动下载该屏幕截图时,它确实具有自己的Todataurl,正常下载并包含过滤器,但是在使用Todataurl保存它时,它仍然看不到该图片. 我该怎么做才能保存这些过滤器? 这是我的代码的一部分: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var video = document.getElementById("video"); document.getElementById("snapshot").addEventListener("click",
86 2023-03-06
编程技术问答社区
如何将png图像数据阵列转换为视频文件
我从canvas到canvas.getDataURL()中获得帧. 但是,现在我有一系列png映像,但是我想要一个视频文件. 我该怎么做? var canvas = document.getElementById("mycanvaselementforvideocapturing"); var pngimages = []; ... setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000); 解决方案 对于完整的浏览器支持方式,您必须将图像批量发送到服务器,然后使用某些服务器端程序进行编码. ffmpeg可能会做到这一点. 但在最新的浏览器中方法已实施. 它将您的画布图纸转换为WebM视频流,可通过 . 不过,所有这些仍然没有稳定,并且只能在最新版本的浏览器中可用,可能在用户的首选项中设置了一些标志(例如,Chrome需要"实验性网络平台"). var cStream,
28 2023-03-06
编程技术问答社区
是否有可能以编程方式检测数据url的大小限制?
我正在使用JavaScript和HTML帆布来调整JPEG图像大小.调整大小后,我将canvas.toDataURL用作锚固标签中的HREF属性,以提供一个链接,用户可以下载调整大小的图像. 这可以很好地达到一定的图像大小. 似乎不同的浏览器对数据URL的大小有不同的限制:如下所述: https://developer.mozilla.org.org/en-us/us/docs/web/http/data_uris 在Chrome中,当我超过数据URL尺寸限制时,当我单击下载链接时,什么也不会发生;没有错误或任何东西(据我所知). 是否有某种方法可以编程检测数据URL是否太大?也许一些浏览器事件会向我展示单击下载链接是否失败? 理想情况下,我想检测下载是否成功.当数据URL太大时,我想向最终用户展示一个说明,描述如何右键单击图像并选择"另存为...",这似乎总是可行的. 更新1: 看起来canvas.toBlob现在是目前最好的解决方法.这是AP
24 2023-03-06
编程技术问答社区
如何在node.js服务器中实现-toDataURL()函数?
我是使用WebGL实现作为我项目的因模块的新手.我正在尝试使用服务器端的node-webgl包装器使用.todataur()函数.但是我得到一个错误站.todataurl()未定义.有关更多详细信息,请查看以下链接: canvas.todataurl()不是函数 - 错误node-webgl包装器 当前的帖子绝对不是重复的.在帖子(早期链接共享)中,我正在尝试找到一种访问画布数据的替代方法.本文的目的是实现.todataurl()函数.我是这些WebGL的新手.您能否分享有关如何实现此小功能的一些链接或过程.还是我可以访问浏览器实现的相同功能(在此处复制),我可以从哪里得到? 任何建议肯定会有所帮助. 谢谢. 解决方案 数据URI包含: data:[][;base64], 您需要做的就是加入: 字符串"data:" 一种媒体类型 - 例如"image/jpeg" 字符串";base64," base64您
78 2023-01-29
编程技术问答社区
在S3桶上设置跨原产地后,"有污点的画布可能不会被导出 "的问题仍然存在
下面的代码应使用HTML2Canvas库将HTML转换为PDF,然后下载它,但是显示此错误: 未能在" htmlcanvaselement"上执行" todataurl":污染的画布可能不会导出 允许在S3桶上进行交叉原素后,问题仍然存在. html2canvas(document.getElementById('compare'), { scale: window.devicePixelRatio, logging: true, allowTaint:true, onrendered: function (canvas) { var data = canvas.toDataURL(); var docDefinition = { content: [
22 2023-01-26
编程技术问答社区
toDataURL中默认的图像质量是多少?
这是 doc for toDataURL: Syntax canvas.toDataURL(type, encoderOptions); Parameters type Optional A DOMString indicating the image format. The default type is image/png. encoderOptions Optional A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. Other arguments are ignored. If this argument is anything
16 2022-11-11
编程技术问答社区
用django从客户端到服务器保存和加载图像
这是我从客户端发送数据(Coffeescript和Dajaxice)的方式: imageData = canvas.toDataURL("image/png") Dajaxice.draw.saveImage( @saveImage_callback, {'image': imageData } ) 这是我将图像保存在服务器上的方式(取自此答案) ) @dajaxice_register def saveImage(request, image): imageData = re.search(r'base64,(.*)', image).group(1) output = open('image.png', 'wb') output.write(imageData.decode('base64')) output.close() 我想加载图像并像这样发送: inputfile = open('image.png', 'rb') image
22 2022-08-26
编程技术问答社区
Canvas toDataURL()只在Firefox中返回空白图片
我使用 glfx.js 编辑我的图片,但我尝试取得该图片的资料时使用 toDataURL()函数我得到一个空白图像(宽度与原始图像相同)。 奇怪的是,在Chrome脚本工作完美。 我想要提到的是图像加载在画布使用onload事件: img.onload = function(){ try { canvas = fx.canvas(); } catch(e){ alert(e); return; } //将图像转换为纹理 texture = canvas.texture(img); //绘制和更新canvas canvas.draw(texture).update(); //用canvas替换图片 img.parentNode.insertBefore(canvas,img); img.parentNode.removeChild(img) } 此外,我的映像路径在同一个域上; p>
3946 2022-07-19
编程技术问答社区