Question

我正在将用户上传的图像绘制到画布上，然后调整图像大小并将其发送到amazon S3。但是，我不想在绘制图像时向用户显示图像，我希望它保持隐藏状态。这可能吗？我正在使用角度js和角度上传来处理这个问题。第二种选择是将图像绘制到看起来有点漂亮的桌子上，但是我想看看我是否可以先破解它。这是代码：

$scope.onFileSelect = function ($files) {
        $scope.files = $files;
        $scope.upload = [];
        for (var i = 0; i < $files.length; i++) {
            var fr = new FileReader();
            fr.onload = function (e) {
                var img = new Image();
                var fileSent = false;
                img.onload = function(){
                    var MAXWidthHeight = 488;
                    var ratio = MAXWidthHeight / Math.max(this.width,this.height);
                    var w = Math.round(this.width * ratio);
                    var h = Math.round(this.height * ratio);
                    var c = document.createElement("canvas");
                    c.width = w;
                    c.height = h;
                    c.setAttribute("hidden", true);
                    c.getContext("2d").drawImage(this,0,0,w,h);
                    this.src = c.toDataURL();
                    if(!fileSent) {
                        sendToS3(c.toDataURL());
                        fileSent = true;
                    }
                    document.body.appendChild(this);
                }
                img.src = e.target.result;
            } 
            fr.readAsDataURL($files[i]);
        }
    };

Answer 1

您可以尝试首先在第二个永久隐藏的画布上绘制它，然后使用：

复制画布

ctx = c.getContext("2d"); //I like to do this
ctx.drawImage(canvasHidden,0,0,w,h);

我不确定代码中出现问题的位置。看起来像将画布的宽度属性设置为0使它不可见你应该尝试隐藏它...不确定它是否与图像溢出它混淆。

将隐藏的图像绘制到html5画布

1 个答案: