我在 html 画布上绘制图像。
这就是计算像素的方法
for (var i = 0; i < data.length; i += 4) {
var red = data[i]; // red
var green= data[i + 1]; // green
var blue = data[i + 2] ; // blue
}
这就是你如何创建 base64 代码
var dataURL = canvas.toDataURL('image/png');
但这会为带有 RGBa 的 png 图像创建 base64 代码。我该怎么做才能仅从第一个通道创建 base64 代码data[i]
有没有办法手动将其编码为 base64 或提供 toDataURL 选项来执行此操作?我尝试查找文档,但找不到任何内容
Thanks
EDIT
使用 markE 建议进行编辑:
var imageData = ctx.getImageData(0,0,cw, ch);
var data= imageData.data
for (var i = 0; i < data.length; i += 4) {
var grayscale = data[i]*0.2126 + data[i +1]*0.7152 + data[i +2]*0.0722;
data[i] = grayscale; // red
data[i + 1] = grayscale; // green
data[i + 2] = grayscale; // blue
}
var binary = new Uint8Array(data.length);
for (var i=0; i<data.length; i++){
binary[i]=data[i];
}
var s=binary.toString();
var base = btoa(s);
你可以:
- 将剩余的灰度值保存到
Uint8Array
,
- 对该数组进行字符串化
var s=myUint8Array.toString()
,
- Base64 对该字符串进行编码
btoa(s)
.
这是示例代码:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.crossOrigin = "Anonymous";
img.onload=function(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
var uint8 = new Uint8ClampedArray(img.width*img.height);
var imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
var data= imageData.data
for (var i = 0; i < data.length; i += 4) {
var grayscale = data[i]*0.2126 + data[i +1]*0.7152 + data[i +2]*0.0722;
uint8[i]=grayscale;
}
var s=uint8[0];
for(var i=1;i<uint8.length;i++){
s+=','+uint8[i];
}
alert('As string: '+s);
var b64=btoa(s);
alert('As base64 string'+b64);
var ss=atob(b64);
alert('Back to original string'+ss);
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/house16x16.jpg'
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)