質量損失，同時從二進制字符串

Question

對HTML 5畫布添加圖像繪製我想畫到畫布上從二進制字符串的圖像。

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

...如果您以畫布的原始分辨率繪製圖像，那麼當圖像縮放時，顯然會失去質量。

...如果你在圖像的原始分辨率繪製圖像，但在畫布上並沒有改變大小，那麼你會與部分圖像或部分填充畫布結束。

所以，如果你想沒有那些，然後將畫布的尺寸相匹配的圖像的尺寸，你就會有該數據圖像的分辨率相匹配的畫布上繪製的圖像。

---

EDIT

添加代理的一個例子，在兩者之間。

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