3

我正在尝试将二进制字符串中的图像绘制到画布上。

 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，因为我需要将二进制文件发布到服务器。我的要求是显示完整的图像并在其上画线。

4

1 回答 1

4 
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);
于 2013-03-11T09:25:07.847 回答