javascript - 如何在不使用 image.src 或 image.onload 的情况下将 png base 64 转换为像素数组?
问题描述
我想知道如何在具有不允许它的 CSP 的站点上加载 base64。这意味着我们不能做这样的事情:
image.src = "data:image/png;base64..."
所以我想我需要找到一种不同的方法。我尝试将 base64 转换为二进制字符串,然后从中获取包含像素图像数据的 UintArray。
我不知道如何从loadImage函数中获取图像,也不知道在获取像素时我做错了什么。
我知道从二进制字符串到像素数组的转换是错误的,base64 必须有某种类型的转换方式,这是我们大多数人都不知道的。
这是我试图解决这个问题的代码:
var canvas = document.getElementById("canvas");
var imageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAB4CAYAAAC0CXGGAAAD2ElEQVR4Xu1cMWhTURRNXAJ1l8QhlWwBoRahOIlOpS4tNF1cig6CQ4SOGnAQomPADIKD0sWlKbRLSyfFSQJSC0K2YDPY4G6hi7p6z4d7uPxXCfFk+7nvv5/zzrnv3Xvf+ykWgp9er/f771sajUYx2IVpnre/8MPzPhDB5u1PACZeQkjxu/aRUcHd1py5ZoBS90cllPqBqfsTgImTEKMYp8HUAKL9ZyQkAGRlTj1A08/A4eGhG+rMz8/nCYUK0f5xnaEMRB8QRRPtXwBwhCdOQvgDW62Wif/L5bJp0u/3zXW1WnVVNBqNjH1hYcFcj8djc91ut91ogYYSAgB8iAEYkIyEmGSaO29djbduLLn29qd9195duRfyCQHIzFpiIKeEMFrEET45OXE1jPM4NsZ1BO2VSsXtPxxKCACMgBiAhImGEugTGP6y2AglyGIfDA5ZnUkAxACEz8kl1O12TT7w/s0PI+uLV7+Z659fr7jzOGt/+/4lc3+z2cyXDwgA8CEGWD6AAkYJoR19on7nl+sDg70Lxo6ax5uT+4AAiAGrgXAosbu762t8MHDt9XrdtS8vLxt78lhIAMQA8QGWE7Ny+MHBgavxxcVF186KxblzYgEQA/Z4D91ieri/ZjT7oPzEXKPm2Tw/gHUCfeL1+Lnp/9XSlrsuCIAYAKc+dwnhJD57dN18FfWB47nP7rqQ3AcEAGYhMRDNgZ99eWRuQR+YeTzravr0xbGxIwNPr71078ccObMOsCReAMSALTXSUILtiW1ubuZaB9bX113N455ZOB8QABhfjEbFAAoQc+JoGSUaC7H2rE5EnVgAiA+IAVYHQgnhmTjMyKKxEObEeKILfQB9tigAUIkTA3AsMywhDB3Y+Z/UVQnUOJ4EwNgo4wMCQOr/rDL3/zFwc3vVnIVY+37LDAKejcYRwhFlK2u0PZ4v2rr8wfyEogBAnUcMgEbDEsqUDndmzFfYIebE0ZUYMzL0ueOVUzdnzviAAAQrc2KAhdOTVlYJ5wMCkLg";
canvas.width = 540;
canvas.height = 360;
var ctx = canvas.getContext('2d');
function loadImage(base64)
{
var binary_string = window.atob(base64.split(",")[1]);
var len = binary_string.length;
var pixels = new Uint8Array(len);
for (var i = 0; i < len; i++)
{
pixels[i] = binary_string.charCodeAt(i);
}
putImageData(ctx, {
data: pixels,
width: 100,
height: 100
}, 0, 0);
var img = new Image();
img.crossOrigin = "Anonymous";
console.log(pixels);
return img;
}
loadImage(imageBase64);
//ctx.drawImage(loadImage(imageBase64), 0, 0);
function putImageData(ctx, imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
{
var data = imageData.data;
var height = imageData.height;
var width = imageData.width;
dirtyX = dirtyX || 0;
dirtyY = dirtyY || 0;
dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
var limitBottom = dirtyY + dirtyHeight;
var limitRight = dirtyX + dirtyWidth;
for (var y = dirtyY; y < limitBottom; y++)
{
for (var x = dirtyX; x < limitRight; x++)
{
var pos = y * width + x;
ctx.fillStyle = 'rgba(' + data[pos * 4 + 0]
+ ',' + data[pos * 4 + 1]
+ ',' + data[pos * 4 + 2]
+ ',' + (data[pos * 4 + 3] / 255) + ')';
ctx.fillRect(x + dx, y + dy, 1, 1);
}
}
}
也许如果我们能找出 base64 是如何工作的,那么我们就可以做到。并且:任何帮助将不胜感激:)谢谢!
解决方案
browserify 的代码在这里生成的文件(480kB):
var PNG = require('pngjs').PNG;
function getPNG(bin) {
return PNG.sync.read(bin);
}
function loadImage(base64)
{
var binary_string = Buffer.from(base64, 'base64');
var png = getPNG(binary_string);
return png;
}
window.getPNG = getPNG;
window.loadImage = loadImage;
和片段演示:
<canvas id=canvas></canvas>
<script src="https://pastebin.com/raw/SN2vwZeg"></script>
<script>
var canvas = document.getElementById("canvas");
var imageBase64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAB4CAYAAAC0CXGGAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMxSURBVHhe7doxaFNRGAXg6KRxlyRD4hpqqUEoTqJTaZcWTBeXoIPgEHcNCArR3TcIDpUsLq3QLi1Z1FECEitiVtshDe52jDbeM/Sd3ub3NtH7cvt/i6cgD6/5T9+9L+9MytHa2tovxD/K5bLzNQ4b9Xpn8efE0gX4Js4bz+ib+jaScbs2g2RIMzzu6+kI+RZeB6QZZePuAJOuryPkW/gdaLfbSHalUgnpZFyvrx1ImvA6wGq1WqwTmUwGyWi1WkhGPp9Hstvd3UUyZmdnkYxer4dk1Ov1of9GHSHfwuuANPPV9ddIdrVr80h29Y9bSHbR0h0kQ+qEjpBv4XWA90Jsb28PyY5nlnGnWDabRbLTvVDShNcBJp0PpL0Rk/Y+0v6f6Qj5Fn4HoiiKdeD9yg8k48Ll70jGz6+XkOykv3/z7kUko1qtagcS7fR1gHEnigt9JLvOZvz/jGeeaQeSLvwO8F5oY2MDya7T6SDZFYtFJLvFxUUkQ/dCSRdeB6QzsfQ8v9lsItnNzc0h2UnfN+iZOGnC78D9rWUk417mEZLBMy/9nuf7BHfiVe8ZkvFyfhXJ0A4kzenrACtsX0UyXDuwM/MJyU47kHThdUA6Az/9/ADJ4A6kHxaQ7Paf7yAZ3IHHV14g2fEZWUfIt/A6wPcB6TuxRqOBZLjeByqVCpIdf2em94GkCb8Drs+BXDsw6nMiHSHfJr8D0nMg7gC/E8dnYte9EJ+J+Z067gDTEfItvA7w3kd6/2fcz4UYv4vBeyMdId8mvwPX396KdWC5ewPJkN7/+dd7IX6/aDX3AcnQEfItvA6wwnoayeCZ5DOx616Iz8TcuZ2lfSQ7HSHfJr8D0nkgac+FmH4Crp/AqNfr9/vF6Wn8MJDuDF9AAsVWpL+FfPvvC+h2u8NL4Eg/Ad90Ab6JCxh36cZt5E+g0XBbYC6XO9jc0O2Wbk6DN6oRoFpFGIhvpv5OFCEc490KAhQXEI7xbRMB+B/MYgsYonH+JKs74LqAw6aGb55SRz5h+pl3T1PCBcVFSiPF4zPqAsbnyPdtMZEwhk/oJYz8l/hLGOdqww/bSimllFJKKaWUi1TqN5LWUoxlg3+MAAAAAElFTkSuQmCC"
var ctx = canvas.getContext('2d');
var png = loadImage(imageBase64.split(",")[1]);
putImageData(ctx, {
data: png.data,
width: png.width,
height: png.height
}, 0, 0);
function putImageData(ctx, imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight)
{
var data = imageData.data;
var height = imageData.height;
var width = imageData.width;
dirtyX = dirtyX || 0;
dirtyY = dirtyY || 0;
dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
var limitBottom = dirtyY + dirtyHeight;
var limitRight = dirtyX + dirtyWidth;
for (var y = dirtyY; y < limitBottom; y++)
{
for (var x = dirtyX; x < limitRight; x++)
{
var pos = y * width + x;
ctx.fillStyle = 'rgba(' + data[pos * 4 + 0]
+ ',' + data[pos * 4 + 1]
+ ',' + data[pos * 4 + 2]
+ ',' + (data[pos * 4 + 3] / 255) + ')';
ctx.fillRect(x + dx, y + dy, 1, 1);
}
}
}
</script>
推荐阅读
- polymer-3.x - 用于聚合物 3 的轮播网络组件
- vb.net - Item.ToString 返回文本 listviewitem: {value} 而不仅仅是文本
- php - Symfony Twig 模板表单重定向损坏
- javascript - 未触发 Vue 指令的 Hook=componentUpdated
- apache - 具有相同 vhost documentroot 的多个 xampp
- cakephp - CakePHP 3.5 写和读 Cookie
- php - 将 json_encode 中的 null 转换为空字符串?
- php - 从 json 文件中删除一个字段(“ID”):
- docusignapi - 通过 C# 中的 DocuSign api 登录时出现“操作已超时”错误
- sql-server - 使用 BCP 运行 SQL 查询