Question

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

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

Answer 1

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);

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

1 个答案: