Question

我正在尝试将图像绘制到Cordova应用程序中的画布上。我相信我的Base64图像正确，因为我使用了几种方法对它进行编码，它们似乎都返回相同的数据字符串。

下面的代码似乎运行正常，将数据传递到img.src但是onload不会触发。我已经搜索了大约50多个问题，看看如何做到这一点，他们似乎都使用我正在做的方式，但是onload没有触发。

picsSelectAll（）附加到我的HTML中的一个按钮，在页面加载后按下，我也尝试在Deviceready上调用它，但它仍然做同样的事情。

任何关于尝试不同事物的建议都会受到大力赞赏，我已经在这几天了，并且无法超越它。

function picsPhotodataSelectHandler(tx, results){

    console.log("Photodata had Results: "+results.rows.length);
        // Handle the results
        for (var i=0; i<results.rows.length; i++) {
            var row = results.rows.item(i);

            var newImage = new Object();
            newImage.picid = row['id'];
            newImage.encodedtext = row['img_uri'];
            canvasData.push(newImage);
        }
        showImagesFromDB();
    }

function picsSelectAll(){ 

    db.transaction(
        function (tx) {
            tx.executeSql("SELECT id, img_uri from insc_snags WHERE id=81;", [], picsPhotodataSelectHandler, transaction_error);
        }
    );  
}

function drawImageOnCanvas(data, canvas) {
        var img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            canvas.getContext("2d").drawImage(img, 0, 0);
        };


        img.src = data;
    }

function getCanvasDataByID(ID){
        for (var i=0; i<canvasData.length;i++){
            if (canvasData[i].picid == ID) {
                return canvasData[i].encodedtext;           
            }
        }
        return '';  
    }

function showImagesFromDB() {
        var container = document.getElementById('img-container')
        container.innerHTML='';

        for (var i=0; i<canvasData.length; i++){
            var canvasImg = document.createElement("canvas");
            var imgID = canvasData[i].picid;

            canvasImg.setAttribute("id", 'cx'+imgID);
            //canvasImg.setAttribute("title", data[i].desc);

            drawImageOnCanvas(getCanvasDataByID(imgID), canvasImg);

            container.appendChild(canvasImg);
        }
    }

尝试从数据库添加图像但是onload没有触发

0 个答案: