Question

在我的Chrome扩展程序的 background.js 中，我定位的是 background.html 文件中存在的画布HTML标记。

然而，方法：

canvas.getContext("2d").drawImage(source_img_obj, 0, 0);

无效。我通过在之前和之后发出警报来解决这个问题。触发前的警报，不触发后的警报。这是正常还是我错过了什么？

以下是我的设置：

清单文件：

{
  "manifest_version": 2,
  "name": "moodflow",
  "short_name": "moodflow",
  "description": "",
  "version": "0.0.0.10",
  "author": "Walter J. Monecke",
  "chrome_url_overrides" : {
    "newtab": "index.html"
  },
  "background": {
    "page": "background.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "permissions": [
    "storage",
    "alarms",
    "unlimitedStorage",
    "activeTab",
    "https://www.youtube.com/iframe_api",
    "https://api.unsplash.com/photos/random",
    "https://api.unsplash.com/photos/random/*"
  ]
}

我的 background.js ：

chrome.alarms.onAlarm.addListener(function() {
    getBackgroundAPI();
});

function getBackgroundAPI() { // AJAX Unsplash API --> compressImageAndSave()
    // background image AJAX
    $.ajax({
        url: "https://api.unsplash.com/photos/random",
        type: 'get',
        async: true,
        dataType: "json",
        data: "client_id=29b43b6caaf7bde2a85ef2cfddfeaf1c1e920133c058394a7f8dad675b99921b&collections=281002",
        success: (response) => {
            alert('successful API');

            $('#source_img').css('display', 'none');

            // insert src into img
            $('#source_img').on('load', function() {
                alert('Image has loaded!');
                compressImageAndSave();
            }).attr('src', response.urls.raw);

            let backgroundInfo = response;
            // save picture information
            chrome.storage.local.set(backgroundInfo, () => {

                return;
            });
        },
            error: () => {

            alert('getPictureApi AJAX failed');
        }
    });
}

function compressImageAndSave() {
    alert('withing compressImageAndSave')
    let source_img = document.getElementById("source_img");
    let compressedSRC;

    //An Integer from 0 to 100
    let quality = 60;
    // output file format (jpg || png)
    let output_format = 'jpg';
    //This function returns an Image Object
    alert('before callin JIC')

    compressedSRC = jic(source_img, quality, output_format).src;

    alert(compressedSRC);

    var savedBackground = {};
    savedBackground.dataURL = compressedSRC;
    alert('right before saving');
    // save to chrome.storage
    chrome.storage.local.set(savedBackground, function() {
        // Notify that we saved.
        alert('compressed dataURL was saved');
    });
} // works in tandem with getBackgroundAPI()

function jic(source_img_obj, quality, output_format) {
    alert('wihtin JIC')
    var mime_type = "image/jpeg";
    if(typeof output_format !== "undefined" && output_format=="png"){
        mime_type = "image/png";
    }
    alert('after if statement');
    var cvs = $('#myCanvas');
    cvs.width = source_img_obj.naturalWidth;
    cvs.height = source_img_obj.naturalHeight;



    alert('before drawing');   //THIS ONE GETS TRIGGERED

    var ctx = cvs.getContext("2d").drawImage(source_img_obj, 0, 0);

    alert('after drawing');    //THIS ONE NOT




    var newImageData = cvs.toDataURL(mime_type, quality/100);
    var result_image_obj = new Image();
    result_image_obj.src = newImageData;
    alert('before return');
    return result_image_obj;
}

我的background.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <img src="" id="source_img">
    <canvas id="myCanvas"></canvas>

    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/JIC.js"></script>
    <script src="hot-reload.js"></script>
    <script src="background.js"></script>
  </body>
</html>

由于我没有可用的控制台，因此我很难调试。

background.js中的drawImage不起作用？ Chrome扩展程序

0 个答案: