javascript - 获取对象HTMLImageElement而不是base64字符串

时间:2016-12-15 19:24:10

标签: javascript jquery html5 image canvas

这是我上一个问题的延续,但问题是新问题,该问题的解决方案没有帮助。这是一个新问题。

以下是我之前提问如何将画布转换为图片的链接:javascript- unable to convert canvas to image data

我希望得到图像的base64编码字符串,我可以通过AJAX调用将其发送到PHP服务,PHP服务会将其转换为图像并将其移动到指定目录。

将画布转换为图像的功能

function convertCanvasToImage(canvas) 
{
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    return image;
}

这是我创建的表单:

var url = 'url to php service';
var file =  dataURL; //this is the image url that i'm sending
console.log(file);

var formdata = new FormData();
formdata.append("base64image", file);
formdata.append('csrf_test_name',csrf_token);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) {
    uploadcomplete(event);
}, false);
ajax.open("POST", url);
ajax.send(formdata);

我尝试了console.log()画布返回的图像,这就是我获得的图像:

 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAgAElEQVR4nGzbZ3Mba5au6fqvJ2JiTs/pPtVV20j0sOm9T3iARqI3IOi9SIoGHqATJe29q/v8jXs+QMWeHT0fnkgGyUgCiRfIi2ut9y9OqYGZ3yKqHWHlttFiCz1nE8Q+XuDiuSb5XEBccYgrDv6si5ZTMOZMzHkLMS6gFspI8TxiOEfkfCS0P1AM1lmcPaJYPcbyNvDDHUqVU5zdTaS1j4hFm3Erg5bxCK0KxXiWUm6OcLaAW46xCzZBNcAOF3FzK8TBIoG7QC7v4AUalqdRquVQZxeQa/PYc2vYc2uUnWUCuYovR+TMEoEVY8oOnhES2jlKVo2au0DZXiVSF/DciDDMUyjOEuerGGqJYm6VaG6DhBahOyW8eB4rrBGVl5BmZ5FmZ1HyLlrJZ37ep1jUyXseOdel7FWpBrMUgwXy3ixGJGLlZLRIxipoh...Hd7sRkseD2ebFF/Bj9btUYEnDzGHRy57XgcDiw2WyYDPdYzFp0dgvXBh0XeiPmYBit2YzBbufR4uDR4kBrd3BtNHHvs6ty3HJru+beoUXn0vPgNaD1Gbl1udFYbWhMFlU2E7du+zTmRWt75MGqw+axYvNYebRpMbmNaF0OzEE/+nQAXcrHpeBAk7BzJTm4zXg4Kdq4afq4nGS4fslyO85x1IizEbWwJzo5Lzu4bfk560Y5agY57SfYawS57sS4akfRFJxc5B1cl7XcVh85Gfo47HvYaFvY6ds5Hvg5GQY4bUY5rofQtAUumgk0XVXXozSXQxX+rnsSt20nmrqFG+URbdHMVSOGphbmrCNw1hG46Dg4aaoxP0c1B0dVD7sFO0cFG0cFG+fKNSeyhjPhBI10zmnqnPP0xRQAD1Pqs7CSV7VV3mCztM5Rbpnz8joXHSPXfQuXPQ9XAy9noxgXE4HT/8pz8X/L/D+QyAVhXuteXgAAAABJRU5ErkJggg==">

它有图像标签。也许是因为那个;当我将它传递给PHP服务时,它无法转换它。这是我调试时返回的内容

object HTMLImageElement

我尝试使用下面给出的函数将上面提到的图像标记转换为base64,但它失败了。

function encodeImageFileAsURL(cb) {
    return function(){
        var file = this.files[0];
        var reader  = new FileReader();
        reader.onloadend = function () {
            cb(reader.result);
        }
        reader.readAsDataURL(file);
    }
}

任何人都可以帮我理解我在这里缺少的东西吗?非常感谢!

参考: https://davidwalsh.name/browser-camera

https://davidwalsh.name/convert-canvas-image

1 个答案:

答案 0 :(得分:3)

data URI元素位于变量src的{​​{1}}元素的<img>处。将image元素的src的值传递给<img>,而不是php html元素。

<img>