Question

我基本上是尝试从输入对话框中获取所选的图像文件，并将其设置为我的HTML中的画布。 但是，图像会被裁剪，只显示部分图像。

的Javascript ：

function onSS1Change(file) {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image;
    img.onload = function () {
        ctx.drawImage(img, 20, 20);
    }
    img.src = URL.createObjectURL(file.target.files[0]);
}

HTML ：

<input id="ss1-inputdiag" type="file" onchange="onSS1Change(event)" />

小提琴：http://jsfiddle.net/tdy9tqfh/

我需要获得原始的高度和宽度

我做错了什么？

Answer 1

jsFiddle：http://jsfiddle.net/CanvasCode/tdy9tqfh/2/

只需更新画布的高度和宽度以适合图像，您也可以在x 20和y 20位置绘制图像，这样您的所有图像都会在右侧和底部略微切除。

var input = document.getElementById（'input'）; input.addEventListener（'change'，handleFiles）;

function handleFiles(e) {
    var c = document.getElementById('canvas');
    var ctx = c.getContext('2d');

    var img = new Image;
    img.src = URL.createObjectURL(e.target.files[0]);
    img.onload = function() {
        c.width = img.width;
        c.height = img.height;
        ctx.drawImage(img, 0,0);
        alert('the image is drawn');
    }
}

Javascript：将图像设置为Canvas无法正常工作

1 个答案: