Javascript 将PNG上载到画布中

经过几个小时的研究，我还没有找到上传PNG以便在画布元素中使用的最佳方法。我找到的所有解决方案都以某种方式使用服务器端代码。我希望这个解决方案完全是客户端的。有办法做到这一点吗

工作流程：

用户上传图像

JS以某种形式访问此图像（base64）

图像被加载到画布中

是的，可以完成

可以从JavaScript读取在

type=“file”

的

输入中传递的文件，问题是将文件作为图像读取并将其放置在画布中。这可以通过将图像加载到
img
元素中，然后将图像从img元素绘制到
画布中来解决


我最初的答案

您可以利用Sebastian Tschan（又名blueimp）的项目。看

在此基础上建立一个工作示例非常容易：

<script src="load-image.min.js"></script>
<input id="file-input" type="file">
<script>
    document.getElementById('file-input').onchange = function (e)
    {
        var loadingImage = loadImage(
            e.target.files[0],
            function (img)
            {
                document.body.appendChild(img);
            },
            {maxWidth: 600}
        );
        if (!loadingImage)
        {
            // Alternative code ...
        }
    };
</script>


document.getElementById（'file-input'）。onchange=function（e）
{
var loadingImage=loadImage(
e、 target.files[0]，
功能（img）
{
文件.正文.附件（img）；
},
{maxWidth:600}
);
如果（！loadingImage）
{
//替代代码。。。
}
};

注：以上代码使用，请下载使用。我不提供“jsfiddle”（或类似版本），因为我在任何CDN上都没有找到此库。
据我所知，您要求提供完整的客户端解决方案，我认为这就是您想要的：



函数PreviewImage（）{
var of reader=new FileReader（）；
readAsDataURL（document.getElementById（“uploadImage”）.files[0]）；
oFReader.onload=函数（OFRENT）{
document.getElementById（“uploadPreview”）.src=ofretent.target.result；
var c=document.getElementById（“imgPreview”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“uploadPreview”）；
ctx.drawImage（img，10,10）；
};
};
什么？不完全是，但差不多！我希望用户能够从系统文件查找器提示符中选择图像。注意他们是如何说一切都是在浏览器中本地完成的。我会看看他们的代码，看看他们是如何完成文件上传的。或者类似的事情？或者复制：@GuySirton这是一个img，AlexanderVentura想要画布。这仍然是一个很好的起点。这个解决方案的唯一问题是FileReader的浏览器兼容性。@AlexanderVentura我测试了它的Mozilla、Chrome和Opera，并且它工作正常。在上不起作用
<script>

function PreviewImage() {
    var oFReader = new FileReader();
    oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

    oFReader.onload = function (oFREvent) {
        document.getElementById("uploadPreview").src = oFREvent.target.result;
var c=document.getElementById("imgPreview");
var ctx=c.getContext("2d");
var img=document.getElementById("uploadPreview");
ctx.drawImage(img,10,10);
    };
};

</script>