你能推荐一个没有HTML或atob依赖的JavaScript JPEG库吗?

Can you recommend a JavaScript JPEG library without an HTML or atob dependency?

本文关键字:依赖 atob HTML JavaScript 库吗 JPEG 一个      更新时间:2023-09-26

我在使用 JavaScript 读取 JPEG 二进制数据时遇到了一些问题,并寻找一些关于库或替代方法的建议。

我正在努力修改一个名为jsPDF的开源PDF生成库,以便它可以与Appcelerator Titanium Alloy 3.41项目一起使用。我遇到的问题是,虽然Titanium使用JavaScript,但实现并不支持所有数据类型或方法。

例如,我发现的大多数JPEG库都使用在Web浏览器中实现的atob和btoa方法将base64数据编码/解码为二进制字符串。不幸的是,我正在创建的项目不使用Web浏览器,即使我改变了方法,Titanium的WebView也不支持atob或btoa方法。

我也尝试使用Titanium的base64encode和base64decode实用程序,但是它们返回Blob而不是二进制字符串,并且我见过的大多数将base64转换为二进制字符串的方法都需要ArrayBuffer,而Titanium也没有实现。

我正在按照以下步骤生成 PDF:

  1. 通过将 JPEG 读取到 Blob 并将其转换为 base64 来创建 dataURI。

    var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA.....ooA//2Q==';

  2. 然后,该库从 dataURI 中提取图像数据。然后,该库使用 atob 方法将 base64 转换为二进制字符串,然后如果环境支持 ArrayBuffers,则使用函数将 ArrayBuffer 转换为 Titanium 支持的 Uint8Array。从那里使用二进制数据来提取 JPEG 高度、宽度等。

代码摘自 jsPDF

var base64Info = this.extractInfoFromBase64DataURI(imageData);
if(base64Info) {
  format = base64Info[2];
  imageData = atob(base64Info[3]);//convert to binary string, the base64 encoded JPEG 
 } 
.....
if(this.supportsArrayBuffer()) {
  dataAsBinaryString = imageData;
  imageData = this.binaryStringToUint8Array(imageData);
}
.....
function binaryStringToUint8Array(binary_string) {
  var len = binary_string.length;
  var bytes = new Uint8Array( len );
  for (var i = 0; i < len; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return bytes;
};

我在IE 9中使用jspdf.plugin.addimage.js遇到了同样的问题,其中没有实现atob。你能试试这个填充物吗?https://github.com/davidchambers/Base64.js

这是一个纯JavaScript示例。

// Create Base64 Object
var Base64= {_keyStr:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",encode:function(e){var t="";var n,r,i,s,o,u,a;var f=0;e=Base64._utf8_encode(e);while(f<e.length){n=e.charCodeAt(f++);r=e.charCodeAt(f++);i=e.charCodeAt(f++);s=n>>2;o=(n&3)<<4|r>>4;u=(r&15)<<2|i>>6;a=i&63;if(isNaN(r)){u=a=64}else if(isNaN(i)){a=64}t=t+this._keyStr.charAt(s)+this._keyStr.charAt(o)+this._keyStr.charAt(u)+this._keyStr.charAt(a)}return t},decode:function(e){var t="";var n,r,i;var s,o,u,a;var f=0;e=e.replace(/++[++^A-Za-z0-9+/=]/g,"");while(f<e.length){s=this._keyStr.indexOf(e.charAt(f++));o=this._keyStr.indexOf(e.charAt(f++));u=this._keyStr.indexOf(e.charAt(f++));a=this._keyStr.indexOf(e.charAt(f++));n=s<<2|o>>4;r=(o&15)<<4|u>>2;i=(u&3)<<6|a;t=t+String.fromCharCode(n);if(u!=64){t=t+String.fromCharCode(r)}if(a!=64){t=t+String.fromCharCode(i)}}t=Base64._utf8_decode(t);return t},_utf8_encode:function(e){e=e.replace(/'r'n/g,"n");var t="";for(var n=0;n<e.length;n++){var r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r)}else if(r>127&&r<2048){t+=String.fromCharCode(r>>6|192);t+=String.fromCharCode(r&63|128)}else{t+=String.fromCharCode(r>>12|224);t+=String.fromCharCode(r>>6&63|128);t+=String.fromCharCode(r&63|128)}}return t},_utf8_decode:function(e){var t="";var n=0;var r=c1=c2=0;while(n<e.length){r=e.charCodeAt(n);if(r<128){t+=String.fromCharCode(r);n++}else if(r>191&&r<224){c2=e.charCodeAt(n+1);t+=String.fromCharCode((r&31)<<6|c2&63);n+=2}else{c2=e.charCodeAt(n+1);c3=e.charCodeAt(n+2);t+=String.fromCharCode((r&15)<<12|(c2&63)<<6|c3&63);n+=3}}return t}}
// Define the string
var string = 'Hello World!';
// Encode the String
var encodedString = Base64.encode(string);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"
// Decode the String
var decodedString = Base64.decode(encodedString);
console.log(decodedString); // Outputs: "Hello World!"

https://scotch.io/tutorials/how-to-encode-and-decode-strings-with-base64-in-javascript