将原始图像绘制到画布中

Question

我想将上传的图像放入画布并使用它。

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 中，但我不能简单地绘制它。

有什么想法吗？

Answer 1

您不需要导致两个回调的 FileReader + Image。
将其读取为 DataURL (base64) 会占用更多内存/cpu，并且会减慢速度。

创建一个 ObjectURL 就足够了

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

Answer 2

必须自己解决这样的问题，这就是我的做法

读取原始图像数据与 Philippe 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'});
}

Answer 3

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

Answer 4

试试这个

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
            }
        }