如何从画布图像中获得base64
How to get base64 from canvas image?
我找了很多,但没有找到任何正确的
下面是我的代码:
context.drawImage(img, 0, -realDif, width, width*def);
var base64 = canvas.toDataURL("image/jpeg");
toDataUrl返回给我的字符串不是base 64,因为有些人告诉我,我真的找不到一种方法来转换它。有人知道吗?
这就是我得到的,因为你可以在一个在线解码器检查它不工作
string(2415) "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCADhALQDAREAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD8qqACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKACgAoAKAP/Z"
下面是完整的代码
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var URL = window.URL || window.webkitURL,
imageUrl,
img;
if (URL) {
imageUrl = URL.createObjectURL(file);
img = document.createElement("img");
img.src = imageUrl;
img.onload = function() {
URL.revokeObjectURL(imageUrl);
var def = (img.height / img.width);
if(def < 1.25){
dif = (heigh/def) - width;
realDif = dif/2;
context.drawImage(img, -realDif, 0, heigh/def, heigh);
} else {
dif = (width*def) - heigh;
realDif = dif/2;
context.drawImage(img, 0, -realDif, width, width*def);
}
}
}
var inpHidden = document.getElementById("img64");
inpHidden.value = canvas.toDataURL("image/jpeg");
document.getElementById("avatarForm").submit();
如果我只是不发送表单在最后我可以看到画布被正确绘制在上一页…
我刚刚把canvas.toDataURL("image/jpeg");
放到了onlad函数中,现在它可以工作了
if (URL) {
imageUrl = URL.createObjectURL(file);
img.src = imageUrl;
img.onload = function() {
//URL.revokeObjectURL(imageUrl);
var def = (img.height / img.width);
if(def < 1.25){
dif = (heigh/def) - width;
realDif = dif/2;
context.drawImage(img, -realDif, 0, heigh/def, heigh);
} else {
dif = (width*def) - heigh;
realDif = dif/2;
context.drawImage(img, 0, -realDif, width, width*def);
}
var inpHidden = document.getElementById("img64");
inpHidden.value = canvas.toDataURL("image/jpeg");
document.getElementById("avatarForm").submit();
}
希望这能帮助到某个人,特别感谢大家@Kaiido
相关文章:
- Html页面上的多个Base64图像和平滑加载
- 如何使用jquery将base64图像路径转换为真实路径
- 显示生成的gif;base64图像使用C#代码隐藏在img中使用JavaScript
- 一个javascript实现base64图像编码并将结果写入文本文件
- base64图像未显示
- 如何使用JavaScript将Base64图像更改为常规图像
- 如何使用Java解码由window.btoa编码的base64图像
- 在 servlet 上上传画布 base64 图像
- 将base64图像数据作为src分配给图像时,Firefox和Chrome上的结果不一致
- 在jQuery中更新base64图像字符串时未进行图像刷新
- 我已经从d3图表中创建了一个base64图像,需要使用客户端javascript或angular将其发布到faceboo
- 使用Opera自定义base64图像光标-可能
- 如何在灯箱中打开Base64图像
- 循环浏览 base64 图像并保存为 pdf
- Base64 图像通过 Ajax encodeURIComponent 发送
- 合并 base64 图像
- 在javascript中将base64图像转换为文件,或者如何使用jquery ajax传递一个大的base64字符串
- Base64 图像存储
- 如何在Raphael paper.image中嵌入Base64图像格式
- Javascript:调整base64图像的大小并以非异步方式返回字符串