將原始圖像繪製到畫布中

我想將上傳的圖片放入canvcas中以使用它。將原始圖像繪製到畫布中

HTML：

<h2>Upload:</h2> 
<input type="file" id="take-picture" accept="image/*"> 

<h2>Preview:</h2> 
<p> 
    <canvas id="show-picture" style="background-color: aqua; height: 100px; width: 100px;" /> 
</p>

這裏是我的JavaScript上傳處理後的圖片：

takePicture.onchange = function (event) { 
     var files = event.target.files, 
      file; 
     if (files && files.length > 0) { 
      file = files[0]; 
      processImage(file); 
     } 
    };

現在在processImage來法的圖片應該存儲在一個畫面內。

function processImage(file) { 
    // showImage(showPicture, file); //loading into a regular img-tag 

    var canvas = document.getElementById('show-picture'); 
    var context = canvas.getContext('2d'); 
    context.drawImage(file, 100, 100); 
}

我能夠把這個文件放到img-tag中，但我不能簡單地繪製它。

你能幫我嗎？

來源

2012-09-23 K. D.

drawImage函數將img元素作爲輸入，而不是文件。

所以你需要從文件中創建一個img元素（但你不需要將它附加到文檔中）。當圖像加載完成（有一個onload事件）時，您可以在畫布上繪製它。

編輯：您還需要讀取文件的內容作爲數據url，然後將其設置爲圖像src。

var reader = new FileReader(); 
reader.readAsDataUrl(file) 
reader.onload = function(e) { 
    var img = new Image(); 
    img.onload = function() { 
     context.drawImage(img, 100,100) 
    } 
    img.src = e.target.result; 
}

來源

2012-09-23 14:58:09

試試這個

function loadImage() { 
      var ctx = getCanvas('testCanvas').getContext('2d'); // get Canvas context 
      var img = new Image(); 
      img.src = 'imgs/test.png'; 
      img.onload = function(){ 
       ctx.drawImage(img, 200, 200, 300, 200); // x, y, width, height 
      } 
     }

來源

2012-09-23 14:59:21 benbai123

但我沒有任何圖像源 –

如果您可以通過HTTP連接到該圖像：// yourhost /路徑到影像，您可以使用它在JavaScript中作爲...... var img = new Iamge（）; img.src =的 'http：// yourhost /路徑到圖像'; img.onload = ...... – benbai123

不得不進行排序這樣的事情了我自己，這是我如何做的

讀取原始圖像數據一樣什麼菲利普Mongeau做

var reader = new FileReader(); 
reader.readAsDataURL(dataURItoBlob(rawImageData)); 
reader.onload = function (e) 
{ 
    // load the data as an image to draw it into the canvas 
    var img = new Image(); 
    img.onload = function() 
    { 
     ctx.drawImage(img, 0, 0); 
    }; 
    img.src = e.target.result; 
}; 

function dataURItoBlob (dataURL) 
{ 
    var onlyData = dataURL.substring(dataURL.indexOf(',') + 1); 
    var decoded = atob(onlyData); 
    var dl  = decoded.length; 
    var buffer = new Uint8Array(dl); 

    for (var i = 0; i < dl; i++) buffer[i] = decoded.charCodeAt(i); 

    return new Blob([buffer], {type: 'image/png'}); 
}

來源

2016-09-15 15:19:10

您不需要FileReader + Image導致兩個回調。
將其作爲DataURL（base64）讀取會佔用更多的內存/ CPU並會減慢速度。

這是不夠的，只是創建的ObjectURL

var img = new Image 
img.onload = function() { 
    context.drawImage(img, 100,100) 
} 
img.src = URL.createObjectURL(file)

來源

2016-09-16 12:35:08 Endless

將原始圖像繪製到畫布中

回答

相關問題