Question

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

工作流：

用户上传图片

JS以某种形式（base64）

访问此图像

图像被加载到画布

Answer 1

是的，可以做到。

可以从JavaScript中读取input type="file" img中传递的文件，~~问题是将文件作为图像读取并将其放在画布中~~这可以通过在canvas元素中加载图像然后将图像从img元素绘制到<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>作为shown by Zword来实现。

我的原始答案

您可以利用Sebastian Tschan（又名blueimp）的项目JavaScript-Load-Image。请参阅demo。

基于它设置一个工作示例非常容易：

{{1}}

注意：上面的代码使用load-image.min.js，下载使用。我没有提供“jsfiddle”（或类似的）因为我没有在任何CDN上找到这个lib。

Answer 2

据我所知，您要求提供完整的客户端解决方案，我认为这就是您想要的：

http://jsfiddle.net/gvk9p/1/

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

将PNG上载到画布中

2 个答案: