草庐IT

todataurl

全部标签

javascript - 从 Canvas 保存图像时缺少扩展名

我使用此代码在Javascript中保存图像:window.location.href=grid.toDataURL("image/png").replace("image/png","image/octet-stream");代码有效,但保存的文件没有任何扩展名,我必须手动重命名。我的问题是如何将扩展名放在末尾?谢谢。 最佳答案 toDataURL生成数据uri而不是文件名,因此扩展名不适用于这种情况。data-uri只是二进制内容的文本编码版本,某些浏览器可以将其作为文件读取——如果您愿意,也可以是数据流。由于数据流没有任何文件

javascript - canvas.toDataUrl() 返回 'data:,'

我正在尝试调整图像大小并使用canvas.toDataUrl()取回base64字符串表示形式。我的代码如下(见下文)。我的问题是,每次我第一次启动它时,它都会返回“data:,”。然后,当我重新调整大小(使用按钮调用)时,它工作正常,并返回一个非空的base64字符串。这是怎么回事?functiondrawAndResizeFunction(images)varqDraw=$q.defer();//1drawCanvasWrapper().then(function(canvasData){qDraw.resolve(canvasData)});//2functiondrawCanv

javascript - 使用 javascript 将 Canvas 图像上传到 imgur (api v3)

我正在构建一个有趣的Chrome实验。mustache镜子!http://sjoerddijkstra.nl/cam/我想使用ImgurAPIV3将图像从tecanvas上传到Imgur,然后显示链接,但我真的不知道该怎么做。我找到的所有工作示例都使用V2API...我使用canvas.toDataURL:vardataURL=canvas.toDataURL("image/png");returndataURL.replace(/^data:image\/(png|jpg);base64,/,""); 最佳答案 Imgur文档在I

javascript - canvas.toDataURL() 和 drawImage() 的安全错误

vardiv=document.getElementById("new");varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");varimg=newImage();img.src='http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';//img.src='local.png';img.onload=function(){//drawstheimageonthecanvas(works)ctx.drawImage(img,0,0

javascript - 如何将png图像数据数组转换为视频文件

我正在通过canvas.getDataURL()从canvas获取帧。但是,现在我有一组png图像,但我想要一个视频文件。我该怎么做?varcanvas=document.getElementById("mycanvaselementforvideocapturing");varpngimages=[];...setInterval(function(){pngimages.push(canvas.toDataURL())},1000); 最佳答案 要获得完整的浏览器支持方式,您必须将图像批处理发送到服务器,然后使用一些服务器端程序

javascript - 如何为按钮提供浏览器 "save image as"选项

我正在做一个Canvas绘图项目。我将Canvas转换为图像,然后将该图像保存为“.png”。我必须右键单击图像并选择“将图像另存为”选项。但我想通过一个按钮提供该选项。当我单击按钮时,它应该被保存。任何例子或想法将不胜感激。这是一个将canvas转为png的js函数。functionsave2(){window.open(canvas.toDataURL('image/png'));vargh=(canvas.toDataURL('png'));alert("converted");} 最佳答案 在现代浏览器中你可以使用下载属性f

javascript - phantomjs 使用 src 图像在 canvas.toDataURL 上抛出 DOM 异常 18

我正在尝试使用phantomjs将svg转换为png图像:varpage=require('webpage').create();page.evaluate(function(){varsvg='';varsrc='data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(svg)));varimg=newImage();img.src=src;img.onload=function(){varcanvas=document.createElement('canvas');canvas.width=img.w

javascript - toDataURL 与 toDataURLHD

所以我看到有人提出了一些新的(大概)功能;toDataURLHD、toBlobHD、getImageDataHD等“以原生Canvas位图分辨率返回[数据]”(http://developers.whatwg.org/the-canvas-element.html)。但是我不明白这些术语。这是否意味着在某些情况下非高清版本会在返回之前重新缩放图像数据?(即在高分辨率显示器上toDataURL可能会生成质量低于实际Canvas的图像),或者这只是指图像中的每英寸像素元数据?我一直在尝试尽可能多的缩放方法(fiddle:http://jsfiddle.net/SktKQ/),它似乎总是逐个

javascript - 如何在 javascript 中获取 HTML5 Canvas.todataurl 文件大小?

vardata_url=canvas.toDataURL("image/png");varimg=$("#img").attr("src",data_url);img文件的大小是多少? 最佳答案 如果你想知道data-url的字节大小,你可以这样做:varimgFileSize=data_url.length;但这不是png大小的实际大小。您可以通过这种方式非常准确地近似于真实的PNG大小:varhead='data:image/png;base64,';varimgFileSize=Math.round((data_url.len

javascript - canvas.toDataURL 导致纯黑色图像?

我有一个Canvas元素,里面有一些涂鸦。我正在使用以下方法将Canvas转换为jpeg:vardata=canvas.toDataURL("image/jpeg",0.5);varimg=newImage();img.src=data;$("body").append(img);然而,我得到的不是我的涂鸦,而是纯黑色的jpeg。谁能告诉我我做错了什么?谢谢! 最佳答案 发生这种情况是因为JPEG不支持透明背景。如果您希望支持透明背景,请使用png(默认扩展名),否则您可以使用为Canvas设置非透明填充颜色。fillStyle和。