我使用FileReader获取图像的base64代码。 如果我使用画布并放入画布base64。比应用画布调整大小。我获得了新图像的新base64代码?
代码示例。
reader.onloadend = function(event) {
var canvas = document.getElementById("temp_canvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload = function() {
var ratio = (imageObj.width > imageObj.height)?Math.ceil(imageObj.width / imageObj.height):Math.ceil(imageObj.height / imageObj.width);
console.log(ratio);
if(imageObj.width > 512) {
imageObj.width = 512
imageObj.height = imageObj.width * ratio;
}
console.log(imageObj.width);
console.log(imageObj.height);
$(canvas).attr('width',imageObj.width);
$(canvas).attr('height',imageObj.height);
context.drawImage(imageObj,0,0,imageObj.width,imageObj.height);
}
imageObj.src = event.target.result;
$('.image-for-crop').attr('src',event.target.result);
$('#dialog-foto').dialog({modal:true});
}
如果我做var dataURL = canvas.toDataURL();
我的主要问题是:“任何时候我更换画布:裁剪,调整此画布的e.t.c. base64代码也会改变吗?”
答案 0 :(得分:1)
是的,使用2d context
API所做的任何更改都会显示在canvas.toDataURL()
的结果中。但是DOM
这样的操作,例如调整< canvas>的大小element(示例myCanvas.style.width = 100
)不会对其像素数据进行任何更改。