Javascript 从二进制字符串在HTML5画布上添加绘图图像时质量下降

我试图在画布上画一个二进制字符串的图像

 var reader = new FileReader();
     //reader.readAsDataURL(file);
     reader.readAsBinaryString(file);
     reader.onload = function(event){
         var d = $(thisObj.CreateIndoorFormDivControlName).dialog();
         var canvas =document.getElementById('canvasfloorLayout');
        var cxt=canvas.getContext("2d");
         var img=new Image();
            img.onload = function() {
                cxt.drawImage(img, 0, 0,canvas.width,canvas.height);
            }
            img.src = "data:image/jpeg;base64,"+window.btoa(reader.result);

我正在使用上面的代码，但问题是图像大小正在缩小到画布大小，质量正在下降。我已经被试过了

cxt.drawImage(img, 0, 0,img.width,img.height);

但是图像被裁剪了。 我不想使用reader.readAsDataURL，因为我需要将二进制文件发布到服务器。我的要求是显示完整的图像并在上面画线

canvas.width  = img.width;
canvas.height = img.height;

ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

…如果以画布的本机分辨率绘制图像，那么当图像缩放时，它显然会失去质量

…如果您以图像的本机分辨率绘制图像，但画布的大小没有改变，则最终将得到部分图像或部分填充的画布

因此，如果您不想要这两个，那么将画布的尺寸设置为与图像的尺寸相匹配，您将得到一个画布绘制的图像，该图像与数据图像的分辨率相匹配

---

编辑

在两者之间添加代理的示例

var img = new Image(),
    canvas = document.createElement("canvas"),
    context = canvas.getContext("2d"), 
    // ......etc


    dimensions = {
        max_height : 800,
        max_width  : 600,
        width  : 800, // this will change
        height : 600, // this will change
        largest_property : function () {
            return this.height > this.width ? "height" : "width";
        },
        read_dimensions : function (img) {
            this.width = img.width;
            this.height = img.height;
            return this;
        },
        scaling_factor : function (original, computed) {
            return computed / original;
        },
        scale_to_fit : function () {
            var x_factor = this.scaling_factor(this.width,  this.max_width),
                y_factor = this.scaling_factor(this.height, this.max_height),

                largest_factor = Math.min(x_factor, y_factor);

            this.width  *= largest_factor;
            this.height *= largest_factor;
        }
    };


dimensions.read_dimensions(img).scale_to_fit();

canvas.width  = dimensions.width;
canvas.height = dimensions.height;
context.drawImage(img, 0, 0, dimensions.width, dimensions.height);

---

谢谢工作得很有魅力@MehdiKaramosly然后创建一个“长方体”或“摄影机”对象，您可以将首选宽度设置为。有一些辅助函数可以让你得到当前的屏幕大小，画布父对象的当前像素尺寸，或者任何你想要匹配的DOM元素的大小。。。从那里，获得图像、画布和screen/DOM元素的宽度和高度，并决定使用哪个元素。它们之间的转换是简单的代数。但如果你扩大规模，你就会失去质量。尤其是在非2系数比率下。@Norguard你能写一些代码来详细说明解决方案吗？@MehdiKaramosly看一看。我只是说“哪一个维度变化最大，以使其适应窗口--按该百分比同时改变它们”。@MehdiKaramosly这当然是解决方案，只有当图像大于预期大小时。如果图像较小，则需要一个

缩放到拟合

函数，该函数使用较小的因子，而不是较大的因子（即：放大到第一个维度到达边缘，而不是放大到第二个维度完美匹配，第一个维度消失）。你不必缩放到合适的位置，你可以缩放到覆盖位置（一直缩放到较小的边适合为止），这在放大或缩小时使用与“适合”完全相反的因子。。。