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

drawImage函数将img元素作为输入，而不是文件。

所以你需要从文件中创建一个img元素（但是你不需要将它附加到文档中）。当图像完成加载（有一个onload事件）时，你可以在画布上绘制它。

编辑：在将文件内容设置为图像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 2

试试这个

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

Answer 3

我必须自己排序这样的事情，这就是我做的事情

读取与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 4

您不需要FileReader + Image会导致两次回调读取它作为DataURL（base64）占用更多的内存/ CPU并将减慢速度。

仅仅创建一个ObjectURL

就足够了

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

将原始图像绘制到画布中

4 个答案: