js 读取图像

<input type="file" id="imageInput" accept="image/*">
<canvas id="previewCanvas"></canvas>

document.getElementById('imageInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = new Image();
            img.onload = function() {
                const canvas = document.getElementById('previewCanvas');
                const ctx = canvas.getContext('2d');
                // 设置canvas尺寸与图像相同
                canvas.width = img.width;
                canvas.height = img.height;
                // 绘制图像到canvas
                ctx.drawImage(img, 0, 0);
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

const img = new Image();
img.crossOrigin = "Anonymous"; // 处理跨域问题
img.onload = function() {
    const canvas = document.getElementById('previewCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
};
img.src = 'https://example.com/image.jpg';