我正在玩一个完全基于javascript的zip/unzip实用程序的想法,任何人都可以从浏览器访问.他们可以直接将他们的zip拖到浏览器中,然后让他们下载所有文件.他们还可以通过拖动单个文件来创建新的zip文件.
我知道在服务器端做它会更好,但这个项目只是为了一点乐趣.
如果我利用各种可用方法,将文件拖入浏览器应该很容易.(gmail风格)
编码/解码应该没问题.我见过一些as3 zip库,所以我相信我应该没问题.
我的问题是最后下载文件..
window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....'
这在firefox中运行良好,但在chrome中不行.
我可以将文件嵌入到chrome中使用的图像<img src="data:jpg/image;ba.." />,但文件不一定是图像.它们可以是任何格式.
任何人都可以想到另一种解决方案或某种解决方法吗？
假设如下:
技术上可以将整个视频或音频文件编码到base64中,并使用<audio>或<video>将其嵌入到HTML文档中吗？
base64AngularJS中包含数据的变量加载图像我试图找到从包含base64编码图像数据的变量加载图像源的正确方法(例如使用从画布中拉出toDataURL();).
起初我只是尝试这样:
<img src="{{image.dataURL}}" />
其中图像是范围变量,其变量dataURL包含base64数据.这实际上工作得很好,唯一的问题是404我的控制台出错了.像这样的东西:
不太好看.当我尝试这样一个更有棱角的风格解决方案时:
<img data-ng-src="image.dataURL" />
图像根本没有加载.我做了一个你可以找到的小提琴HERE
有什么建议如何在我的控制台中摆脱这个错误？
格鲁夫兔子是对的.这<img data-ng-src="{{image.dataURL}}" />工作......
可以找到工作解决方案 HERE
我在使用IE版本6-9的RFC 2397数据网址方案时遇到问题.使用当前版本的Safari,FF,Opera和Chrome时,下面的示例代码没有问题.
data:text/html;base64,PG1ldGEgaHR0cC1lcXVpdj0icmVmcmVzaCIgY29udGVudD0iMDt1cmw9aHR0cDovL2dvb2dsZS5jb20vIj4g
要么
data:text/html,%3Cmeta%20http-equiv%3D%22refresh%22%20content%3D%220%3Burl%3Dhttp%3A//google.com/%22%3E%20
如果上述代码几乎粘贴在除IE之外的任何浏览器中,它将导航到google.com,当尝试使用IE时,它会失败并出现以下错误.
网页无法显示
最有可能导致:
- 此网页上的某些内容或文件需要您尚未安装的程序.
你可以尝试什么:
在线搜索可用于查看此Web内容的程序.
重新输入地址.
在检查生成的IE错误页面的页面源时,有一个链接引用文件关联和协议.
协议类型:
描述:未知
Windows无法识别此协议.
我意识到使用数据:协议可能不是最直接的,或者在大多数情况下是最好的选择,但我必须将它用于这个特定的项目.
我已经搜遍了所有的解决方案,并尝试了IE的许多例子,希望它是我的语法,但还找到了解决方案.
当使用toDataUrl()来设置图像标记的来源时,我发现保存时的图像比原始图像大得多.
在下面的示例中,我没有为toDataUrl函数指定第二个参数,因此使用了默认质量.这导致图像比原始图像尺寸大得多.当指定1为完整质量时,生成的图像甚至更大.
有谁知道为什么会这样或者我怎么能阻止它？
// create image
var image = document.createElement('img');
// set src using remote image location
image.src = 'test.jpg';
// wait til it has loaded
image.onload = function (){
// set up variables
var fWidth = image.width;
var fHeight = image.height;
// create canvas
var canvas = document.createElement('canvas');
canvas.id = 'canvas';
canvas.width = fWidth;
canvas.height = fHeight;
var context = canvas.getContext('2d');
// draw image to canvas
context.drawImage(image, 0, 0, fWidth, fHeight, 0, 0, fWidth, fHeight);
// get data url …我有一个来自图像文件的数据URL,必须将其传递给另一个函数.沿着从Data-URL到BufferedImage的这条路径,它需要是一个byteArray.
我的方法如下:
String dataUrl;
byte[] imageData = dataUrl.getBytes();
// pass the byteArray along the path
// create BufferedImage from byteArray
BufferedImage inputImage = ImageIO.read(new ByteArrayInputStream(imageData));
// If the picture is null, then throw an unsupported image exception.
if (inputImage == null) {
throw new UnknownImageFormatException();
}
问题是,它总是抛出UnknownImageFormatException异常,这意味着inputImage为null,这意味着,ImageIO.read无法识别imagetype.
我使用ImageIO.getReaderFormatNames()来获取支持的文件名并得到以下列表:
Supported Formats:
jpg, BMP, bmp, JPG, jpeg, wbmp, png, JPEG, PNG, WBMP, GIF, gif
我尝试传递的dataURL就像:data:image/png;base64,...或data:image/jpg;base64,...
据我了解,这些都在受支持的文件列表中,因此应该得到认可.
在这种情况下,还有什么可能导致inputImage为null？更有趣的是,我该如何解决？
标题说这一切真的......我有一个base64 pdf字符串,我追加到:
data:application/pdf;base64,
使用我的网页中的链接将pdf带入新标签页.最初会显示一个空白页面,但随后我刷新页面并显示完美.
这个问题才开始,一旦我更改了我的NodeJS代码以检索PDF,在用https模块检索PDF 但现在我正在使用之前request.
我想知道是否可以强制浏览器(至少Chrome)下载data:text/plainURL.
Chrome会下载二进制URL(例如data:application/zip;base64,...),但不会下载可在浏览器中查看的文件(例如文本文件).
到目前为止,我已经尝试过没有运气的是:
data:text/plain;content-disposition=attachment;filename=test.txt;...
但似乎我无法添加这样的标题.
有没有办法让Chrome下载data:text/plain,...网址？
我想使用以下base64 favicon和一些base64图像.
<link href="data:image/x-icon;base64,AAABAAEAEBAAAAAAAABoBQAAFgAAACgAAAAQAAAAIAAAAAEACAAAAAAAAAEAAAAAAAAAAAAAAAEAAAAAAA..AMAK3WxwAOWT0AK4RgAKHOvQA4hWUAP4lqAD2MagBQm3kATKSBAECcdP//AAD8/wAA+H8AAPA/AADwPwAA4B8AAMAPAACABwAAAgMAAI8BAADfgAAA/8AAAP/AAAD/4QAA//MAAP//AAA=" rel="icon" type="image/x-icon" />
这些会被我的浏览器缓存吗？
我从画布获得base64编码的图像:
var dataURL = canvas.toDataURL( "image/png" );
然后我把它变成这样的数据:
//Remove the beginning identifier and use Chrome/Firefox?safari built int base64Decoder
var data = atob( dataURL.substring( "data:image/png;base64,".length ) );
然后我通过以下方式将其写入文件系统:
event.createWriter(
function(writerEvent)
{
//The success handler
writerEvent.onwriteend = function(finishEvent)
{
...
};
//Error handler
writerEvent.onerror = settings.error;
// Create a new Blob
var blob = new Blob( [ data ], { type: "image/png" } );
//Write it into the path
writerEvent.write( blob );
}
}
我尝试将其设置为图像的src,如下所示:
document.getElementById( "saved" ).src = event.toURL();
这写了文件,我能够找到它并获得一个网址(通过阅读和使用事件:event.toURL() …