我想在canvas标签上添加drawImage
,然后再次保存。我使用jQuery的deferred.done()
。
以下是我使用的代码:
function save_submit() {
LoadDraw().done(function(){
var canvas = document.getElementById('touchpaint');
var ctx = canvas.getContext('2d');
var image = canvas.toDataURL();
});
var LoadDraw = function () {
var r = $.Deferred();
var canvas = document.getElementById('touchpaint');
var ctx = canvas.getContext('2d');
var imageLoader = 'http://img262.imageshack.us/img262/3453/gokum.jpg';
var img = new Image();
$(img).load(function (){
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(img,0,0);
});
img.crossOrigin = '';
img.src = imageLoader;
r.resolve();
return r;
}
它适用于Firefox。但不适用于Chrome和Safari。我正在寻求帮助。谢谢。
答案 0 :(得分:0)
好吧,你没有正确使用Deferred。 Deferred对象的想法是在某种回调函数中解决它,而不是在创建它之后“直接”解决它。
在你的情况下,你可能应该在$(img).load回调函数中解析deferred(r):
var LoadDraw = function () {
var r = $.Deferred();
var canvas = document.getElementById('touchpaint');
var ctx = canvas.getContext('2d');
var imageLoader = 'http://img262.imageshack.us/img262/3453/gokum.jpg';
var img = new Image();
$(img).load(function (){
ctx.globalCompositeOperation = "destination-over";
ctx.drawImage(img,0,0);
r.resolve();
});
img.crossOrigin = '';
img.src = imageLoader;
return r;
}