[英]Looking to convert canvas to base64 image
I have this code which reads a file (an image) from the local filesystem and I want to resize the image so I can upload it to a server in a smaller format. 我有这段代码可以从本地文件系统读取文件(图像),并且我想调整图像的大小,以便可以将其以较小的格式上传到服务器。 The problem I am having is that I can't figure out how to resive it and convert it back to base64 so that I can send that base64 string to Cloudinary servers. 我遇到的问题是我无法弄清楚如何还原它并将其转换回base64,这样我就可以将该base64字符串发送到Cloudinary服务器。 The file is more than 2 megabytes, as it is, and I believe I can get it down to less than half an MB if I resize the file. 该文件的大小实际上已经超过2兆字节,并且我相信如果我调整文件大小可以将其减少到不到一半MB。
$scope.addLocalImage = function (file) {
var reader = new FileReader();
reader.onload = function () {
var tempImage = new Image();
tempImage.src = reader.result; // to get the base64 result
var height = tempImage.height;
var width = tempImage.width;
if (height > 100) { // max height for our purposes is 100 pixels
width = width / (height / 100);
height = 100;
}
if (width > 150) { // max width for our purposes is 150 pixels
height = height / (width / 150);
width = 150;
}
var c = document.createElement('canvas');
c.width = width;
c.height = height;
var ctx = c.getContext("2d");
ctx.drawImage(tempImage, 0, 0, width, height);
var b64str = c.toDataURL("image/jpeg"); // this is not base64, how can I get a base64 string?
var localImage = {
originalImageURL: b64str,
origin: "local",
imageObject:{
result: b64str
}
};
$scope.suggestedImages.push(localImage);
$scope.selectImage($scope.suggestedImages.length - 1); // Select new image
$scope.$apply();
};
reader.readAsDataURL(file); //this initiates the loading of file to browser
};
the problem is that " var b64str = c.toDataURL("image/jpeg");
" yields a malformed string, it's not base64. 问题是“ var b64str = c.toDataURL("image/jpeg");
“生成格式错误的字符串,而不是base64。 If I were to guess I would think this line is incorrect, or I need to add some code here to convert the canvas to base64. 如果我想我会认为这行是不正确的,或者我需要在此处添加一些代码以将画布转换为base64。 The malformed string is "data:,", which looks the the beginning of a base64 string, but is truncated 格式错误的字符串是“ data :,”,它看起来是base64字符串的开头,但是被截断了
The image needs an onload
handler, so drawing to the canvas doesn't happen before the image has loaded 图片需要一个onload
处理程序,因此在图片加载之前不会绘制到画布上
$scope.addLocalImage = function (file) {
var reader = new FileReader();
reader.onload = function () {
var tempImage = new Image();
tempImage.onload = function() {
var height = tempImage.height;
var width = tempImage.width;
if (height > 100) { // max height for our purposes is 100 pixels
width = width / (height / 100);
height = 100;
}
if (width > 150) { // max width for our purposes is 150 pixels
height = height / (width / 150);
width = 150;
}
var c = document.createElement('canvas');
c.width = width;
c.height = height;
var ctx = c.getContext("2d");
ctx.drawImage(tempImage, 0, 0, width, height);
var b64str = c.toDataURL("image/jpeg");
var localImage = {
originalImageURL: b64str,
origin: "local",
imageObject:{
result: b64str
}
};
$scope.suggestedImages.push(localImage);
$scope.selectImage($scope.suggestedImages.length - 1); // Select new image
$scope.$apply();
}
tempImage.src = reader.result; // to get the base64 result
}
reader.readAsDataURL(file); //this initiates the loading of file to browser
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.