Javascript background.js中的drawImage不工作？铬延伸
在我的chrome扩展名的background.js中，我的目标是background.HTML文件中存在的canvas HTML标记 然而，该方法：Javascript background.js中的drawImage不工作？铬延伸,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,在我的chrome扩展名的background.js中，我的目标是background.HTML文件中存在的canvas HTML标记 然而，该方法： canvas.getContext("2d").drawImage(source_img_obj, 0, 0); 它不起作用。我通过在之前和之后发出警报来解决这个问题。触发前的警报，未触发后的警报。这是正常的还是我遗漏了什么 以下是我的设置： 清单文件： { "manifest_version": 2, "name": "moodflo
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/*"
]
}
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;
}
<!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>
这对我来说有点难调试，因为我没有可用的控制台。Openchrome://extensions 页面，启用开发者模式，在devtools调试器中检查扩展的后台页面。应该会显示错误，因为
$（'#myCanvas'）$（'#myCanvas'）[0]uncaughttypeerror:cvs.getContext不是jic（background.js:128）的compressImageAndSave（background.js:103）的HTMLImageElement的函数。（background.js:75）在HTMLImageElement.dispatch（jquery-3.2.1.min.js:3）在HTMLImageElement.q.handle（jquery-3.2.1.min.js:3）后台页面