toDataURL()においてのミスについて

Question

選択した画像を用いて画像検索を行おうと思っているのですが、

	function Sub(image){
				
		var form = document.createElement('form');
		form.setAttribute('method', 'post');
		form.setAttribute('action', 'http://images.google.com/searchbyimage/upload');
		form.style.display = "none";
		document.body.appendChild(form);
		
		var hiddenField = document.createElement('input');
		hiddenField.setAttribute('type', 'hidden');
		hiddenField.setAttribute('name', 'image_content');
		hiddenField.setAttribute('value', image);
		form.appendChild(hiddenField);
		
		form.submit();
	};
	
	var imageToBase64 = function(imgElement, mimeType) {
		
		var canvas = document.createElement('canvas'),
		context = canvas.getContext('2d'),
		base64String = '';
		
		if (!imgElement || typeof mimeType !== 'string') {
			return '';
		} 
		
		mimeType = mimeType.replace(/\/png$/, '/octet-stream');
		
		imgElement.crossOrigin = 'anonymous';
		
		canvas.width  = imgElement.width;
		canvas.height = imgElement.height;
 		
		context.drawImage(imgElement, 0, 0);
		
		base64String = canvas.toDataURL(mimeType); 
		
		canvas.clearRect(0, 0, 0, 0);
		
		return base64String;
	};
	
	var image = document.getElementsByTagName('img')[0];
	
	var base64String = imageToBase64(image, 'image/jpeg');
	
	SearchCode = Sub.toString().replace(/(\n|\t)/gm, '');
	
	chrome.tabs.create({
		'url': 'javascript:' + SearchCode + '; Sub("' + base64String + '");'
	});

上記のプログラムを実行した所、

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

と出てしまったのですが、探しても、imgタグのcrossoriginにanonymousと設定すればよいとのみで、どこに設定すればよいか分かりません。

教えて頂けませんか。

ちなみに、manifestファイルについては、以下のとおりです。

{
	"manifest_version": 2,
	"version": "1.0.0",
	"name": "Tab Searcher",
	"description": "画像をタブの部分にドラッグ&ドロップするだけで画像検索の出来る拡張機能です。",
	"permissions": [
		"tabs",
		"activeTab",
		"browsingData",
		"<all_urls>"
	],
	"background" : {
		"scripts": [
			"ImageSearch_test_6.js"
		],
		"persistent" : false
	},
	"browser_action":{
		"default_icon": "tabsearch.png"
	}
}

Answer 1

そもそも、anonymouseに設定しなくとも良かったです。

"context.drawImage(imgElement, 0, 0);"の部分があった為にエラーが発生していました。

よって、消すことで解決する事が出来ました。

Answer 2

"anonymous"が有効になるのは、画像ロード時であって、すでに画像がロードされている状態で後から付け足しても有効にならないのでは？

Comments

[mansei2010]

御回答ありがとうございます。

content_scriptsで行ったときに、バグが出てしまったのでどこか間違えているのかと思っていました。

backgroundのときでは、読み込む前にプログラムが実行されてしまい、検索がされずに悩んでいるんです。