在 Javascript 中将 Base64 数据转换并插入到 Canvas
我得到一个数据缓冲区，代表 Base64 中的图像.我得到的数据(以base64表示图像)(部分数据)
<代码> 193,1181,25,21,211 ,111111,211,2111111111111111111111111111118.11111111111151515151584,103,136,198,74,212,41,171,203,188,187,69,121,183,255,0,7,75,156,191,140,190,45,181,219,141,43,195,214,107,30,129,3,145,38,110,60,135,185,35,130,119,4,108,244,238,0,227,3,140,86,85,237,134,149,241,3,69,158,251,71,134,93,31,88,211，72,82,1,30,100,76,70,65,12,9,12,141,207,94,184,32,140,215,45,47,196,111,130,177,187,34,120,79,197,65,84,224,8,175,03,20,97,426,785,141,47,227,159,195,111,11,219,223,46,133,225,175,17,91,73,120,170,178,189,196,137,49,96,185,218,50,247,44,64,27,155,167,173,123,252,61,144,97,242,8,63,102,156,234,207,227,169,43,115,77,245,230,119,122,111,104,173,23,78,167,204,103,121,165,108,217,46,88,184,40,124 .....
成功解码.
现在我正在尝试将图像添加到我的画布但没有成功，如下所示:
function fillCanvasImage(x, y, width, height, image, pageID) {如果(图像==")返回;var canvas = document.getElementById("AppPmainCanvas" + pageID);if (canvas && canvas.getContext) {var context = canvas.getContext('2d');如果(上下文){context.clearRect(0, 0, canvas.width, canvas.height);var img = new Image();img.src = base64_decode(图像);//img.onload = function () {context.drawImage(img, 0, 0, canvas.width, canvas.height);//}}}}我将base64的数据转换成:
function base64_decode(data) {var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";var o1, o2, o3, h1, h2, h3, h4, 位, i = 0,交流 = 0，dec = "",tmp_arr = [];如果(！数据){返回数据；}数据 += '';do {//使用 b64 中的索引点将四个十六进制解压缩为三个八位字节h1 = b64.indexOf(data.charAt(i++));h2 = b64.indexOf(data.charAt(i++));h3 = b64.indexOf(data.charAt(i++));h4 = b64.indexOf(data.charAt(i++));比特 = h1 <<18 |h2 <<12 |h3 <<6 |h4;o1 = 位>>16&0xff;o2 =比特>>8&0xff;o3 = 位 &0xff;如果(h3 == 64){tmp_arr[ac++] = String.fromCharCode(o1);} else if (h4 == 64) {tmp_arr[ac++] = String.fromCharCode(o1, o2);} 别的 {tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);}} while (i < data.length);dec = tmp_arr.join('');dec = utf8_decode(dec);返回十二月；};//UTF-8 解码的私有方法函数 utf8_decode(utftext) {变量字符串 = "";变量 i = 0;变量 c = 0,c1 = 0,c2 = 0;而(我 < utftext.length){c = utftext.charCodeAt(i);如果 (c <128) {字符串 += String.fromCharCode(c);我++；} else if ((c > 191) && (c < 224)) {c1 = utftext.charCodeAt(i + 1);字符串 += String.fromCharCode(((c & 31) << 6) | (c1 & 63));我 += 2;} 别的 {c1 = utftext.charCodeAt(i + 1);c2 = utftext.charCodeAt(i + 2);string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63));我+= 3；}}返回字符串；};它不起作用，我执行以下操作:在我的服务器端，我将图像转换如下:
公共静态字符串 BitmapSourceToByteBase64(System.Windows.Media.Imaging.{var 编码器 = 新 System.Windows.Media.Imaging.JpegBitmapEncoder();var frame = System.Windows.Media.Imaging.BitmapFrame.Create(source);编码器.Frames.Add(frame);var 流 = 新的 MemoryStream();编码器.保存(流)；返回 Convert.ToBase64String(stream.ToArray());//我累了 return "data:image/name_jpg;base64,"+Convert.ToBase64String(stream.ToArray());//但是在 web 客户端中序列化 base64 div 4 时出现异常}在我的网站中，我获得了数据(base64 图像)并尝试执行以下操作:context.drawImage(0,0,'data:image/jpeg;base64,'+image);我也试过:context.drawImage('data:image/jpeg;base64,'+image,0,0);
不工作！！！有什么想法吗?
解决方案你不需要解码"一个 base64 字符串来在画布中绘制它，只需将它分配给一个图像源并在你的画布中绘制该图像.
类似这样的:
var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');var img = new Image();img.onload = 函数() {context.drawImage(this, 0, 0, canvas.width, canvas.height);}img.src = "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=<canvas id="canvas" width="50" height="50"></canvas>
确保您的 base64 字符串以 data:image/gif;base64, 部分开头.
image/jpeg、image/png 等.取决于您的编码图像格式.
I get a buffer of data represent an image in Base64.
The data I got (represent image in base64) (part of the data)
193,109,51,74,182,71,212,38,78,62,211,48,81,145,244,39,244,250,215,192,113,46,101,136,203,149,44,6,90,147,197,215,109,66,251,69,47,138,111,202,43,239,122,45,108,125,22,6,149,44,84,103,136,198,74,212,41,171,203,188,187,69,121,183,255,0,7,75,156,191,140,190,45,181,219,141,43,195,214,107,30,129,3,145,38,110,60,135,185,35,130,119,4,108,244,238,0,227,3,140,86,85,237,134,149,241,3,69,158,251,71,134,93,31,88,211,72,82,1,30,100,76,70,65,12,9,12,141,207,94,184,32,140,215,45,47,196,111,130,177,187,34,120,79,197,65,84,224,8,175,93,20,99,176,31,107,24,250,96,85,141,47,227,159,195,111,11,219,223,46,133,225,175,17,91,73,120,170,178,189,196,137,49,96,185,218,50,247,44,64,27,155,167,173,123,252,61,144,97,242,8,63,102,156,234,207,227,169,43,115,77,245,230,119,122,111,104,173,23,78,167,204,103,121,165,108,217,46,88,184,40,124.....
Successfully decode.
Now I'm trying to add the image to my canvas without success as following:
function fillCanvasImage(x, y, width, height, image, pageID) {
if (image == "")
return;
var canvas = document.getElementById("AppPmainCanvas" + pageID);
if (canvas && canvas.getContext) {
var context = canvas.getContext('2d');
if (context) {
context.clearRect(0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = base64_decode(image);
//img.onload = function () {
context.drawImage(img, 0, 0, canvas.width, canvas.height);
//}
}
}
}
I'm convert the data form base64 by:
function base64_decode(data) {
var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,
ac = 0,
dec = "",
tmp_arr = [];
if (!data) {
return data;
}
data += '';
do { // unpack four hexets into three octets using index points in b64
h1 = b64.indexOf(data.charAt(i++));
h2 = b64.indexOf(data.charAt(i++));
h3 = b64.indexOf(data.charAt(i++));
h4 = b64.indexOf(data.charAt(i++));
bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;
o1 = bits >> 16 & 0xff;
o2 = bits >> 8 & 0xff;
o3 = bits & 0xff;
if (h3 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1);
} else if (h4 == 64) {
tmp_arr[ac++] = String.fromCharCode(o1, o2);
} else {
tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
}
} while (i < data.length);
dec = tmp_arr.join('');
dec = utf8_decode(dec);
return dec;
};
// private method for UTF-8 decoding
function utf8_decode(utftext) {
var string = "";
var i = 0;
var c = 0,
c1 = 0,
c2 = 0;
while (i < utftext.length) {
c = utftext.charCodeAt(i);
if (c < 128) {
string += String.fromCharCode(c);
i++;
} else if ((c > 191) && (c < 224)) {
c1 = utftext.charCodeAt(i + 1);
string += String.fromCharCode(((c & 31) << 6) | (c1 & 63));
i += 2;
} else {
c1 = utftext.charCodeAt(i + 1);
c2 = utftext.charCodeAt(i + 2);
string += String.fromCharCode(((c & 15) << 12) | ((c1 & 63) << 6) | (c2 & 63));
i += 3;
}
}
return string;
};
It does not work, I do the following:
in my server side I convert the image as following:
public static string BitmapSourceToByteBase64(System.Windows.Media.Imaging.
{
var encoder = new System.Windows.Media.Imaging.JpegBitmapEncoder();
var frame = System.Windows.Media.Imaging.BitmapFrame.Create(source);
encoder.Frames.Add(frame);
var stream = new MemoryStream();
encoder.Save(stream);
return Convert.ToBase64String(stream.ToArray());
//I tired to do return "data:image/name_jpg;base64,"+Convert.ToBase64String(stream.ToArray());
//But got an exception on serialize base64 div 4 in the web client
}
in my website, I got the data (base64 image) and try to do the following:
context.drawImage(0,0,'data:image/jpeg;base64,'+image);
I also tried:
context.drawImage('data:image/jpeg;base64,'+image,0,0);
NOT WORK!!! any idea?
解决方案 You don't need to "decode" a base64 string to draw it in a canvas, just assign it to an image source and draw that image in your canvas.
Something like this:
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
context.drawImage(this, 0, 0, canvas.width, canvas.height);
}
img.src = "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==";
<canvas id="canvas" width="50" height="50"></canvas>
Make sure that your base64 string starts with the data:image/gif;base64, part.
image/jpeg, image/png, etc.. Depending on your encoded image format.
相关文章